HTML语法新手上路（最全详解）

1.注释

html中只有一种注释，即 <!--注释内容-->

记录编程思路，解释说明业务功能

2.元素

单标签元素，仅有一个标签

<meta /> 、<img />、<br/>

 

双标签元素，由开始标签和结束标签组成

<div></div>
<p></p>

标签可以进行嵌套使用，即可以将一个标签写入到另外一个标签内。建议镜面嵌套。

推荐：镜面嵌套

<p>段落<strong>加强</strong>标签</p>

以下是非法的：交叉嵌套

<p>非法<strong>交叉</p>嵌套</strong>

4.属性

HTML标签都拥有自己的属性，属性应该出现在元素的开始标签内部，属性名和属性值通过"="分割，属性与属性之间通过空格分割，属性名不区分大小写，属性值区分大小写并且属性值可以使用双引号引起来。

核心属性：绝大多数标签都具有的属性。title、id、class、style。

title：描述信息

<div title="div1">div1</div>

id：唯一标识

<div id="div1">div1</div>

class：标识一类元素

<div class="box1">box1</div>

style 样式

<div style="color: red;">我是一个div</div>

5.其他

空白 在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白 实体 在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities)，实体以&符开始，以;结尾。以下是常见的实体

显示结果	描述	实体名称	实体编号
	空格	&nbsp	&#160
<	小于号	&lt	&#60
>	大于号	&gt	&#62
&	和号	&amp	&#38
"	引号	&quot	&#34
'	撇号	&apos (IE不支持)	&#39
￠	分（cent）	&cent	&#162
£	镑（pound）	&pound	&#163
¥	元（yen）	&yen	&#165
€	欧元（euro）	&euro	&#8364
§	小节	&sect	&#167
©	版权（copyright）	&copy	&#169
®	注册商标	&reg	&#174
™	商标	&trade	&#8482
×	乘号	&times	&#215
÷	除号	&divide	&#247

6.块级元素

作用：搭建网页结构

特点：

• 独占一行空间

• 默认宽度为100%

• 高度由子元素或内容决定

• 可以通过css指定其宽度

元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...

建议：不要将块级元素嵌套在行内元素中。

元素	作用	已有CSS效果
div	无意义的块元素
h1~h3	标题标题	margin font-size font-weight
p	段落	margin
ul,li	无序列表	margin padding list-style
ol,li	有序列表	margin padding list-style
dl,dt,dd	定义列表	dl - margin dd - margin
html
body		margin
header	H5新增的语义化标签<br>(样式与div类似)	<div class="header"></div>
footer		<div class="footer"></div>
nav		<div class="nav"></div>
article		<div class="article"></div>
section		<div class="section"></div>
aside		<div class="aside"></div>
address		<div class="address"></div>

7.行内元素

作用：在结构中填充网页内容

特点：

• 与其他行内元素共享一行空间

• 宽高由自身决定

• 由于不用来搭建网页结构，所以也无需通过css指定其宽度

• 行内元素中不可以嵌套块元素

元素：span、a、img、strong、b、i、em、sub、sup...