阅读指南
前言
使用的编译器为vscode
需要安装的插件:
1.open in browser
2. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
目录
阅读指南
前言
一、HTML基础
1.基本框架
2.基本标签
2.1标题标签，水平线标签，段落标签，换行标签
2.2格式化标签
2.3图片标签
2.3.1路径
2.4音频标签
2.5链接标签
2.6列表标签
2.6.1无序列表
2.6.2有序列表
2.6.3自定义列表
2.7表格标签
2.8表单标签
2.9其他表单标签
2.9.1botton标签
2.9.2select标签
2.9.3文本域标签
2.9.4label标签
2.10语义标签
2.11实体字符
总结
一、HTML基础
1.基本框架
HTML框架是由html标签嵌套head标签和body标签
在head标签里嵌套title标签
body标签里作为网页的内容，title标签作为网页的标题
<!-- //快捷键（英文）！+ TAB键 -->
<!-- 标签与标签之间有嵌套关系和并列关系 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
网页内容
</body>
</html>2.基本标签
基本标签多样且一般使用在body标签里，用丰富网页内容
2.1标题标签，水平线标签，段落标签，换行标签
标题标签<h1>,<h2>...标题标签用于对网页标题的强调，在标题标签内文字的字体将变大，字体加粗并且自动换行,标题标签<h n>随着n的变大字体将逐渐变小，字体仍加粗
水平线标签<hr>,在网页上生成一条颜色较浅的实线，用于分割网页布局
段落标签<p>,段落标签内内容，作为网页的内容，作为一个段落，会自动换行
换行标签<br>,用于内容的换行，或增加间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本标签</title>
</head>
<body>
<!-- 标题标签<hn></hn> 随着标签数增大字体变小，且标题加粗-->
<h1>第1标题</h1>
<h2>第2标题</h2>
<!-- <hr>水平线标签，出现一条水平线分割 -->
<hr>
<hr>
<!-- 段落标签<p></p> 有间隔 -->
<p>第一段</p>
<p>第二段</p>
<!-- 换行标签<br>强制换行 且无间隔-->
<p>XXXXXXXXXXXXXXXXXXXXXXXXXbr<br>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</body>
</html>
2.2格式化标签
格式化标签用于修饰内容
加粗<strong>下划线<ins>倾斜<em>删除线<del
<!DOCTYPE html>
<html lang="en">
<head>
<title>格式化标签和图片标签</title>
</head>
<body>
<!-- 格式化标签
加粗<strong>
下划线<ins>
倾斜<em>
删除线<del> -->
<strong>加粗选中字体</strong><br>
<ins>在选中文字添加下划线</ins><br>
<em>使选中文字倾斜</em><br>
<del>在选中文字添加删除线\</del><br>
</body>
</html> 
2.3图片标签
图片标签<img>,图片标签需要引入图片，需要属性src=" "，在引号内的为属性值，属性值为图片路径格式为
修饰图片的其他属性alt=" ",属性值为一段文本，可以再图片加载失败时，显示替换文本
属性title=" "，属性值为一段文本，用于鼠标悬停在图片时，显示解释文本，也可以用于标题标签<h>
属性width=" "，height=" ",属性值为数值xx px,其中‘xx’为数字，‘px’为像素单位，两者控制图片的宽和高，若仅控制一个，则根据长或宽等比例变化
基本格式为 <img src="xxx.gif" alt="xxx" title="xxxx" width="200">
2.3.1路径
路径分绝对路径和相对路径
绝对路径分 盘符"D/"和完整的网络地址"https"
相对路径分 同级目录，上级目录和下级目录
同级目录直接直接根据图片名引用
上级目录需要通过‘ ../ ’转至上级目录
下级目录需要通过‘ ./ ’转至下级目录
<!DOCTYPE html>
<html lang="en">
<head>
<title>格式化标签和图片标签</title>
</head>
<body>
<!-- ！图片标签！<img> （属性名）src=""（属性值，图片路径）
（属性名）alt=""（若图片加载失败，显示替换文本）
（属性名）title=""（鼠标悬停于指定title会显示该文本）title标签可用于其他标签如：<hn>标签
（属性名）width=""和high=""（只设置一个图片会按等比例缩放，如果设这两个会根据设置的大小变化，如果比例不完美会使图片变形）
src=""（有绝对路径和相对路径）
绝对路径分 盘符"D/"和完整的网络地址"https"
相对路径分 同级目录，上级目录和下级目录 -->
<!-- 网络地址路径 -->
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ/KoYAcr+Owsw&riu=http://www.quazero.com/uploads/allimg/140305/1-140305131415.jpg&ehk=Hxl/Q9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE=&risl=&pid=ImgRaw&r=0" alt="wu" width="200">
<!-- 同级目录 直接引用-->
<img src="R-C.gif" alt="皮卡丘" title="皮卡丘竟然这么可爱！！！" width="500">
<!-- 下级目录 使用"./文件名称"后引用-->
<img src="./图片/OIP-C.jpg" alt="下级目录图片" width="200">
<!-- 上级目录 使用"../"后引用-->
<img src="../20170310192847_dzJyu.gif" alt="上级目录图片" width="200">
<!-- 上级目录"./"和下级目录"../"可重复使用知道找到目标为止 -->
<!-- <title>标签用于标题标签<h1>里,鼠标悬停显示文本 -->
<h1 title="这里也有title的提示文本">一级标签</h1>
</body>
</html>
2.4音频标签
音频标签<audio>和<video>
1.音乐标签<audio>,与引入图片标签相同，属性名为src=" ",
其他修饰属性为（音频控制键）controls，（自动播放）autoplay，（循环播放）loop
引入音乐需要添加音频控制键，这才能显示音乐播放图像
2.视频标签<video>,与引入图片标签相同，属性名为src=" ",
其他修饰属性为（音频控制键）controls，（自动播放）autoplay， （静音播放可以自己调节）muted，（循环播放）loop
引入视频需要添加音频控制键，这才能显示视频播放图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 音频标签<audio （路径）src=""
（音频控制键）controls
（自动播放）autoplay
（循环播放）loop> -->
<audio src="That Girl-Olly Murs.mp3" controls autoplay loop></audio>
<!-- 音频标签<video （路径）src=""
（音频控制键）controls
（自动播放）autoplay
（静音播放可以自己调节）muted
（循环播放）loop> -->
<video src="./xtdowner.com 259881 视频链接.mp4" controls autoplay muted loop width="200"></video>
</body>
</html>
2.5链接标签
链接标签<a>,可用于鼠标点击并跳转网页
属性名herf=" ",属性值为所要跳转的网页地址
（跳转方式）属性名target="",属性值为“_blank”（保留当前页面，跳转至新的界面）与“_self”,（直接在当前界面跳转，覆盖当前页面）
当herf=" "的属性值为“#”时，链接为空链接，点击将回到网页顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 链接标签<a （跳转网站）href="" （跳转方式）target=""主要有两种（"_blank"和"_self"）>点击文字</a> -->
<!-- _blank用于保留原有界面，跳转入新的界面
_self用于覆盖当前页面跳转 -->
<a href="https://www.baidu.com/" target="_blank">百度跳转</a>
<br><hr>
<a href="https://www.douyin.com/" target="_self">抖音跳转</a>
<br><hr>
<!-- 空连接有两个作用，一个是回到网页顶部，另一个是作为一个空位置待定跳转 -->
<a href="#">空连接</a>
</body>
</html> 
2.6列表标签
2.6.1无序列表
无序列表标签有<ul>和<li>
<ul>标签为列表的整体里面嵌套<li>标签，<li>标签作为列表的分点，每个分点前面都会有‘ · ’，<li>标签可以嵌套其他标签，如格式化标签
2.6.2有序列表
无序列表标签有<ol>和<li>
<ol>标签为列表的整体里面嵌套<li>标签，<li>标签作为列表的分点，每个分点前面都会有数字从1开始并排列，如“1. 2. 3....”
2.6.3自定义列表
自定义列表标签有<dl>,<dt>和<dd>
<dl>标签为列表的整体里面嵌套<dt>标签，<dt>标签为列表主题里面嵌套<dd>,<dd>标签为列表的分点
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>无序列表</h1>
<!-- 无序列表标签有<ul>和<li>两个标签
<ul>是列表的整体，<li>是列表的分点 每个分点前面都有！"·" ！-->
<ul>
<li>one</li>
<li>two</li>
<li><strong>five</strong>five</li>
</ul>
<!-- 注意点
<ul>标签里的分点只能由<li>来完成 <li>标签可以嵌套其他标签 例如<p>-->
<h1>有序列表</h1>
<!-- 有序列表标签有<ol>和<li>两个标签
<ol>是列表的整体，<li>是列表的分点 每个分点前面都按数字顺序排列！"1. 2. 3."！ -->
<ol>
<li>one</li>
<li>two</li>
<li><strong>three</strong>three</li>
</ol>
<!-- 注意点
<ol>标签里的分点只能由<li>来完成 <li>标签可以嵌套其他标签 例如<p>-->
<h1>自定义列表</h1>
<!-- 自定义标签有<dl>,<dt>和<dd>三个标签
<dl>标签是主体部分，<dt>是列表的主题，<dd>是列表的主题内容 -->
<dl>
<dt>one</dt>
<dd>one1</dd>
<dd>one2</dd>
<dd>one3</dd>
</dl>
<!-- 注意点
<dl>是用来包裹<dt>和<dd>的 <dt><dd>可以嵌套其他标签 -->
</body>
</html> 
2.7表格标签
1. 表格标签<table>,在<tabel>中嵌套<tr><caption>标签，在<tr>标签里嵌套<td><th>
<table>标签作为表格的整体 <tr>作为表格的行 <td>作为表格的内容
<th>作为一个表格单元格与<td>类似，但文字加粗并居中，多用于第一行 <caption>作为表格主题名，在<table>下面
2. 作为一个表格<table>标签，有属性border width height
border 给表格增加边界 width 修改表格宽度 height 修改表格高度
3. 表格结构标签<thead><tbody><tfoot>
<thead>设置表格头部内容 <tbody>设置表格主体内容 <tfoot>设置表格底部内容 修饰的对应的<td>行改变适应的高度（下有图片显示）
注意点：！表格结构标签<thead><tbody><tfoot>修饰<tr>行或是嵌套<tr>！
4. 合并单元格标签有 rowspan="" 和 colspan=""作为单元格<td>或<th>的属性进行调节
rowspan是在列中合并，colspan是在行中合并，通过输入数值来确定合并的单元格数
注意点：！合并单元格只能在结构标签中进行，跨结构标签无作用！
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>表格基本标签</h1>
<!-- 表格基本标签有<table><tr><td><th><caption>
<table>标签作为表格的整体 <tr>作为表格的行 <td>作为表格的内容
<th>作为一个表格单元格与<td>类似，但文字加粗并居中 <caption>作为表格主题名-->
<h2>表格属性</h2>
<!-- 用于<table>de1表格属性有三个 border width height
border 给表格增加边界 width 修改表格宽度 height 修改表格高度 -->
<h2>表格结构标签</h2>
<!-- 表格结构标签<thead><tbody><tfoot>
<thead>设置表格头部内容 <tbody>设置表格主体内容 <tfoot>设置表格底部内容 修饰的对应的<td>行改变适应的高度 -->
<h2>合并单元格</h2>
<!-- 合并单元格标签有 rowspan="" 和 colspan=""作为单元格的属性进行调节
rowspan是在列中合并，colspan是在行中合并，通过输入值来确定合并的单元格 -->
<table border="30" width="300" height="200">
<caption><h3>六年级一班成绩</h3></caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>90</td>
<td>95</td>
<td rowspan="2">95</td>
</tr>
<tr>
<td>小红</td>
<td>98</td>
<td>93</td>
<!-- <td>95</td> -->
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>94</td>
<td>94</td>
<td>95</td>
</tr>
<tr>
<td>评价</td>
<td colspan="3">优秀</td>
<!-- <td>优秀</td> -->
<!-- <td>优秀</td> -->
</tr>
</tfoot>
</table>
<!-- 注意点
三个标签的嵌套为<table> > <tr> > <td>&<th>
<table>内部的标签都可以嵌套其他标签
<td>和<th>作用相似
表格结构标签<thead><tbody><tfoot>修饰<tr>行或是包裹<tr>
合并单元格只能在结构标签中进行，跨结构标签无作用
-->
</body>
</html>
2.8表单标签
表单标签<input>,属性type=" "用于选择表单的类别,属性值text为文本框，password为密码框，radio为单选框，checkbox为多选框，file为文件选择，submit为提交按钮，reset为重置按钮，button为普通按钮
在文本框和密码框可使用属性placeholder(占位符)，属性值为一段提示文本，显示在文本框或密码框中，文字颜色较浅，在框中输入文字后，提示文本消失
实现单选，需要将属性name="",相同的属性值作为一组单选
实现表单的重置按钮需要配合标签<form>对需要重置的表单进行包裹
在单选和多选中可使用属性checked，实现默认选择
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>表单标签</h1>
<!-- 表单标签<input type="text">,主要以其属性type的各种属性值来实现表单
text为文本框，password为密码框，radio为单选框，checkbox为多选框，file为文件选择
submit为提交按钮，reset为重置按钮为默认，button为普通按钮 -->
<!-- 属性名占位符placeholder="",用于文本框中，作为提示文本，在文本框输入文字后消失 -->
<!-- value属性，用于收集用户提交内容，提交后发送到后端服务器
name属性，用于说明用户所提交内容的含义
后端收到的信息为name=value -->
<form>
昵称：<input type="text" placeholder="请输入昵称" value="帅哥" name="昵称"> <br><br>
密码：<input type="password" placeholder="请输入密码"><br><br>
<!-- 注意点如果type的值输入错误将会默认为文本框 -->
<!-- 在type="radio"中，name的属性值，用于分组，如果属性值相同，分于同一组，并且为单选
checked用于在默认选中 -->
性别：<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女<br><br>
<!-- checkbox属性值所生成的选择空，只能通过点击选择空选中 -->
爱好：<input type="checkbox" checked>睡觉
<input type="checkbox">吃饭
<input type="checkbox">打豆豆<br><br>
<!-- multiple属性用于file的选择多文件 -->
<input type="file" multiple><br><br>
<!-- 提交按钮作用在于提交内容发送到后端 -->
<input type="submit">
<!-- reset属性与<form action="">共用，实现对内容的重置默认 -->
<input type="reset">
<!-- <button>属性的按钮名通过value来给与名字 -->
<input type="button" value="普通按钮">
</form>
</body>
</html>
2.9其他表单标签
2.9.1botton标签
标签<botton>,与表单标签<input>标签相似，使用属性type=""类选择不同的按钮,属性值submit为提交按钮，reset为重置按钮，button为普通按钮
<h1>button标签的用法</h1>
<!-- button标签是一个双标签，可通过type属性改变button的功能
例如submit属性，reset属性，button属性，功能如input相同 -->
<input type="text" placeholder="请输入昵称">
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<!-- 由于button标签是双标签可用于包裹文本，图片等 -->
2.9.2select标签
下拉列表标签<select>作为整体，里面嵌套<option>标签，作为列表的选项
下拉列表默认选择可使用属性selected
<h1>select标签的用法</h1>
<!-- <select>作为下拉列表的整体，<option>作为下拉列表的每一项
下拉列表默认选中使用selected属性 -->
<select>
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<option>深圳</option>
</select>
2.9.3文本域标签
文本域标签<textarea>,与文本框不同的是文本域标签可修改文本框的宽和行数
属性rows=" ",通过属性值的数值来改变文本域的行数
属性cols=" ",通过属性值的数值来改变文本域的宽度
网页中文本域右下角可调节长和宽
<h1>文本域标签</h1>
<!-- <textarea>标签可使用属性cols与rows，cols可修改文本域的宽度，rows可修改文本域的行数 -->
<!-- <textarea>标签生成的文本域右下角可以拖拽改变文本域大小，推荐CSS -->
<textarea cols="30" rows="15" placeholder="请输入你想说的话"></textarea>
2.9.4label标签
标签<label>通常与单选radio和多选checkbox配合使用，实现鼠标选中文本也可以选中该选项
第一种写法：在表单标签<input>中添加属性id=" ",再将选项文本嵌套在<label>里并添加属性for="",属性id和属性for的属性值必须相同
<input type="checkbox" id="one"><label for="one">选项1</label>第二种写法：直接用<label>标签嵌套所要使用的表单选项上
<label>
<input type="checkbox">选项2
</label>2.10语义标签
语义标签分无语义标签和语义标签
无语义标签：<div>和<span>,两者在前端开发中使用较多
<div>标签独占一行，<span>标签一行可以多个
语义标签：<header><nav><footer><aside><section><article>
六大语义标签功能与<div>标签相同，但语义不同
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>无语意标签</h1>
<!-- 在前端开发使用较多
无语意标签有<div>和<span> <div>标签独占一行 <span>标签一行中可以多个 -->
<div>一个div</div>
<div>一个div</div>
<div>一个div</div>
<span>一个span</span>
<span>一个span</span>
<span>一个span</span>
<h1>有语义标签</h1>
<!-- 六大有语义标签于<div>的功能相同但语义不同 -->
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>网页侧边栏</aside>
<section>网页区块</section>
<article>网页文章</article>
</body>
</html>
2.11实体字符
在文本中出现符号‘<’‘>’编译器会识别错误，或是文本中编译器会将多个空格和换行识别为一个空格，这是就需要实体字符来解决
例如空格可以用" "替换，"<"可以用"<"替换，">"可以用">"替换
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>实体字符</h1>
<!-- HTML存在空格合并现象，将多个空格或换行转换为一个空格 -->
<!-- 解决这个问题，可以通过实体字符来替换 -->
<!-- 例如空格可以用" "替换，"<"可以用"<"替换，">"可以用">"替换 -->
<p>xxxxxx xxxxx</p>
<p>xxxxxx xxxxx</p>
p标签的是这样的<p></p>
p标签的是这样的<p></p>
</body>
</html>
总结
HTML作为前端的最基本框架，需要打牢基础，记住并明白各个标签的用法为接下来学习CSS做足铺垫
