HTML基础知识
基础知识了解
什么是网页？
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。
什么是HTML？
HTML译为超文本标记语言，用来制作网页的一种标签语言，自己有对应的标签，文件后缀为.HTML。
什么是浏览器
国际常用：
IE、谷歌Chrome、Edge、苹果Safar、欧朋OPera. 火狐。
谷歌最大，前端专用，使用的是webkit分支的Blink内核，
非常好用，属于二次开发的，借用别人的好处，出生于2008年。
浏览器中的浏览器内核
浏览器内核的作用：用来读取内容，整理信息。
什么是Web标准
是由W3C（万维网联盟）标准组成，包括结构HTML、表现CSS、行为JS三部分组成。
作用：
在使用不同的浏览器下保证网页内容正常统一展示，不乱不错。
Web标准的构成
| 标准 | 作用 | |
|---|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，主要指的是HTML | |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS | |
| 行为 | 行为是指网页模型的定义及交互的编写，主要指的是Javascript |
第一章语法规则
1. html语法规则
所有双标签存在闭合关系，及存在双标签的开头那么它必须要有结尾
闭合标签：
由开始标签和结束标签共同组成，成对出现常见的闭合标签有<div></div><p></p>、<span></span>等。标签之间的关系可以存在并列及嵌套关系。
单标签：
指没有内容的标签，在开始标签中自带闭合标识符。常见的单标签有<img/>、<hr/>、<link/>、<meta/>、<input/>、<br/>等。
所有的标签都要包裹在一对尖扣号中 “<> ”.
大部分都要标签都要成对出现，成对出现的标签称为 “双标签”： <开始标签> </结束标签>
少部分没有结束标签的称为“单标签”：< 单标签 / >
标签关系分为：包含关系（父子关系） 和 并列关系（兄弟关系）
二、 HTML文档结构基本组成与标签关系
<HTML> // 最大的标签称为“根标签” 与 "<head><tile><body>" 标签为包含关系，是父亲其他是儿子关系
<head> // 文档头部 与<HTML>是包含关系,与<body>标签是并列关系，
<tile>文档标题是我</tile> // 标题标签 与<head>标签是包含关系
</head>
<body> // 文档的主体 与<head>标签是并列关系，与<HTML>是包含关系
我是整个文档的主体
</body>
</HTML>
三、关于vscode自动生成 HTML文档结构 的说明
<!DOCTYPE html> <!--声明为HTML5文档 文档类型声明标签，告诉浏览器用那种HTML版本进行编写显示网页的-->
<!--不属于HTML标签，要写在HTML文档最最最顶端-->
<html lang="en"> <!--当前文档显示语言，告诉浏览器或搜索引擎以哪种语言展示网页-->
<head> <!--定义了HTML文档的开头部分.它们之间的内容不会在浏览器的文档窗口显示.包含了文档的元(meta)数据-->
<meta charset="UTF-8"> <!--使用charset字符集和UTF-8万国码声明编码，全国通用不会产生乱码-->
<!--设置GBK为默认编码，则你需要设置为 <meta charset="gbk">-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--告诉IE以最高级模式渲染文档-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--移动端适配-->
<title>css样式优先级</title> <!--定义了网页标题,在浏览器标题栏显示-->
</head>
<body> <!--文档的主体,与<head>标签是并列关系，与<HTML>是包含关系-->
我是整个文档的主体
</body>
</html>
四、HTML常用标签
标签的语义就是标签的含义，用来干什么的，就是让页面结构更清晰的。
1.head标签内的常用标签
<title></title> 定义网页标题
<style></style> 定义内部样式表
<script></script> 定义JS代码或引入外部JS文件
<link/> 引入外部样式表文件
<meta/> 定义网页原信息
<base/> 页面中所有链接默认的链接目标地址
- Meta标签介绍：
- 元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
- 标签位于文档的头部，不包含任何内容。
- 提供的信息是用户不可见的。
- meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性:主要用于描述wangye,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">base定义了所有链接的URL,使用 定义页面中所有链接默认的链接目标地址。
<base href="https://www.runoob.com/images/" target="_blank">第二章 标签讲解
1.标题标签
当作标题使用的，依据重要递减。 特点： 文字加粗、独占一行、从重到轻。
<h1>一级标题我最大，只能有我自己，利于搜索引擎优化 </h1>
<h2> 二级标题 </h2>
<h3> 三级标题 </h3>
<h4> 四级标题 </h4>
<h5> 五级标题 </h5>
<h6> 六级标题 </h6>2.段落标签
把文本分成若干份。 特点： 会自动换行、段与段之间有较大的空隙、每行为独占一行或多行在一起称为一段。
<p>这里写内容</p>
3.图像标签
展示图片。 特点：是单标签、其中src属性是必填属性，共6个属性，属性以 [ 键值对 ]形式：属性=“属性值” 即key=“value”
<img src="imgs/01.jpg" alt="图片未显示用我来提示" title="我是图片的标题" width="100" height="100" border="20"/>
所有属性都要写在img后面，6个属性不分先后顺序，多个属性之间用空格隔开，属性是以键值对形式：key=“value” 即：属性=“属性值 ”
属性具体细化为：
- src=“图片名称和图片路径”
- alt=“替换文本” 图像无法显示的时候使用文字代替
- title="提示文本“ 鼠标悬停在图片上显示的文字
- width=“图片宽度” 指定图片的宽度，不指定高度的时候，宽度会等比缩放，指定宽度不恰当时图片会变形，故只设置一个值即可
- height=“图片高度” 指定图片的高度，不指定款度的时候，高度会等比缩放，指定高度不恰当时图片会变形，故只设置一个值即可
- border=“图片边框粗细” 不需要加单位p x , 该属性文字会显示白色，不常用，在CSS中设置更好。
4.换行标签
强制换行 特点：单标签、 会另起一行、行与行之间的间距很紧密。
<br />
5.文本格式化标签
突出文字重要性。特点：都是双标签
<strong></strong> 加粗
<em></em> 倾斜
<del></del> 删除
<ins></ins> 下划线
6.水平线标签
一条横线贯通整个页面。 特点：单标签
<hr />
7.音频标签
播放音乐。 特点：谷歌浏览器禁用自动播放音乐，需要调出播放控件方可。
<audio src="音频路径" controls loop></audio>**
属性具体细化为：
src=“音频路径”
autoplay 自动播放，但是谷歌浏览器禁用自动播放功能需要调用controls属性，完成自动播放。
controls 调用播放控件。
loop 循环播放
当属性🟰属性值的时候，就写属性就行。例：controls=“controls”
8.视频标签
播放视频。 特点：谷歌浏览器禁用自动播放音乐，需要调出播放控件方可
<video src="视频路径" controls loop muted ></video>
属性具体细化为：
src=“视频路径”
autoplay 自动播放，但是谷歌浏览器禁用自动播放功能需要调用controls属性，完成自动播放。
controls 调用播放控件。
loop 循环播放
muted 在谷歌浏览器上自动静音播放
当属性🟰属性值的时候，就写属性就行。例：controls=“controls”
9.div标签
无语义，指的就是大盒子 布局网页的。 特点：一行只能用一个盒子，独占一行。
<div> 这里可以包含任何标签 </div>
10.span标签
无语义，指的就是小盒子 布局网页的。 特点：一行内可以有多个，横着水平显示。
<span> 这里可以包含任何标签 </span>
11.超链接标签
跳转页面的 。 特点：双标签，有2个属性 ，href为必填属性，target属性默认值为self。
<a href="跳转的目标" target="打开窗口的方式"> 跳转需要的文字内容 </a>
- href属性代表=“跳转的目标”
- target属性代表=“打开窗口的方式”：打开窗口的方式有2个值可选：1是self代表当前窗口打开，2是_blank代表新窗口打开。
href属性的属性值将链接分类为6种：
1.外部链接： 在当前去别的地址，必须以http：//开始。 ️herf="http：//www.baidu.com "
2.内部链接： 网站内部页面之间的相互链接。 直接写内部链接的文件名字即可 , herf="home.html"
3.空链接： 不确定跳转目标时,用 # 代替。 herf=“#”
4.下载链接：链接的是一个文件或者压缩包，点击后会自动下载 herf=“img.zip”
5.网页元素链接：可以包裹 文字、图片、视频、音频等标签当作链接进行跳转。
6.锚点链接：快速定位到页面中的某个位置, 举例：
2个步骤：
01:在链接文本的href属性中设置属性值为#文件名， <a href="#go">去指定的位置</a>
02:找到要跳到位置的标签，在标签中添加一个 ID属性 = 刚才的名字， <h2 id="go">就跳到我这个位置来></h2>
12.HTML注释
vscode快捷键：ctrl+/ 行注释。 < !-- --> ，只给程序员自己看，代码不会显示到网页中 .。
13.表格标签
表格用于显示和展示数据的
1.表格的基本语法
<table> //定义表格的标签
<tr> //表格中的每一行，必须包含在<table>标签内。
<td> 单元格 </td> //表格中每一行里的单元格，必须包含在<tr>标签内
</tr>
</table>
2.表格的标签
<table> //定义表格标签
<caption> // 表格的大标题
<h3>表格的大标题</h3>
</caption>
<thead> //表格头部标签
<tr> //行标签
<th> 1 </th> //表头单元格
<th> 2 </th>
</tr>
</thead>
<tbody> //表格主体
<tr>
<td> 单元格 </td>
<td> 单元格 </td>
</tr>
</tbody>
</table>
3.表格属性
- align —— 表格对齐方式 left center right
- border ——表格边框 1 或 " "
- cellpadding ——单元边与内容之间的空白 默认1像素。
- cellspacing—— 单元格与单元格之间的空白 默认2像素。
- width—— 表格宽度 单位为px 或 %
4.合并单元格
三要素：
1.搞清楚跨行(垂直方向) 跨列(水平方向)
2.找到合并的单元格
3.在第一个单元格上跨行 rowspan=“合并的数量” 跨列 colspan=“合并的数量” 不要的单元格 删除掉(注释掉)
14.列表 标签
列表是用来布局的。
特点：整齐、整洁、有序。
分三类： 无序列表 / 有序列表 / 自定义列表
无序列表 <ul> <li></li> </ul>
特点：无顺序、并列的、ul只能嵌套li,但li可以潜逃任何标签，有自己的样式，实际中使用c s s设置样式。
有序列表 <ol> <li></li> </ol>
特点：有顺序、ol只能嵌套li,但li可以潜逃任何标签，有自己的样式，实际中使用c s s设置样式。
自定义列表 <dl> <dt></dt> <dd></dd> </dl>
特点：dl只能包含 dt和dd , dt和dd个数没有限制，一个d t对应多个d d可以放任何标签。
15.表单标签
HTML 表单用于收集用户的输入信息。
将表单域区域的内的内容发送到 Web 服务器。
由 表单域 表单元素（控件 ） 提示信息 三部分组成。
表单域
就是包含表单元素的区域。
<form> </form>表单域
使用<form>标签包裹内的表单元素会提交给服务器。
name是用来给表单元素起名称的,区分不同的表单元素，每个表单元素都应有自己对应的name属性。
value 的值 要传到服务器上去的
action 收集的信息提交给那个文件处理
<form action="1.php">
姓名: <input type="text" name="username">
<br><br>
密码: <input type="password" name="pwd">
<br><br>
性别: <input type="radio" name="sex" value="man"> 男
<input type="radio" name="sex" value="women"> 女
<br><br>
<input type="submit" value="提交按钮">
</form>
表单元素
元素分三类： input输入 ｜ select下拉菜单 ｜ textarea文本域
input输入 （input是个单标签。）
<input type=" ” name=" " > 收集用户信息的。- 有type|name|valve|checked|maxlength|label属性
- type属性有10个属性值
- text 用户输入文本框的，默认20个字符。
- password 用户输入密码框，默认字符被掩码。
- placeholder 占位符，提示用户输入内容的文本。
- radio 单选按钮。
- checkbok 多选按钮，属性值：checked 默认选中。
- submit 提交按钮，把表单域form中表单元素里面的值提交给后台服务器。同时可以通过value属性设置 提交按钮的name。
- reset 重置按钮，点击后恢复表单默认值。
- button 普通按钮，配合j s的点击事件使用 。
- file 文件上传 属性值：multiple多文件选择 。
- hidden 隐藏输入字段的。
- image 图像格式的提交按钮。
- name属性 表示input表单元素的名字，使用多选或者单选元素时所以的name的属性值要统一，才可以实现多选一，属性值用户自定义，value值可以不相同（只在单选和多选值name值要一致）。
- value属性表示input表单元素的默认值， 属性值用户自定义（只在文本框中有值）,要传到服务器上的。
- checked属性 表示input表单元素首次加载默认选中，属性值只有一个为checked
- maxlength属性 表示输入字段最大长度，属性值必须为正整数，用户最多输入几个字符。
label标注标签，不属于表单标签，但是常和input标签一起使用，会扩大点击范围浏览器会自动对焦，增强用户体验。
使用方法①：
1.将文字使用