html基础知识（总结自www.runoob.com）

HTML属性

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

定义了浏览器工具栏的标题

当网页添加到收藏夹时，显示在收藏夹中的标题

显示在搜索引擎结果页面的标题

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

eg:

<head>

</head>

HTML <link> 元素

eg:

<head>

</head>

HTML <style> 元素

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>

body {/style>

</head>

HTML <meta> 元素

meta标签描述了一些基本的元数据。

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

为搜索引擎定义关键词:

为网页定义描述内容:

定义网页作者:

每30秒钟刷新当前页面:

HTML head 元素

标签描述

<head> 定义了文档的信息

<title> 定义了文档的标题

<base> 定义了页面链接标签的默认链接地址

html图像-图像标签<img>

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

HTML 图像- Alt属性

alt 属性用来为图像定义一串预备的可替换的文本。

替换文本属性的值是用户定义的。

在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

HTML 图像- 设置图像的高度与宽度

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素:

提示: 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

HTML 图像标签

标签描述

<img> 定义图像

<map> 定义图像地图

<area> 定义图像地图中的可点击区域

1、矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

2、圆形：(圆心坐标为(X1,y1)，半径为r)

3、多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

HTML 表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

eg:

（水平标题）

<tr>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

（垂直标题）

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

</tr>

<tr>

<th>Telephone:</th>

</tr>

带标题

<caption>Monthly savings</caption>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

单元格跨两格（标题）

<th colspan="2">Telephone</th>

定义边框的宽度

定义单元格边距

定义单元格间距

HTML 表格标签

标签描述

<table> 定义表格

<th> 定义表格的表头

<tr> 定义表格的行

<td> 定义表格单元

<caption> 定义表格标题

<colgroup> 定义表格列的组

<col> 定义用于表格列的属性

<thead> 定义表格的页眉

<tbody> 定义表格的主体

<tfoot> 定义表格的页脚

HTML无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

<ul>

<li>Coffee</li>

</ul>

HTML 有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

<ol>

<li>Coffee</li>

</ol>

<li>Coffee</li>

</ol>

HTML 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

<h4>大写字母列表：</h4>

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

大写字母列表：

A. Apples

B. Bananas

C.Lemons

D. Oranges

<h4>罗马数字列表：</h4>

罗马数字列表：

I.Apples

II.Bananas

III.Lemons

IV.Oranges

HTML 布局 - 使用<div> 元素

div 元素是用于分组 HTML 元素的块级元素。

HTML 表单

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

表单使用表单标签 <form> 来设置:

<form>

input 元素

</form>

例子：

Username: <input type="text" name="user"><br>

Password: <input type="password" name="password">

</form>

HTML 表单 - 输入元素

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

密码字段

密码字段通过标签<input type="password"> 来定义:

<form>

Password: <input type="password" name="pwd">

</form>

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form>

<input type="radio" name="sex" value="female">Female

</form>

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>

<input type="checkbox" name="vehicle" value="Car">I have a car

</form>

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

Username: <input type="text" name="user">

</form>

简单的下拉列表。

<option value="volvo">Volvo</option>

</select>

</form>

带预选的下拉列表

按钮

</form>

文本框

我是一个文本框。

</textarea>

提交

First name: <input type="text" name="FirstName" value="Mickey"><br>

Last name: <input type="text" name="LastName" value="Mouse"><br>

</form>

<p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>

HTML 框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

iframe语法:

该URL指向不同的网页。

Iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。

实例

Iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框:

实例

HTML 脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

document.write("Hello World!")

</script>

不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。

HTML 字符实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

HTML 实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

实体名称对大小写敏感！

显示结果描述实体名称实体编号

空格

< 小于号 < <

> 大于号 > >

& 和号 & &

" 引号 " "

' 撇号 ' (IE不支持) '

HTML 统一资源定位器(Uniform Resource Locators)

URL 是一个网页地址。

URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50。大多数人进入网站使用网站域名来访问，因为名字比数字更容易记住。

语法规则:

scheme://host.domain:port/path/filename

说明:

scheme - 定义因特网服务的类型。最常见的类型是 http

host - 定义域主机（http 的默认主机是 www）

domain - 定义因特网域名，比如 runoob.com

:port - 定义主机上的端口号（http 的默认端口号是 80）

path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

filename - 定义文档/资源的名称

URL 字符编码

URL 只能使用 ASCII 字符集.

来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

访问https://www.runoob.com/html/html-tutorial.html查看详细教程

html基础知识（总结自www.runoob.com）的更多相关文章

学习Python3基础知识过程中总结
print()中end==""的用法例子:用Python3输出九九乘法表: for i in range(1,10): for j in range(1,i+1): s=i*j ...
曹工说Redis源码（2）-- redis server 启动过程解析及简单c语言基础知识补充
文章导航 Redis源码系列的初衷,是帮助我们更好地理解Redis,更懂Redis,而怎么才能懂,光看是不够的,建议跟着下面的这一篇,把环境搭建起来,后续可以自己阅读源码,或者跟着我这边一起阅读.由于 ...
Python开发【第二篇】：Python基础知识
Python基础知识一.初识基本数据类型类型: int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位 ...
爬虫基础---HTTP协议理解、网页的基础知识、爬虫的基本原理
一.HTTP协议的理解 URL和URI 在学习HTTP之前我们需要了解一下URL.URI(精确的说明某资源的位置以及如果去访问它) URL:Universal Resource Locator 统一资 ...
shell基础知识---与监听服务器长连接端口状态
从未写过脚本我的最近接了俩脚本的需求,就在这分享一下我的我学到基础知识主要就四部分内容一.变量变量的定义 string='字符串' string="字符串" num=808st ...
java正则表达式基础知识（转）
1基础 2.1 简单字符类构造描述 [abc] a,b或c [^abc] 除a,b或c外的字符 [a-zA-Z] a至z 或 A至Z [a-d[m-p]] a至d 或 m至p [a-z&& ...
PHP 基础知识总结
PHP 代表 PHP: Hypertext Preprocessor PHP 文件可包含文本.HTML.JavaScript代码和 PHP 代码 PHP 代码在服务器上执行,结果以纯 HTML 形式返 ...
PHP基础知识学习总结
从今天开始过一遍PHP的基础知识加油地址:http://www.runoob.com/php/php-mail.html 该看:PHP发送电子邮件 2017年5月23日23:38:30 ...
Servlet学习笔记【1】--- 背景和基础知识（CGI、Web服务器发展史、Servlet简介、任务、继承结构）
本文主要讲Servlet的基础知识和背景知识. 1 CGI简介 CGI(Common Gateway Interface 公共网关接口)是WWW技术中最重要的技术之一,有着不可替代的重要地位.CGI是 ...
001/Node.js(Mooc)--基础知识
一.Node.js基础知识 node.js用C++语言编写. 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时 ...

随机推荐

P2983 [USACO10FEB]购买巧克力
P2983 [USACO10FEB]购买巧克力题解注意题目开 long long 贪心策略:价格从低到高,买够为止反证:若剩下的有一个K”,比K小,那么交换,稳赚不赔所以,在买K之前,所有比他 ...
FinalShell Mac OS版,Linux版安装及教程(Mac下的xshell)
用户QQ群 342045988 Mac版安装路径/Applications/finalshelldata Linux版安装路径/usr/lib/finalshelldata 注意:1.FinalShe ...
Linux搭建ftp服务器简单教程及使用方法
参考文章:https://www.waitig.com/linux-or-centos-install-vsftpd-and-setup-it.html 步骤概括如下: 安装:yum install ...
windows安装python flask虚拟环境
安装pipenv的虚拟环境主要是为了防止不同python版本之间冲突的问题,虚拟环境安装的包包不会对外部真实环境产生任何作用,只会作用于虚拟环境.这样,一个flask框架应用对应一个pipenv虚拟环 ...
阶段3 3.SpringMVC·_03.SpringMVC常用注解_5 RequestHeader注解
2019.11.07【每天学点SAP小知识】Day2 - ABAP 7.40新语法 - 内表
今天学习一下内表的表达式在ABAP 7.4之后的语法: SELECT * FROM mara INTO TABLE @DATA(gt_mara)UP TO 10 ROWS. DATA gt_mara_ ...
【HANA系列】SAP HANA中null变成问号的问题
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA中null变成问 ...
linux如何设置磁盘配额？
环境:CentOS7 需求: zhang3 用户在 /dev/sdb1 上,只能使用100M的空间,建立 200个文件. 注意事项:XFS 不能对 / 开启配额 ...
云计算Openstack介绍（1）
一.云计算的前世今生所有的新事物都不是突然冒出来的,都有前世和今生.云计算也是IT技术不断发展的产物. 要理解云计算,需要对IT系统架构的发展过程有所认识. 请看下 IT系统架构的发展到目前为止大致 ...
POJ3734 Block母函数入门
一段长度为n的序列,你有红黄蓝绿四种颜色的砖块,一块砖长度为1,问你铺砖的方案数,其中红黄颜色之和必须为偶数. #include <queue> #include <stack> ...

html基础知识（总结自www.runoob.com）

html基础知识（总结自www.runoob.com）的更多相关文章

随机推荐

热门专题