HTML的基本标签及语法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、HTML基本标签head部分

HTML文档的基本结构

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>

1、<!DOCTYPE html>文档声明

文档类型声明，让浏览器按照HTML5的标准对代码进行解释与执行。

文档类型声明必不可少，而且，必须放在文档最上方。

如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现BUG。

2、头部：<head></head>

head中，主要放一些关于网页设置的相关语句。

mete标签

（1）设置网页的字符集编码格式

GB2312（简体中文的编码格式）
GBK （扩展的国标码。比国标码多了更多的编码格式。）
utf-8 (万国码。可以兼容绝大多数国家的语言。)
html4.0之前，声明字符集编码格式:

（2）设置网页关键字

name=“keywords” 表示当前语句用于设置网页关键字
content=表示网页的关键字内容，多个关键字之间用英文逗号分开。

eg：

（3）设置网页描述

name="description"表示当前语句用于设置网页描述
网页的描述，在搜索引擎中搜索网站时，标题下面的一段文字，就是网页描述的内容。

eg：

<title></title>标签

网页的标题:也就是网页选项卡上的文字

eg：

<link>标签

链接网页小图标：选项卡上的小图片。
rel属性：选择icon，表示链接的文件，将作为网页的icon图标。
href属性:选择图片所在的路径地址。

eg：

二、常见的块级标签

1、HTML的标签分类

分为“块级标签”和“行级标签”
二者区别：
①.块级标签自动换行，前后隔一行.
行级标签不会自动换行，从左向右依次显示.
②.块级标签默认的宽带是100%.
行级标签的宽带由文字内容撑开.
③.块级标签可以设置宽度、高度、边距等属性.
行级标签不能设置上述属性.

从写法上，html标签分为“成对标签”和“自闭合标签(空标签)”
1.成对标签：成对出现，有开始标签，必须有结束标签，内容包裹在两个标签之间。
例如：<h1></h1> <p></p> <title><title>
2.自闭合标签/空标签：只有一个标签，用/表示标签的自动闭合（/可以省略）。
例如<hr/><link/><meta/>

①标题标签（默认加粗，h1最大，h6最小）

②水平线<hr/>
③段落<p><p/>
④换行<br />
eg：

<p>这是一个段落。这是一个段落。<br>这是一个段落。这是一个段落。</p>

⑤引用<blockquote></blockquote>

blockquote :引用标签。表示标签中的文字是引用自其他网站的内容。
浏览器默认显示效果，整段向后缩进。

cite属性，表明引用的来源，一般为引用的网址URL
eg：

⑥预格式标签：<pre></pre>

与p标签不同的是，pre标签会保留代码中的空格和回车。在网页直接显示。
最常用的作用，是在网页中显示代码段，保留代码段格式。

基于布局的块级标签

⑦有序列表ol (order list)

<ol>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ol>

⑧无序列表ul (unorder list)

<ul>
<li>列表第一项</li>
<li>列表第二项</li>
<li>列表第三项</li>
<li>列表第四项</li>
</ul>

⑨定义描述列表

定义列表包含两部分：
<dt></dt>:定义列表的标题，标题定格显示，一般一个定义列表只有一个标题。
<dd></dd>:定义列表的描述项，相对于标题向后缩进显示，一个列表可以有多个描述项。

一般情况下，标题dt只有一项，描述项dd可以有N多项。
浏览器显示时，标题格式会显示，显示缩进。
eg：

<dl>
<dt>定义列表的标题</dt>
<dd>定义列表的描述项1</dd>
<dd>定义列表的描述项2</dd>
<dd>定义列表的描述项3</dd>
</dl>

⑩图片组合标签figure

包含两个部分：img 一张图片
figcaption：图片的标题，在图片的下方显示。

<figure>
<img src="img/3.jpg" />
<figcaption>这是图片的标题。</figcaption>
</figure>

（11）分区标签div
用于配合css使用，将网页划分为区块，可以包裹各种标签。
eg：

<div style="width:100%; height:100px; ">
<h1>我是div里面的标题</h1>
这是div里面的文字。
</div>

三、常见的行级标签

常见的行级标签

span（文本）、img（图片）、em（强调）、strong（强调）、q（短引用）、a（超链接）、
i（倾斜）、b（加粗）、small（缩小字体）

1、span（文本）：用于包裹行内的文字，常配合css使用修改文字样式。

<span style="color: red;font-size: 40px;">真帅！</span>巅峰时代

2、倾斜/加粗
em：显示倾斜
strong：显示加粗
i：倾斜
b：加粗

em strong i b区别

①em和i都能倾斜，strong和b都能加粗，但是strong和em多了一层强调的语义。可以帮助收索引擎快速抓取网站重点,而且HTML5要求开发者尽可能实现代码的语义化。
②em和strong都表示强调，而strong得强调程度要大于em，em和strong标签均可多成嵌套，表示强调程度的递增
eg：

<em>em标签，</em>
<strong>strong标签</strong>
<i>i标签</i>
<b>b标签</b>
<u>u标签</u>

