前端开发 之 HTML基础（二）

文章简要：

• HTML语言的语法
• HTML语言标题字体
• 物理字体及字符实体
• 列表的应用
• 超链接和图像

HTML语言的语法

标记

标记在表示HTML文档内容结构和含义的时候，通常有两种方式，我们分别称单标记和双标记，或者叫空标记和普通标记。
双标记（普通标记）：
<标记名称 属性1名="属性1值" 属性2名="属性2值" ……></标记名称>
单标记（空标记）：
<标记名/>

说明：
1）写在尖角号里的第一个单词，叫做标记，也叫做标签，也称作元素；
2）标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在双引号内
3）一个标记可以有多个属性，属性和属性之间用空格隔开，属性与属性间不分先后顺序；
4）空标记是指没有结束标签的标记，必须使用"/" 关闭。 例如：<hr />

注释

注释符：``

HTML语言标题字体

语法：<h#> </h#>
说明：
其中#可以选择1-6.
文本标题（h1-h6）

<h1>一级标题</h1>
<h2>二级标题</h2>
……
<h6>六级标题</h6>

物理字体和字符实体

物理字体

字体类型	语法	说明
斜体字	<i></i>\<em></em>	以斜体显示文本
粗体字	<b></b>\<strong></strong>	以粗体显示文本
文本下划线	<u></u>	为文本加下划线
字体换行	<br/>	空标记，设置文字换行
水平线	<hr/>	空标记，用做水平线
段落标记	<p></p>	标识一个段落（段落与段落之间有段间距）

字符实体

• 不换行空格：
• 右尖括号“>”：>
• 左尖括号“<”：<
• 备案中图标©：&copy

列表的应用

无序列表

<ul>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    ……
</ul>

有序列表

<ol>
    <li>列表项内容</li>
    <li>列表项内容</li>
    <li>列表项内容</li>
    ……
</ol>

自定义列表

<dl>
    <dt>名词</dt>
    <dd>解释</dd>
    ……
</dl>

超链接和图像

图像

语法：

![](目标文件路径及全称)

说明：

• title 的作用：鼠标悬停在图片上时显示的一个小提示，鼠标离开就没有了，HTML的绝大多数标签都支持 title 属性，title 属性就是专门做提示信息的。
• alt 的作用：alt 属性是在图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。
• 网站图片的三大格式：.jpg .png .gif。

超链接

语法

<a href="目标文件路径及全称/链接地址" title="提示文本" target="" >链接文本/图片</a>
`

说明

• href 部分中“目标文件路径及全称/链接地址”是链接页面的路径（包含文件名）
• title 属性，加入这个属性后，当鼠标移动到热点时，鼠标下方显示 title 内容
• target 属性参数定义了打开链接的目标窗口
  _blank ——在新窗口中打开链接页面（会保留原窗口）
  _self ——在当前窗体打开链接页面，此为默认值