简介
html (Hyper Text Markup Language ) 中文译为“超文本标记语言”，主要是通过 html 标记对网页中的文本，图片，声音等内容进行描述
基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
| 基本的标签 | 描述 |
|---|---|
| 定义文档类型 | |
| <html> | 定义 html 文档 |
| <body> | 定义 body 文档 |
| <h1> to <h6> | 定义 标题 1 到 标题 6 |
| <p> | 定义段落 |
| <br> | 插入一个换行 |
| <hr> | 定义水平线 |
| <!–…--> | 定义注释 |
<html> 标记
- <html>
- 称为根标记，用于告知浏览器其自身是一个 HTML 文档， 标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。
- <html lang=“en”>
- 向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english
- 这个主要是给搜索引擎看的，搜索引擎不会去判断该站点是中文站还是英文站，所以这句话就是让搜索引擎知道，你的站点是中文站，对html页面本身不会有影响
标记
<head>标记用于定义 HTML 文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记。
一个 HTML 文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
标记
<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。
一个HTML文档只能含有一对<title>标记，<title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：
<title>网页名称</title>
标记
<body>标记用于定义 HTML 文档所要显示的内容，也称为主体标记。
浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。
一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后.
标记分类
单表记
- 分割线
- <hr />
- 换行标签
- <br />
- 图片标签
-
- 属性
- src 图像的路径
- alt 文本描述
- width 宽带 单位 px
- height 高度 单位 px
- titil 悬停时文本
-
双标记
- 段落标签
- <p>段类文本</p>
- 标题标签
- 标题文本
- 其中 n 为 1，2，3，4，5，6，逐级递减
- 字体标签
- <font>文本内容</font>
<font color = "red">hello world </font>
- 引用外部资源文件
<link rel="stylesheet" href=" ./css/test.css">
- 超链接
<a href = "跳转目标" target = "窗口跳转方式" > 文本或图像 </a>- 空连接
- href = “#”
- 可以对图片，文本，视频等添加超链接。
- 锚点链接
- 通过创建锚点链接，用户能够快速定位到目标内容。
- 创建锚点链接分为两步：
- 使用
<a href=”#id名“>链接文本</a>创建链接文本。 - 使用相应的id名标注跳转目标的位置。
- 使用
文本标记化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示。
- 加粗
- <b>文本内容</b>
- <strong>文本内容</strong>
- 倾斜
- <i>文本内容</i>
- <em>文本内容</em>
- 删除线
- <s>文本内容</s>
- <del>文本内容</del>
- 下划线
- <u>文本内容</u>
- <ins>文本内容</ins>
- 上标标签
- X<sup>2
- 下标标签
- log<sub>2</sub>3
- 保留原格式文本
- <pre> hello world</pre>
图像标记
HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记<img />以及和他相关的属性
- 其基本语法格式如下
<img src="图像URL">- 该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。
- <img />标记属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
特殊字符
| 特殊字符 | 符号 | 字符 |
|---|---|---|
| 空格符 | | |
| < | 小于符 | < |
| > | 大于符 | > |
| & | 地址符 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
列表
- 无序列表
/*type 值有三个，一个 disc（默认值） square（方块） circle（空心圆）*/ <ul type="disic"> <li></li> <li></li> <li></li> </ul>- 只能在 li 标签放其他标签
- 有序列表
/* value1表示有序列表项目符号的类型, value2表示项目开始的数值. start是编号开始的数字，如start=2则编号从2开始，如果从1开始可以省 略，或是在<li>标签中设定value＝"n"改变列表行项目的特定编号，例如 <li value="7">。type=用于编号的数字,字母等的类型，如type=a，则编 号用英文字母。使用这些属性，把它们放在<ol>或<li>的的初始标签中。 */ <ol type=value1 start=value2> <li></li> <li></li> <li></li> </ol>- 只能在 li 标签放其他标签
- 自定义列表
<dl> <dt>你在干嘛</dt> <dd>吃饭</dd> <dd>洗澡</dd> <dt>你要吃饭？</dt> <dd>不吃</dd> <dd>你自己吃</dd> </dl>
1666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
