2.HTML标签(一)

2.HTML标签(一)

标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

HTML提供了6种级别的标题.

<h1>主标题（最重要的）
<h2>（次重要的）
<h3>其次，以此类推。
搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

html段落

<p>段落一</p>
<p>段落二</p>
<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开

html换行

line1<br/>
line2<br/>
代码中成段的文字，直接在代码中回车换行，
在渲染成网页时候不认这种换行，如果真想换行，
可以在代码的段落中插入<br />来强制换行

html字符实体

&lt; ==> <
&gt; ==> >
&quot; ==> "
&copy;  ==> ©
&reg; ==> ®
&nbsp; ==> ' '空格

在网页上想显示 “<” 和 “>” 会误认为是标签，所以需要使用它们的字符实体。 代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格， 在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体。

html块

div标签 块元素，表示一块内容，没有具体的语义。

<div>vid</div>

span标签 行内元素，表示一行中的一小段内容，没有具体的语义。

<span>naps</span>

含样式和语义的标签

em标签 行内元素，表示语气中的强调词(文字变成斜体)

<em>me</em>

i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇(文字变成斜体)

<i>i</i>

b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名(字体加粗)

<b>b</b>

strong标签 行内元素，表示非常重要的内容 (字体加粗)

<strong>gnorts</strong>

上角标

<sup></sup>

下角标

<sub></sub>

水平线

<hr/>

语义化的标签

语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。

比如：

• h1标签是表示标题
• p标签是表示段落
• ul、ol、li标签是表示列表
• a标签表示链接
• dl、dt、dd表示定义列表等

html图像

<img src="images/apple.jpg" alt="苹果" width="100px" height="100px" title="苹果" />

标签可以在网页上插入一张图片.

• src: 要显示图片的路径.
• alt: 图片没有加载成功时的提示,以及对搜索引擎和盲人读屏软件的支持.
• title: 鼠标悬浮时的提示信息.
• width: 图片的宽
• height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

绝对路径和相对路径

• 绝对地址：相对于磁盘的位置去定位文件的地址
• 相对地址：相对于引用文件本身去定位被引用的文件地址
• "./"表示当前文件所在的目录
• "../"表示当前文件所在目录的上一级目录

html链接

<a href="http://www.baidu.com" target="_black">跳转到百度</a>

href:定义跳转的地址. target: _blank在新的窗口打开链接 _self默认值，在当前窗口打开链接

页面内滚动跳转

<a href="#mao">跳转到111</a>
<br />
...
<div id="mao">111</div>