3、常见引用标签

blockquote、q、cite

区别：
显示效果上：blockquote整段缩进、q加引号、cite倾斜

从功能上：blockquote用于引用一整段内容，是块级标签。

q用于引用一句话是行级标签。cite常用于引用书画作品名。

eg：

<blockquote>块引用</blockquote>
<q cite="www.jredu100.com">q标签，短引用</q>
<cite>cite引用</cite>

small（缩小字体）：small标签可以多层嵌套，表示字体小一号
直到字号小到最小号为止
big（放大字体）：同small可以多层嵌套，直到字号最大为止

但是，在最新规范中，small和big标签，不能被提倡使用，提倡使用style="font-size:11px;"CSS样式替代
eg：

<small>小一号字体</small>
<big>大一号字体</big>

4、img 图片标签

（1）src属性表示图片所在的路径。
[路径的表示方式]
①网络图片地址。并不建议使用。
②可以使用图片的绝对路径。但是严禁使用绝对路径。（因为，绝对路径使用file：//协议，网页使用http：//协议，无法访问file：//协议的文件。）
file：///C:sunyang.jpg 绝对路径的写法：file：///盘符：/文件路径
③使用相对路径。推荐使用的唯一方式。
a.图片在当前文件的下一层，“文件夹名/图片名”
b.图片与当前文件夹在同一层，直接写“图片名”。
c.图片在当前文件的上一层，“../图片名”。
注意：图片必须包含在项目里面，不能推出当前项目根目录。
（2）width、height 宽度和高度属性
（3）title:鼠标指上时显示的文字
（4）alt：图片无法加载时显示的文字。省略alt，将默认显示title内容
（5）align：图片周围的文字，相对于图片的排列方式；
top文字居上 center居中 bottom文字居底

eg：

5、超链接<a></a>

（1）1.href属性：找链接跳转的地址。可以是网络连接，也可以是本地html相对路径。
（2）target属性：超链接新页面打开位置。
_slef在当前页面打开（默认）_blank在新页面打开
（3）title属性：鼠标指在超链接上显示的文字。

6、功能链接

（1）malito：给指定邮箱发送邮件。

（2）tencent:与指定qq聊天

（3）锚链接：点击超链接，可以跳转页面的指定位置(锚点)
①在页面的指定位置，定义一个锚点：

②将超链接的href属性改为“#锚点名称”

<a herf="#top">调到div上方</a>

③跳转到其他页面的锚点方式：跳转网页位置#锚点名称

7、其他标签（了解）
①<s>：删除线
eg：

<s>这是s标签中的文字</s>

②code：只是表示计算机代码。只会显示等宽字体，不会保留代码格式，需配合pre标签使用

eg：

<pre>
<code>
jsLoader({name : 'iplookup',url :'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'});
</code>
</pre>

③bdo：表示文本方向，dir="ltr" 从左往右 dir="rtl" 从右往左
eg：

④kbd:表示需要用户用输入的内容。
eg：

请输入“<kbd>Esc</kbd>”退出系统。

⑤sup：上标文本 sub：下标文本
eg：

H<sub>2</sub>O X<sup>2</sup>

⑥var：表示变量
eg：

<var>x</var>+<var>y</var>=1

⑦u:下划线
eg：

<u>这是u标签</u>

⑧mark:高亮或标记文本浏览器显示为黄色背景
eg：

<mark>哈哈哈哈哈</mark>

四、表格<table>

一、表格table

表格中一行，用tr表示；
一行中的每个单元格，用td表示；
首行的表头中每个单元格，用th表示，th默认文字会加粗、居中。

二、表格中的各种属性

1.border：给表格的每个td和整个table加边框。如果boder的值>1，则只有最外层的加粗，tb的边框不变。
border: hidden：隐藏边框。

2.cellspacing：设置单元格与单元格之间的间距。
cellspacing="0"可以设置边框之间的间距为0，但是相邻的边框不会合并，而且显示为两条线的宽度。

设置表格边框合并
可以使用css设置：style="border-collapse: collapse;
设置边框合并以后，cellspacing属性将会消失。

3.cellpadding：单元格内边距，单元格中文字与边框之间的距离。

4.width/height：宽度和高度。0

5.align：设置表格在浏览器中，居左居右。

6.bgcolor：表格的背景颜色

bordercolor：表格的边框颜色
background：表格背景图。优先级高于背景色。

三、表格的行列属性

作用于tr或者td的属性：

1.width 宽度、height 高度
2.bgcolor：背景色
当表格的属性与行列的属性发生冲突时，优先级采用近者优先的原则：table<tr<td。
3.align：设置单元格中的文字，水平对齐方式；left center right
valign：设置单元格中的文字，垂直对齐方式；top center bottom

四、表格的跨行与跨列

跨列：colspan="n"如果某个单元格n列，则单元格右侧n-1个td就不需要了。
跨行：rowspan="n"如果某个单元格行，则单元格下方n-1个td就不需要了。

表格结构化

