HTML入门这一篇就够了
@TOC
前言
我把HTML的知识点做了简单归纳，后续如果想到有其他要讲的，应该也会添加到文章中，知识点很少，只要勤加练习相信你很快就能掌握，如内容有误，请大佬及时纠正
一、HTML基础概念认知
1.网页组成和本质
1.1网页由哪些部分组成？
==文字、图片、音频、视频、超链接==
1.2我们看到的网页背后本质是什么？
==程序员写的代码==
1.3前端的代码是通过什么软件转换成看到的页面的？
==通过浏览器转化（解析和渲染）成用户看到的页面，跨平台性==
2.浏览器（了解）
2.1五大浏览器
浏览器：是网页显示、运行的平台、是前端开发必备利器
常见的五大浏览器：IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
2.2渲染引擎（了解）
前端日常推荐谷歌浏览器
3.web标准
因为浏览器各厂商内核不同，所以不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
web标准：让不同浏览器按照相同的标准显示结果，让展示的效果统一
web标准中分成三个，也通常被称为前端三剑客：
4.HTML骨架
HTML的全称为超文本标记语言，是一种标记语言。不属于编程语言。
下面是一个完整的HTML骨架结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
| 标签 | 说明 |
|---|---|
| !DOCTYPE | 定义文档类型 |
| html | 网页的整体 |
| head | 网页的头部 |
| body | 网页的主体 |
| title | 网页的标题 |
二HTML基础标签
前言
HTML中不区分大小写，但是我们一般都使用小写
HTML标签必须结构完整，要么成对出现，要么单标签
代码注释
注释后的代码或文字不生效，不显示。不管是个人还是团队，都要养成良好的注释习惯，可以提高代码阅读速度，提高整体工作效率，不至于花时间去分析某一个封装的函数是什么功能
例：
//单行注释
<!-- 多行注释-->
1.排版标签
1.1标题标签
特点：文字加粗，由大到小 ，独占一行
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
1.2段落标签
特点：独占一行，段落间存在间隙
<p>我是一段文字</p>
<p>我是一段文字</p>
1.3换行标签
特点：让文字强制换行
代码：<br>
示例：
<p>我是一段文<br>字</p>
1.4水平线标签
作用：在页面显示一条水平线
代码：<hr>
示例：
<p>我是一段文字</p>
<hr>
<p>我是一段文字</p>
2.文本格式化标签
| 标签 | 说明 |
|---|---|
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
示例：
<b>加粗</b><br>
<u>下划</u><br>
<i>倾斜</i><br>
<s>删除</s><br>
下面效果一样，突出重要性的强调
| 标签 | 说明 |
|---|---|
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
3.媒体标签
3.1图片标签
代码 <img src="" alt="">
| 属性 | 说明 |
|---|---|
| src | 图像路径 |
| alt | 图片显示不出来时的提示文字 |
| title | 鼠标移到图片上提示文字 |
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<img src="tu.png" alt="这是一只猫"title="猫">
</body>
</html>
如果src路径错误，不能正常读取图片则
3.2 路径
路径分为两种：相对路径和绝对路径
3.2.1相对路径:
分为三种：同级，上级，下级。
1同级目录
如图per.png图片和index.html都在Texitong目录文件下，且per.png不在其他目录文件下，则和html文件在同级，表示为
<img src="./per.png">
或者可以表示为下面这样，可省略'./'
<img src="per.png">
2.上级目录
图片per.png在walt文件ing文件下，我们的html文件在Texitong文件下，两个文件不在同一目录，所以我们要用要往上找，你可能会问walt文件在Texitong的下面位置为啥要往上找，你可以理解为他们不在同一个文件里面所以我们要往外找，而只有一种方法就是往上查找，只要不是在同一个总文件下，都用上级就完事了，灵活运用咯
默认路径写法为'./文件.png'，虽然'./'可以在省略，但是在上级目录时，就不能省略，因此
上一级目录则表示为'../'，上两级则为'.../'，则上面的写法应该为
<img src="../walt/img/per.png">
下级目录
如图，文件都在相同Texitong文件夹下
其中图片文件为'per.png'在img文件下，则表示为
<img src="./img/per.png" >
其中./表示当前目录下可以省略，因此我们可以这样写
<img src="img/per.png" >
3.2.2绝对路径:
从盘符出发，或者文件链接
绝对路径：是从盘符开始的路径，如
C:\windows\system32\cmd.exe
链接 如 'baidu.com';
<img src="baidu.com" >
3.3音频标签
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
示例：
<audio src="img/BGM.mp3"controls></audio>
3.4视频标签
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
示例：
<video width="200px" height="200px" src="img/par.mp4"controls></video>
width是宽，height是高
视频标签目前支持的三种格式：mp4、WebM、Ogg
4链接标签
称呼：a标签、超链接、锚链接
特点：内部可以包裹内容，点击后跳转指定页面
代码
<a href="index.html">文本</a>
| 属性名 | 功能 |
|---|---|
| href | 目标地址 |
| target属性 | 功能 |
|---|---|
| _self | 当前窗口打开 |
| _blank | 新的窗口打开 |
示例:新窗口打开
<a href="soul.html"target="_blank">点击跳转</a>
练习题
题1：要求页面标题标签，用到视频，段落换行显示，超链接跳转到音频页面
跳转后
答案
视频和音频文件自行寻找，注意路径别弄错了
index.html主文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>潮涌东方丨杭州亚运 大圣来也</h1>
<video src="img/par.mp4" width="500px" controls></video>
<p>话说，花果山的大圣听得孩儿来报，东方有地，名曰杭州，众健儿汇集于此，大展手脚，不禁技痒难耐，于是决定前去挑战一番。此番战果如何，且看视频分解。</p>
<p>总监制丨过 彤<br>
监 制丨魏驱虎 唐晓艳<br>
制片人丨兰 军<br>
策 划丨周小敏 吴冰钰<br>
作 曲｜陈涤非<br>
视 觉｜朱 意 冀常珲<br>
手 绘｜杨 轩 蒲永琦
动 画｜胡梁三 吕红涛 李佳昊 沈俊峰等<br>
鸣 谢｜北京民族乐团<br>
</p>
<b>视频非原文章视频</b><br>
<a href="soul.html"target="_blank">点击跳转</a>
</body>
</html>
跳转后的soul.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<u>已跳转</u><br>
<hr>
<audio src="img/BGM.mp3" controls></audio>
</body>
</html>
小结
标题标签
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
段落标签
<p>我是一段文字</p>
换行标签
<br>
水平线标签
<hr>
文本格式化标签
b 加粗
u 下划线
i 倾斜
s 删除线
strong 加粗
ins 下划线
em 倾斜
del 删除线
图片标签
<img src="" alt="">
音频标签
<audio src=" "controls></audio>
视频标签
<video src=" "controls></video>
超链接
<a href=" "> </a>
三、HTML列表、表格标签
1.列表标签
列表标签分为三个：
1.无序列表
2.有序列表
3.自定义列表
ul,ol标签中只允许包含li标签,li标签可以包含任何内容
dl 只允许包含dt/dd标签，,dt/dd标签可以包含任何内容
列表符号均由==list-style-type==定义，后续学到css就可以自己定义序列表的小图标啦
1.1无序列表
| 标签 | 说明 |
|---|---|
| ul | 无序列表 |
| li | 表示无序列表的每一项 |
| type属性 | 序号类型 |
|---|---|
| disc | 默认值 实心圆“●” |
| circle | 空心圆“○” |
| square | 实心正方形“■” |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul>
<li>默认</li>
</ul>
<ul style="list-style: circle;">
<li>circle</li>
</ul>
<ul style="list-style: square;">
<li>square</li>
</ul>
</body>
</html>
1.2有序列表
| 标签 | 说明 |
|---|---|
| ol | 有序列表 |
| li | 有序列表的每一项 |
| type属性值 | 列表项的序号类型 |
|---|---|
| 1 | （ 默认属性）数字1、2、3…… |
| a | 小写英文字母a、b、c…… |
| A | 大写英文字母A、B、C…… |
| i | 小写罗马数字i、ii、iii…… |
| I | 大写罗马数字I、II、III…… |
1.3自定义列表
| 标签 | 说明 |
|---|---|
| dd | 默认显示缩进效果,可包含任何内容 |
| dl | 只允许包含dt/dd标签 |
| dt | 可以包含任意内容 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
</head>
<body>
<dd>
<dl>标题</dl>
<dt>内容</dt>
<dt>内容</dt>
</dd>
</body>
</html>
2.表格标签
2.1表格标签
| 标签 | 说明 |
|---|---|
| table | 表格标签 |
| caption | 表格整体大标题,默认在表格整体顶部居中位置显示 |
| tr | 用于于包裹td |
| th | 表示一列小标题，通常用于表格第一行默认内部文字加粗并居中显示 |
| td | 包裹内容 |
tr标签只能包含td，td标签可以包含所有内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<caption>课程表</caption>
<tr>
<th>星期日</th><th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th>
</tr>
<tr><td>语文</td><td>美术</td><td>语文</td><td>化学</td><td>数学</td><td>语文</td><td>英语</td></tr>
<tr><td>语文</td><td>英语</td><td>语文</td><td>数学</td><td>物理</td><td>历史</td><td>语文</td></tr>
<tr><td>数学</td><td>美术</td><td>历史</td><td>物理</td><td>数学</td><td>化学</td><td>物理</td></tr>
<tr><td>化学</td><td>语文</td><td>语文</td><td>数学</td><td>物理</td><td>语文</td><td>英语</td></tr>
<tr><td>历史</td><td>物理</td><td>化学</td><td>数学</td><td>数学</td><td>语文</td><td>英语</td></tr>
</table>
</body>
</html>
2.2表格结构标签
注意点:表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
这个只是方便我们看代码的时候能快速定位表格的结构部分
| 标签 | 说明 |
|---|---|
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<caption>课程表</caption>
<thead> //表格头部
<tr>
<th>星期日</th><th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th>
</tr>
</thead>
<tbody>//表格主体
<tr><td>语文</td><td>美术</td><td>语文</td><td>化学</td><td>数学</td><td>语文</td><td>英语</td></tr>
<tr><td>语文</td><td>英语</td><td>语文</td><td>数学</td><td>物理</td><td>历史</td><td>语文</td></tr>
<tr><td>数学</td><td>美术</td><td>历史</td><td>物理</td><td>数学</td><td>化学</td><td>物理</td></tr>
<tr><td>化学</td><td>语文</td><td>语文</td><td>数学</td><td>物理</td><td>语文</td><td>英语</td></tr>
<tr><td>历史</td><td>物理</td><td>化学</td><td>数学</td><td>数学</td><td>语文</td><td>英语</td></tr>
</tbody>
<tfoot>//表格尾部
<tr><td></td></tr>
</tfoot>
</table>
</body>
</html>
3.3表格相关属性
| 标签 | 属性 |
|---|---|
| border | 边框宽度 |
| width | 表格宽度 |
| height | 表格高度 |
| cellspacing | 单元格间距 |
| cellpadding | 单元格填充 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<caption>课程表</caption>
<thead>
<tr>
<th>星期日</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
</thead>
<tbody>
<tr>
<td>语文</td>
<td>美术</td>
<td>语文</td>
<td>化学</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td>语文</td>
<td>英语</td>
<td>语文</td>
<td>数学</td>
<td>物理</td>
<td>历史</td>
<td>语文</td>
</tr>
<tr>
<td>数学</td>
<td>美术</td>
<td>历史</td>
<td>物理</td>
<td>数学</td>
<td>化学</td>
<td>物理</td>
</tr>
<tr>
<td>化学</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>物理</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td>历史</td>
<td>物理</td>
<td>化学</td>
<td>数学</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
3.4合并表格
| 标签 | 属性 |
|---|---|
| rowspan | 跨行合并 |
| colspan | 跨列合并 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<caption>课程表</caption>
<thead>
<tr>
<th>星期日</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">语文</td>
<td>美术</td>
<td>语文</td>
<td>化学</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>物理</td>
<td>历史</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td>数学</td>
<td>历史</td>
<td colspan="3" >物理</td>
<td>语文</td>
</tr>
<tr>
<td>化学</td>
<td>语文</td>
<td>语文</td>
<td>数学</td>
<td>物理</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td>历史</td>
<td>物理</td>
<td>化学</td>
<td>数学</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
注意点:==只有同一个结构的标签中的单元格才能合并，不能跨结构合并（不能跨上面说的结构标签：thead、tbody、tfoot）==
小结
列表图标可用list-style-type自定义
表格结构标签可省略不影响整体效果
合并单元格，不能跨表格结构标签合并
四、HTML表单
前言
用到表单的三种情况：
1.注册页面
2.登入页面
3.搜索页面
下面讲一些常用的标签即属性
1.input标签
input可以根据type属性的不同，展示不同的效果
| type属性值 | 说明 |
|---|---|
| text | 文本框用于输入单行文本 |
| password | 密码框，用于输入密码 |
| dio | 单选框，用于多选一 |
| checkbox | 多选框，用于多选多个 |
| file | 文件选择，用于上传文件 |
| submit | 提交按钮，用于提交 |
| reset | 重置按钮，用于重置 |
| button | 普通按钮，默认无功能，配合js添加功能 |
1.1文本框
<input type="text"value="123">
value为默认给输入框设定的内容，可忽略
1.2密码框
<input type="password">
1.3input占位符
placeholder 用于提示信息
<input type="password" placeholder="请输入密码">
1.4单选框
<input type="radio"name="sex" checked>单选框<br>
<input type="radio" name="sex">单选框
==checked==为默认选中值
==name定义名称==，相同名称的为一组，可实现多选一
1.5多选框
<input type="checkbox"name="tre">跑步
<input type="checkbox"name="tre"checked>读书
<input type="checkbox"name="tre">音乐
同上==checked==为默认选中值
==name定义名称==，相同名称的为一组，方便后续提取内容
1.6文件选择
multiple 多文件提交,不添加则单文件
<input type="file" multiple>
1.7input按钮
1.7.1提交按钮
<input type="submit">
1.7.2重置按钮
<input type="reset">
2. button按钮
<button>普通按钮</button>
==普通按钮无任何功能，配合js使用==
同样可以给他添加type属性，同input系列按钮
举例
<button type="submit">提交</button>
3.select下拉菜单标签
<select name="">
<option value="">下拉列表1</option>
<option value="">下拉列表2</option>
</select>
当我们加入size属性时
<select name=""size="5">
<option value="">下拉列表1</option>
<option value="">下拉列表2</option>
</select>
4.textarea文本域
==cols水平的文字字符长度，rows垂直文字字符长度==
<textarea name="" id="" cols="30" rows="10"></textarea>
右下角可以自由拉伸大小
5. label标签
<label for=""></label>
==for用于绑定id，当点击label标签的文字时执行被绑定id的事件==
示例：
<input type="radio"name="sex"id="male"checked><label for="male">男</label>
<input type="radio"name="sex"id="female"><label for="female">女</label>
如上，当点击文字时也会选择单选框
6form标签
<form action="" method="post">
<input type="submit" value=""/>
</form>
| 属性 | 说明 |
|---|---|
| action | 发送去的地址 |
| method | 提交方式，get或post |
用于处理的元素都应放在form标签里，否则部分控件失效，如重置，提交按钮
get一般用于搜索，post相对安全性高常用于提交信息
练习
如图，单选框默认属性选择男，单击男或女能实现选中，能上传多个文件，重置信息功能正常
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="" method="post">
<table border="1" cellspacing="0" cellpadding="0" width="380">
<tr bgcolor="cornflowerblue">
<td>个人信息</td>
</tr>
<tr>
<td>姓名:<input type=" text" name="name" id="" value="" />
</td>
</tr>
<tr>
<td>邮箱:<input type="text" name="youxiang" id="" value="" />
<select name="qcm">
<option value="@qq.com">@qq.com</option>
<option value="@163.com">@163.com</option>
</select>
</td>
</tr>
<tr>
<td><label>手机号码:</label><input type="text" name="sjh" id="" value="" /></td>
</tr>
<tr>
<td>
<input type="radio" name="sex" id="male" checked><label for="male">男</label>
<input type="radio" name="sex" id="female"><label for="female">女</label>
</td>
</tr>
<tr>
<td>
<label>爱 好:</label>
<input type="checkbox" name="uk1" id="" value="游泳" />游泳
<input type="checkbox" name="uk2" id="" value="读书" />读书
<input type="checkbox" name="uk3" id="" value="跑步" />跑步
</td>
</tr>
<tr>
<td><label>学校:</label><select name="xuexiao">
<option value="未选择">请选择</option>
<option value="复旦大学">复旦大学</option>
<option value="清华大学">清华大学</option>
<option value="武汉大学">武汉大学</option>
</select></td>
</tr>
<tr>
<td>自我介绍:<br>
<textarea rows="8" cols="50" name="zwjs"></textarea>
<input type="file" name="" id="" multiple>
</td>
</tr>
<tr>
<td>
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
小结
占位符 ==placeholder== 用于提示信息。
单选和多选框的属性：
==checked==为默认选中值
==name==定义名称，相同名称的为一组，方便后续提取内容。
多文件提交我们可以添加==multiple==来实现
当下拉列表添加==size==属性时，可无需下拉显示元素
==label的for==属性用于绑定id，常和选择框一起绑定
- 今天不学习，明天变垃圾
- ==一定要亲手杀死那个懦弱无能颓废的自己==
