离线帮助文档下载 微信公众号：日常分享菌
目录
# HTML
前述
HTML是一种超文本标记语言，是一种用来描述网页的一种语言。
HTML不是编程语言，是标记语言
语法规范
1. HTML标签是由尖括号包围的关键字，如 <html>
2. HTML标签通常是成对存在的，如 <html>和</html>,称之为双标签，第一个标签是开始标签，第二个是结束标签
3.存在特殊的标签是单标签，如<br/>
标签的关系
包含关系和并列关系
注释
<!–注释语句–>
1. 文档类型声明标签
< !DOCTPYE html> 告诉浏览器使用HTML5版本来显示网页
< !DOCTPYE html>必须位于文档的最前面的位置，处于<html>标签之前
2. lang语言 charset字符集
<html long=“zh-CN”>
用来定义当前文档显示的语言(此处定义为中文网站)
1. en定义语言为英文
2. zh-CN定义语言为中文
<meta charset=“UTF-8” />
charset属性用来规定HTML文档应使用“UTF-8”来编码
不写易引起乱码
3. 基本结构标签
4. 标题标签(双标签)
<h1>~<h6> 作为标题使用，依据重要性递减
使网页更有语义化，层次分明
- 加了标题标签的文字会被加粗，字号也会改变
- 一个标题独占一行
5. 段落标签(双标签)
<p>我是一个段落标签</p>
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间保持有空隙
6. 换行标签(单标签)
<br/>： 强制换行
该标签只是简单的开始一行，和段落不一样，段落之间会插入一些垂直的间距
7. 文本格式化标签(双标签)
突出重要性，可为文字设置粗体，斜体，下划线效果
加粗： <strong> 加粗文本</strong>
倾斜： <em> 倾斜文本</em>
删划线: <del> 删除线文本</del>
下划线： <ins> 下划线文本文本</ins>
8. 盒子标签(双标签)
<div></div>和<span> </span>都是没有语义，用来装内容的
- <div>标签用来布局，一行只能放一个<div>.可理解为大盒子
- <span>标签用来布局，一行可以有多个<span>.可理解为小盒子
9. 图像标签(单标签)和路径
<img> 标签用于定义HTML页面中的图像
<img src=“图像URL”/>
| 标签 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性，用于指定图像文件的路径和文件名 |
| alt | 文本 | 替换文本，图像不能显示时显示的文本 |
| title | 文本 | 提示文本，鼠标放到图像上时显示的文本 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像边框的粗细 |
- 图像标签可以拥有多个属性，必须写在标签名的后边
- 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
相对路径：以引用文件所在位置为参考基础，同一级、下一级和上一级是图片相对于HTML页面的位置
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件和HTML文件在同一级，如<img src=“图像名.文件格式” /> | |
| 下一级路径 | ./ | 图像文件处于HTML文件的下一级，如<img src=“文件夹名/图像名.文件格式” /> |
| 上一级路径 | …/ | 图像文件夹处于HTML文件的上一级，如<img src="…/图像名.文件格式" /> |
绝对路径：目录下的位置，直接到达目标位置，通常是从盘符开始的路径，如 "D:\mycode\Web\MyWebsite\合照.gif" 或 "完整的网页地址"
10.超链接标签(双标签)
<a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的URL地址，(必须属性)当为标签应用herf属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，_self 为默认值(在本窗口打开)，_black 在新窗口打开 |
链接分类：
- 外部链接，必须以http://开头
如 :<a href=“http://www.baidu.com”>百度</a> - 内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可 如<a href=“index.html” />首页</a>
- 空连接：没有确定链接目标时，<a href="#">页面</a>
- 下载链接：如果href里面的地址是一个文件或压缩包，会下载这个文件，如文本，图像，表格，音频，视频
<a herf=“路径/文件名.文件格式” />下载文件</a> - 锚点链接链：点击连接后可快速定位到页面的特定位置
①在链接文本的href属性中，设置属性值为 #名字 的形式 如 <a href="#One" />点击跳转</a>
②找到目标位置标签，添加 id 属性等于刚设置的名字
如<h3 id=“One”>目标位置</h3>
11.表格标签(双标签)
<table>定义表格<\table>
<tr>定义表格中的行，必须嵌套在table标签中</tr>
<td>定义表格中的单元格，必须嵌套在tr标签标签中</td>
<th>表头标签</th>
位于表格的第一行或第一列，表头单元格里的文本内容加粗居中显示
表格结构标签
<thead>表格的头部区域,内部必须具有tr标签</thead>
<tbody>表格的主体区域</tbody>
合并单元格
跨行合并 rowspan=“合并单元格的个数”
最上侧单元格为目标单元格，合并代码写于此
跨列合并 colspan=“合并单元格的个数”
最左侧单元格为目标单元格，合并代码写于此
12.列表标签(双标签)
无序列表
有序列表
自定义列表
13.表单标签(双标签)
用来收集用户信息
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