完整的表格结构，包括：
caption：表格的标题，无论<caption>标签放在表格第几行，表格标题永远在表格正上方居中。
thead：表格的表头部分。永远在表格最上部。
tbody：表格的身体部分。在thead之下，tfoot上。
tfoot：表格的尾部永远在最下部。

表格的直列化

表格有记列，就可以在表格的最上方写几个<col/>标签，每个<col/>就对应这第几列，可以<col/>标签修改样式、添加name等属性，表示这一列的所有
tb同步修改;如果，需要对多列修改同样式，可以使用<colgroup><colgroup/>标签包裹多个<col/>.

五、form表单

1、form表单两个重要属性

action：表示，将表单提交给哪个服务器地址；
method：表单提交数据的方式，可选值get和post两种。
get和post区别
① get使用URL传递数据。所有内容在地址栏可以看见，不安全。
post的数据无法在地址栏看到，比较安全。
② get传递的数据量有限，而且只能传递纯文字内容；
post可以传递大量数据，而且可以传递图片、视频等文件。
③ get的传输速度比post快。
get传递数据的URL格式
http：//原来的地址。html?name1=value1&name2=value2
比如:http：//127.0.0.0：8020/0595.html?username=123
所以，input使用时，name属性必不可少。缺少name，将导致该输入框的数据比向后台传递。

2、input的常用属性

① type：表示当前输入框是何种类型的输入框。
② name：给输入框起别名。向后台传递时，使用name=value的形式传递。
③ value：当前input的默认值。
④ placholder：输入框的提示内容。当输入框有value时，提示内容消息。
⑤ hidden：隐藏当前输入框。可以写为hidden="hidden"，也可以省略属性值，只写<inout type="text" hidden/>
隐藏的输入框内容依然可以向后台传递。（border: hidden 隐藏边框）
⑥ disabled：禁用当前输入框。可以显示，不能使用。
被禁用的输入框内容，将不能向后台传递数据。
⑦ checked：设置默认选中的选项，可以写为checked="checked",也可以省略属性值，只写<inout type="text" checked/>

3、input的type类型

① text：普通的文本框。
② password：密码框，输入的内容，显示为小黑点。
③ radio：单选按钮。单选按钮的value不能省略，这个value需要传递到后台
单选按钮，凭借name是否相同，区分按钮是否为一组，name必须相同。
checked="checked"设置单选按钮，默认被选中。
④ checkbox：多选按钮。其他与单选按钮一样。
⑤ file：文件上传框。
acceot属性，可以限制只能上传何种类型的文件。“*”表示可以接受所有文件，"image/*"表示只能接受图片。
multiple="multiple",设置可以上传多个图片。
⑥ submit：表单提交按钮。
⑦ reset：表示重置按钮，点击将表单回复为初始状态。
⑧ image：图形提交按钮。src属性导入图片，与submit都聚有提交表单的作用。
⑨ button：显示为按钮形状，但是没有任何作用。
⑩ hidden：隐藏的输入框。与普通的输入框+hidden="hidden"的作用相同。

4.select 下拉选择区块

① select 里面的每一项，<option></option>标签表示。
② name属性，需要写到select标签上。
③ option标签如果有value属性，则向后台传递的将是value属性的值，如果没有value属性，则传递的是<option></option>标签之间的文字。
④ option 添加属性selected="selected",设置默认选中项。
⑤ select添加属性multiple="multiple",设置当前下拉控件可以多选。
⑥ option 添加属性title，表示鼠标指上后显示的文字。
⑦ select 可以使用<optgrop></optgrop>标签对选项进行分组，用label属性显示分组名。

5.textarea 文本域

① 文本域大小控制
可以用文本域属性cols="20"（宽度多少字符)rows="10"(高多少行)可以使用css样式style="width="100px"; height="100px";
可以使用css样式
style="width="100px"; height="100px";
②设置文本域大小不能拖动。
style="resize:none"
③ 文字超出区域处理：
使用style="overflow:xx;"可以显示文字超出区域的显示的方式：
overflow:hidden；超出区域的文字隐藏不显示
overflow:scroll；无论文字多少，都会显示水平垂直滚动条。
overflow:auto；自动，默认效果，文字多显示滚动条，文字少不显示滚动条。
可以使用overflow-x和overflow-y单独修改两个方向的滚动条
overflow-x:scroll;overflow-y:hidden;

【HTML5智能表单】

1.H5给我们提供了将form外的input与表单的关联方式。只需给form表单起一个id，然后给表单外面的input添加form属性，指向这个id 就可以实现表单与input的绑定；
<form id="ff"></form>
input form="ff"/>
2.H5新增了很多input的新的type类型。
range color date email url
3.H5新增的input属性：
① form属性：关联指定表单的id
② placeholder：输入框的提示内容
③ required="required":必填。
④ autofocus="autofocus"：指定输入框自动获得焦点。
⑤ autocomplete：是否开启自动提示完成功能，默认为开启状态，设置为off表示关闭，设置为on表示打开。
可以给form标签设置autocomplete，控制表单所有输入框的自动提示功能。