HTML(HyperText Markup Language)
前言
HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它由一系列的标签组成，这些标签用于定义网页的结构、样式和内容。HTML标签包括开标签和闭标签，它们之间用于包裹网页中的内容。
TML定义了文本、图像、链接、表格等元素的语义标签，这些标签描述了元素的含义和作用，使得浏览器能够正确地解释和渲染网页。同时，HTML也支持添加样式和脚本，使得网页更加丰富和交互。
WEB前端：HTML+CSS+JavaScript
HTML：结构标准，超文本标记语言，负责通过标签来表达网页的页面结构。
css：外观标准，层叠样式表标记语言，负责通过属性标记来表达网页的外观效果。
有什么不懂的可以评论下来，有哪些地方不足的尽管提，实战代码少了什么的，后面会慢慢跟新深入的，先跟新爬虫，因为博主也在学习一起加油！
HTMl
1. 什么是HTML？
超文本标记语言
(1) 标签 也叫做 标记
(2) html是由标签/标记 和内容组成的
(3) 标签 是由 标签名称 和属性组成的
实例：
<人 肤色=“黄色” 外貌="很帅"></人>
不懂的可以去 https://developer.mozilla.org/ 这个网站看这是人家定义好的 直接搜索
2. HTML的主体标签
实例
<!DOCTYPE html> #H5的头 声明文档类型 为html
<html lang="en">
<head>
<title>标题内容</title>
<meta charset="UTF-8"> #设置字符集
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
放html的主体标签
</body>
</html>
- html:文件是网页，浏览器加载网页，就可以浏览
- head:头部分，网页总体信息
+ title:网页标题
+ meta：网页主体信息，会根据name(author/description/keywords)
+ link:引入外部文件
+ style：写入CSS
+ script：写入JS
- body:身体部分，网页内容
3. HTML的标签
1. 标签分为：单标签/单标记
如：\<br /> /\<br >
双标签/双标记
如: \<p>\</p>
2. 文本标签
1. <div></div> 块标签 作用是设定字、画、表格等的摆放位置
2. <p></p> 段落标签 自成一段 会将上下的文字 和它保持一定的距离
3. <h1>-</h6> 标题标签 字体加粗 自占一行
注意： 建议一个页面h1只能出现一次
<div>
<h1>我是一级标题啊</h1>
<h2>我是二级标题啊</h2>
<h3>我是三级标题啊</h3>
<h4>我是四级标题啊</h4>
<h5>我是五级标题啊</h5>
<h6>我是六级标题啊</h6>
<p>我是段落啊</p>
</div>3. 图片标签
<img> 在网页中插入一张图片
属性：
+ src： 图片名及url地址 (必须属性)
+ alt: 图片加载失败时的提示信息
+ title：文字提示属性
+ width：图片宽度
+ height：图片高度
实例:
<img src="图片地址" title="文字提示" alt="图片加载失败显示得信息" width="宽" height="高" border="边框" />
<img src="" alt="" title="" width="" height="" border="">注意：
如果宽和高 只给一个 那么为等比缩放 如果俩个都给 那么会按照 你所给的宽和高来显示
4. 路径
1. 相对路径
+ ./ 当前 (兄弟)
+ ../ 上一级 (父亲)
2. 绝对路径
+ 一个固定得链接地址(如域名)
+ 从根磁盘 一直到你的文件得路径
5. 超链接
<a href="链接地址" title="提示信息" target="打开方式">点击显示得内容</a>
属性：
href必须，指的是链接跳转地址
target:
_blank 新建窗口得形式来打开
_self 本窗口来打开(默认)
title：文字提示属性（详情）
锚链接(直接跳转到当前页的文章1)
<a href="#essay">文章1</a>
<h3 id="essay">
文章1
<p >HTML定义了文本、图像、链接、表格等元素的语义。</p>
</h3>6. 列表
1. 无序列表
<ul>
<li></li>
</ul>
属性：
type 显示得类型
square 方形显示
disc 默认圆点
circle 空心圆
2. 有序列表
<ol>
<li></li>
</ol>
属性
type
a表示小写英文字母编号A表示大写英文字母编号i表示小写罗马数字编号I表示大写罗马数字编号1表示数字编号（默认）编号类型适用于整个列表，除非在<ol>元素的 <li> 元素中使用不同的 type 属性。
start 起始值
3. 自定义列表
<dl>
<dt>列表头</dt>
<dd>列表内容</dd>
</dl>
7. HTML注释
多行注释：<!--注释的内容-->
注释的作用：
1. 代码的调试
2. 解释说明
4. iframe
1、定义和用法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
2、使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<iframe src="【竖屏纯享】六分钟美女集锦挑你喜欢_哔哩哔哩_bilibili"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>
5. table表格
1、属性：
+ width 宽
+ height 高
+ border 边框
+ rowspan合并行
+ colspan合并列
2、标签：
caption 表格标题
tr 行标签
th 列头标签
td 列标签
实例：
<table>
<caption>我是表格的标题</caption>
<tr>
<th>我是表头</th>
<th>我是表头</th>
<th>我是表头</th>
</tr>
<tr>
<td>我是单元格</td>
<td>我是单元格</td>
<td>我是单元格</td>
</tr>
</table>
6. form表单
标签： <form></form>
1、 form属性
action 提交的地址
method 提交的方式
get
(1) 默认不写 为get传参 url地址栏可见
(2) 长度受限制 （IE浏览器2k火狐8k）
(3) 相对不安全
post
(1) url地址栏不可见 长度默认不受限制
(2) 相对安全
2、input 标签
<input> 表单项标签input定义输入字段，用户可在其中输入数据。在 HTML 5 中，type 属性有很多新的值。
具体在下面有详解：
如：
<input type="text" name="username">3、 select 标签创建下拉列表。
属性：
+ name属性:定义名称,用于存储下拉值的
内嵌标签：
<option> 下拉选择项标签,用于嵌入到 <select> 标签中使用的;
属性：
+ value属性:下拉项的值
+ selected属性:默认下拉指定项.
4、 textarea 多行的文本输入区域
属性：
+ \ name :定义名称,用于存储文本区域中的值。
+ cols ：规定文本区内可见的列数。
+ rows ：规定文本区内可见的行数。
5、input 标签
type属性:表示表单项的类型:
值如下:
+ text:单行文本框
+ password:密码输入框
+ checkbox:多选框 注意要提供value值
+ radio:单选框 注意要提供value值
+ file:文件上传选择框
+ button:普通按钮
+ submit:提交按钮
+ reset:重置按钮, 还原到开始(第一次打开时)的效果
7. HTML中HEAD头部设置
设置网页编码：
<meta charset="utf-8"/>
网页标题：
<title>本网页标题</title>
导入CSS文件：
<link type="text/css" rel="stylesheet" href=".css"/>
CSS代码：
<style type="text/css">嵌入css样式代码</style>
JS文件或代码：
<script>......</script>
CSS
1. 什么是css？
层叠样式表
+ 命名规则：
使用字母、数字或下划线和减号构成，不要以数字开头
+ 格式：
选择器{属性:值;属性:值;属性:值;....}
其中选择器也叫选择符
+ CSS中注释
/* ... */2. 使用css样式（html中嵌入css的方式）
1、内联方式（行内样式）
就是在HTML的标签中使用style属性来设置css样式
格式：
<html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
<div style="float:left;">雏田喜欢鸣人</div>特点：仅作用于本标签
2、内部方式（内嵌样式）
就是在head标签中使用`<style type="text/css">....</style>`标签来设置css样式
格式：
<style type="text/css">
....css样式代码
</style>
<style type="text/css">
body{
background-color:skyblue;
}
.f{
text-indent:30px;
text-align:left;
line-height:25px;
position:relative;
top:10px;
left:10px;
width:1600px;
height:140px;
background-color:lightyellow;
box-shadow:6px 6px 6px 6px rgba(85, 0, 255, 0.7);
}
</style>**特点：**作用于当前整个页面
3、外部导入方式（外部链入）
+ （推荐）就是在head标签中使用`<link/>`标签导入一个css文件，在作用于本页面，实现css样式设置
格式：
Css <link href="文件名.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="../谊/t.css">+ 还可以使用import在style标签中导入css文件。
特点：作用于整个网站
3. css中的选择符
1、html选择符（标签选择器）
就是把html标签作为选择符使用
如 p{....} 网页中所有p标签采用此样式
<style>
p{
}
</style>h2{....} 网页中所有h2标签采用此样式
2、class类选择符 (使用点.将自定义名（类名）来定义的选择符)（类选择器P）
定义： .类名{样式....} 匿名类
其他选择符名.类名{样式....}
使用：<html标签 class="类名">...</html标签>
.mc{color:blue;} /* 凡是class属性值为mc的都采用此样式 */
p .ps{color:green;} /*只有p标签中class属性值为ps的才采用此样式*/
注意：类选择符可以在网页中重复使用
3、Id选择符(ID选择器)
定义： #id名{样式.....}
使用：<html标签 id="id名">...</html标签>
注意：id选择符只在网页中使用一次
选择符的优先级：从大到小 [ID选择符]->[class选择符]->[html选择符]->[html属性]
4、关联选择符（包含选择符）
格式： 选择符1 选择符2 选择符3 ...{样式....}
例如： table a{....} /\*table标签里的a标签才采用此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采用此样式*/
5、组合选择符（选择符组）
格式： 选择符1,选择符2,选择符3 ...{样式....}
h3,h4,h5{color:green;} /*h3、h4和h5都采用此样式*/
4. css中的选择器
1.关系选择器：
div>p 选择所有作为div元素的子元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后面的所有兄弟元素p
2. 属性选择器：
[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
