目录
- HTML
- 简介
- 定义
- HTML元素
- 元素的属性：
- HTML标签
- HTML 标签分类
- 分类1
- 分类2
- HTML文档结构
- 文档结构剖析
- 如何注释
- HTML标签
- head内常见的标签
- body内常见的标签
- 标题标签
- 段落标签
- 字体相关标签
- 换行、水平分割线标签
- 列表标签
- 链接标签
- 图片标签
- 表格标签
- HTML特殊符号
- 布局标签
- 标签的两大重要属性
- 简介
HTML
简介
HTML （Hypertext Markup Language） 是用于构建网页及其内容的代码。例如，内容可以在一组段落、项目符号列表或使用图像和数据表中进行结构化； 通俗的理解为：HTML就是构造网页的骨架；
定义
HTML 是一种定义内容结构的标记语言。HTML由一系列元素组成，您可以使用这些元素来包含或包装内容的不同部分，以使其以某种方式显示或以某种方式执行。封闭的标签可以使单词或图像超链接到其他位置，可以斜体化单词，可以使字体变大或变小，等等；
例如，以以下内容行为例：
代码语言：javascript复制My cat is very grumpy如果我们希望该行独立存在，我们可以通过将其括在段落标记中来指定它是一个段落：
代码语言：javascript复制<p>My cat is very grumpy</p>HTML元素
我们元素的主要部分如下：
- 开始标记（Opening tag）：它由元素的名称（在本例中为 p）组成，该名称括在左尖括号和右尖括号中。这表示元素开始或开始生效的位置 — 在本例中为段落开始的位置。
- 结束标记（Closing tag）：这与开始标记相同，只是它在元素名称前包含正斜杠。这表示元素的结束位置 — 在本例中为段落结束的位置。未能添加结束标记是标准的初学者错误之一，可能会导致奇怪的结果。
- 内容：这是元素的内容，在本例中，它只是文本。
- 元素：开始标记、结束标记和内容共同构成了元素。
元素的属性：
属性包含有关元素的额外信息，如果不希望这些元素显示在实际内容中。此处是属性名称，并且是属性值。该属性允许您为元素提供一个非唯一标识符，该标识符可用于使用样式信息和其他内容将其作为目标（以及具有相同值的任何其他元素）class``editor-note``class``class
- 属性应始终具有以下内容：
它与元素名称（或上一个属性，如果元素已具有一个或多个属性）之间的空格。
属性名称后跟等号。
由左引号和右引号括起来的属性值。注意：不包含 ASCII 空格（或任何字符）的简单属性值可以保持不加引号，但建议您引用所有属性值，因为这会使代码更加一致和易于理解。
"'=<>
HTML标签
在HTML中，标签用于创建元素；
HTML 元素的名称是尖括号（如段落）中使用的名称。请注意，结束标记的名称前面有一个斜杠字符 ，并且在空元素中，结束标记既不是必需的，也不是允许的。如果未提及属性，则在每种情况下都使用默认值；
注意! 元素和标签不是一回事。标签在源代码中开始或结束元素，而元素是DOM的一部分DOM是用于在浏览器中显示页面的文档模型；
HTML 标签分类
分类1
- 双标签：通俗理解为有头有尾的；
<p></p>
<a></a>- 自闭合标签：单标签
<img/>分类2
块级别标签：在页面内以块的形式展现，每一个标签都出现在新的一行，占用全部宽度；
代码语言：javascript复制<div></div>
<h1></h1>
<p></p> 行内标签：通常在块级元素内，不会导致文本换行，只占必要的部分宽度
代码语言：javascript复制<a></a>
<u></u>
<i></i>
<s></s>
<b></b>
<img>
<em></em>
<strong></strong>HTML文档结构
代码语言：javascript复制主题结构
<html>
<head>编写给浏览器查看的内容</head>
<body>编写展示给用户查看的内容</body>
</html>代码语言：javascript复制自建html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
文档结构剖析
<!DOCTYPE html>： 解释文档类型，必须写的序言；<html></html>：此元素包装整个页面上的所有内容，根元素；<head></head>：此元素充当要包含在 HTML 页面上的所有内容的容器，是编写给浏览器查看的内容；<meta charset="utf-8">：设置字符集<title></title>：页面的标题，即在加载页面的浏览器选项卡中显示的标题；<body></body>：Web 用户访问页面时向他们显示的所有内容，编写给用户查看的内容；
如何注释
代码语言：javascript复制方式一：
1.单行注释
<!--单行注释内容-->
2.多行注释
<!--
多行注释内容1
多行注释内容2
-->方式二：
- 快捷键：
Ctrl ?
注意！ 编写HTML标签的时候 不需要自己写大括号小括号 只需要写标签名称 tab键即可自动补全(所有支持编写html文件的工具内部自带的插件语法功能)
HTML标签
head内常见的标签
标签 | 说明 |
|---|---|
<title>内容</title> | 定义网页标题 |
<style></style> | 内部支持css代码 |
<script></script> | 内部支持编写js代码，还可以通过src属性导入外部js文件 |
<link> | 通过href属性引入外部的css文件 |
meta | 定义网页源信息keywords关键字搜索description网页描述信息 |
代码语言：javascript复制注意，在html文件中 可以编写html和css以及js，但是实际工作中三者其实是分开存放的 这样有利于后期维护和扩展；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 网页标题 -->
<title>Hammer Title</title>
<!-- 样式:将h1标题修改颜色 -->
<style>
h1 {
color: cyan;
}
</style>
<!-- js动态效果:验证 -->
<script>
prompt('hammer')
</script>
<!-- 引入外部js -->
<script src="第一个js文件.js"></script>
<link rel="stylesheet" href="第一个css文件.css">
<!-- 网页源:refresh-刷新,2秒后跳转到百度 -->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!-- 关键字查询:相当于热词搜索 -->
<meta name="keywords" content="Hammer's html">
<!-- 网页描述性信息 -->
<meta name="description" content="hammer html">
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
body内常见的标签
标题标签
代码语言：javascript复制有
h1~h6级别标签，一共六个级别标签<h1></h1>
<body>
<!-- 4 heading levels: -->
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
</body>
段落标签
代码语言：javascript复制代表段落，块级标签
<body>
<p>This is a single paragraph</p>
</body>
字体相关标签
标签 | 说明 |
|---|---|
<b></b> | 字体加粗 |
<i></i> | 斜体 |
<u></u> | 下划线 |
<s></s> | 删除线 |
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>注意：有时候相同的样式 可能有多种标签可以实现
换行、水平分割线标签
<br>：换行<hr>：水平分割线
列表标签
网络上的很多内容都是列表，HTML有特殊的元素。标记列表始终包含至少 2 个元素。最常见的列表类型是有序列表和无序列表：
- 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个
<ul>元素包围。 - 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个
<ol>元素包围。
代码语言：javascript复制无序列表
<body>
<p>At Mozilla, we’re a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together ... </p>
</body>
<!--快速生成列表标签-->
ul>li{$$$}*10
代码语言：javascript复制有序列表
<ol>
<li>Hammer</li>
<li>hammer</li>
<li>ze</li>
</ol>
代码语言：javascript复制标题列表（了解）
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>链接标签
代码语言：javascript复制链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的标签：
<a></a>是 "anchor" （锚）的缩写；a标签的两种用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--通过href属性指定网址(URL)点击跳转-->
<a href="http://www.baidu.com">百度</a>
<!--锚点-->
<!--通过跟id值来跳转-->
<a href="#d2" id="d1">锚点1</a>
<div style="background-color: cyan;height:1000px"></div>
<a href="#d1" id="d2">锚点2</a>
<div style="background-color: #aaa1a4;height:1000px"></div>
</body>
</html>代码语言：javascript复制链接标签跳转的方式
1.当前页面跳转 target="_self" (默认)
2.新建页面跳转 target="_blank"
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>图片标签
<img>src属性是必须的，它包含了你想嵌入的图片的文件路径；alt属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时；title：属性写文本用于鼠标悬浮在图片上之后提示的文本信息；height、width属性写像素，用于调整图片的尺寸，需要注意调整的时候 修改一个另外一个自动等比例缩放，如果同事调整两个 那么可能会造成图片的失真；
<img class="fit-picture"
src="/media/cc0-images/grapefruit-slice-332-332.jpg"
alt="Grapefruit slice atop a pile of other slices">表格标签
表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值 。比如说，某个人和他的年龄，一天或是一周，当地游泳池的时间表 ；
- 标签：
<table></table><thead></thead>：表头<tbody></tbody>：表单<tr></tr>：表示一行<th></th>：在表头的字段名称<td></td>：普通的单元格数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hammer</td>
<td>18</td>
<td>male</td>
</tr>
</tbody>
</table>
</body>
</html>属性 | 说明 |
|---|---|
border | 表格边框 |
cellpadding | 内边距 |
cellspacing | 外边距 |
width | 像素 百分比（最好通过css来设置长宽） |
rowspan | 单元格竖跨多少行 |
colspan | 单元格横跨多少列（即合并单元格） |
<body>
<table border="1" cellpadding="10px" cellspacing="5px" >
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hammer</td>
<td>18</td>
<td>male</td>
</tr>
</tbody>
</table>
</body>
HTML特殊符号
符号 | 说明 |
|---|---|
| 空格(牛逼的sp) |
> | 大于号 |
< | 小于号 |
& | &符号 |
¥ | 羊角符￥ |
© | 版权符 |
® | 注册商标 |
<body>
<!--空格-->
<p>特殊符号1 特殊符号2</p>
<hr>
<!--大于-->
<p>a>b</p>
<!--小于-->
<p>a<b</p>
<!--&符号-->
<p>&</p>
<!--羊角符-->
<p>¥100000</p>
<!--版权符号-->
<p>©版权</p>
<!--注册商标-->
<p>®</p>
</body>
布局标签
<div></div>：用来占位布局，属于块级标签，可以无限制的嵌套块级标签或者行内标签；
<span></span>：行内标签；
注意：p标签虽然是块级别标签，但是不能嵌套块级标签；
标签的两大重要属性
- id属性：相当于个体查找
- class属性：群体查找
类似于python面向对象中的类的继承
可以将多个标签划为一类
<h1 class='c1'></h1>
<p class='c1'></p>
并且一个标签可以有很多类
<h1 class='c1 c2 c3'></h1>
<p class='c1 c8 c9'></p>【待续】
