文章目录
一、HTML概述
1.概念
HTML（Hypertext Markup Language）即超文本标记语言。
2.HTML发展史
3.HTML特点
- HTML不需要编译，直接由浏览器执行。
- HTML文件是一个文本文件。
- HTML文件必须使用
html或者htm为文件名后缀。 - HTML大小写不敏感，HTML和html一样。
4.开发工具
- sublime
- vs code
二、基础语法
1.HTML基本结构
包含头部信息、网页内容。
<html>
<head>
<title>标题</title>
</head>
<body>
网页主体内容
</body>
</html>
2.HTML标签
语法：<标签名></标签名> 例如：<html>….</html>
规范：
<和>括起来- 一般成对出现，分开始标签和结束标签结束标签比开始标签多了一个
/ - 单标签：没有结束标签
<hr/>
3.HTML元素
从开始标签到结束标签的所有代码，称为HTML元素。
<p>这是一段文字</p>
4.HTML属性
语法：<标签名 属性名1=“值” 属性名2=“值”…>……</标签名>
5.注释
- 语法：
<!--这里是注释--> - 注释在网页中不显示。
6.DOCTYPE文档类型声明
<!DOCTYPE>声明必须放在HTML文档第一行。<!DOCTYPE>声明不是HTML标签。
7.网页编码设置
当网页显示出现乱码时，在<head></head>标签之间添加：
<meta http-equiv=“Content-Type” content=“text/html” charset=“utf-8”/>
注：utf-8、GB2312、gbk等编码
三、常用标签
1.文字和段落标签
-
标题标签：
<h1></h1>~<h6></h6>(headline)扫描二维码关注公众号，回复： 11086498 查看本文章
-
段落标签:
<p></p>(paragraph) 对齐属性：align
-
换行标签:
<br/>(barter rabbet)。 -
水平线:
<hr/>(Horizontal Rule)。 它的属性如下：
2.修饰标签及特殊符号
- 文字斜体:
<i> </i>(Italic)、<em></em>(emphasize) - 文字加粗：
<b></b>(bold)、<strong></strong> - 文字下标：
<sub>(subscript) - 文字上标：
<sup>(supscript) - 插入内容：
<ins>(insert) - 删除内容：
<del>(delete) - 特殊符号：
< |
< | :小于号或显示标记 |
> |
> | 大于号或显示标记 |
®(register) |
® | 已注册 |
© (copyright) |
© | 版权 |
™ |
™ | 商标 |
(Non-Breaking Space) |
Space | 不断行的空白 |
3.列表标签及应用场景
（1）无序列表:
<ul>
<li>列表项</li>
<li>列表项</li>
……
</ul>
type属性值：
disc：圆点(discrete)square：正方形circle：空心圆
（2）有序列表
<ol>
<li>列表项</li>
<li>列表项</li>
……
</ol>
type属性值：注：规定列表的项目符号类型，请使用样式设置。
1：数字1,2……a：小写字母a,b…A：大写字母A,B…i：小写罗马数字iI：大写罗马数字I
（3）定义列表
<dl> <!--definition lists-->
<dt>定义列表项</dt> <!--definition terms-->
<dd>列表项描述</dd> <!--definition description-->
<dd>列表项描述</dd>
<dt>定义列表项</dt>
<dd>列表项描述</dd>
……
</dl>
（4）列表标签应用场景
- 实际开发时，通常去掉编号，而使用图片。
- 无序列表常用于导航、文字/图片列表。有序列表常用于排行榜。自定义列表常用于带缩略图、副标题的列表。
3.图像标签
语法：
<img src=“” alt=“” …/>
img属性：
4.超链接标签
语法：Anchor
<a href=“”>内容</a>
a属性：
定义锚（同一页面）：
<a href=“#锚名1”>目录1 </a>
<a href=“#锚名2”>目录2 </a>
<a href=“…” name=“锚名1”>内容</a>
xxxxxxxxx
xxxxxxxxxxxxx
<a href=“…” name=“锚名2”>内容</a>
xxxxxxxxx
xxxxxxxxxxxxx
定义锚（不同页面）：
<a href=“网页名称#锚名”>……</a>
电子邮件链接：
<a href=“mailto:邮件地址”>……</a>
