HTML学习总结
一、前言
基于vs code进行操作
推荐使用浏览器chrome、firefox
安装以下插件：
Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence
点击以下图标以搜索插件并安装：
vs code下载
二、 HTML简介
HTML全称为HyperText Markup Language，又称为超文本标记语言；顾名思义我们可以用 HTML来构建 Web 页面即平常所见的网页，换句话说就是它定义了网页内容的含义与结构。
此外，HTML并不是一门编程语言，它是一种用于定义内容结构的标记语言，网络上的网页都存在一个HTML文档，可以右键源码查看
三、HTML入门
参考例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个Web页</h1>
<p>当前有点丑：)</p>
</body>
</html>
1、元素
a、一个元素通常包括两个部分：标签和内容；并且整个html文档是有一个一个元素组成的。
b、下图为一个元素，其中：为开始标签和结束标签，被夹在其中的内容即为内容
c、
<head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video>```
2、HTML结构
a、整体结构
<!DOCTYPE html>:声明文档类型。出于历史原因需要，现在可有可无。
<html></html>: 所有元素都嵌套其中，是根元素。
<head></head>: 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
<meta charset="utf-8">: 表明此元素设置文档使用utf-8字符集编码，其中utf-8字符集包含了现存的大部分文字以及符号，因此使用它日后可以规避很多不必要的麻烦。
<"favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: 网页显示的内容，文本，图片等。
b、注释、空元素以及属性
1、注释：
<!--注释-->
在代码中插入上述元素即可添加注释，注释是我们用来提示自己的文本信息，不会显示在网页上，其中文本内容为自己添加的部分
2、3的试例：
<p>我可以<br>换行</p> <!-- 换行 -->
<hr> <!-- 水平分割线 -->
<input><!-- 输入框 -->
<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
2、空元素
<br>, <hr>, <input>, <img>, <a>
空元素与一般元素不同，他只有一个开始标签，且一般嵌套在元素中使用，可以实现一些特定的功能
3、属性
<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
这部分标签可以为指定元素添加属性（额外信息）
注：1、元素名称与属性之间要有一个空格；
2、属性格式： 属性名称="内容"
c、标题与文本格式
1、标题
html提供了从大到小6级的标题大小<h1> ~ <h6>
此外，在页面中标题也起着很重要的作用：
搜索引擎用标题来索引页面的内容
用户也习惯以标题进行主要内容浏览，以决定是否查看该页面
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
2、文本格式
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
效果图：
注：因为文本格式是属于页面美化的工作，所以这里不推荐使用以上标签
d、超链接、图片及文件路径img
1、超链接
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
语法说明：
1、href即为要跳转去的地址 URL（Uniform Resorce Locator)
2、target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
3、超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
我们可以使用超链接标签，来制作锚点，以达到跳转到指定页面的功能
<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
其中：
元素的id值必须是唯一的，也即页面不能再有其它元素的id值为C4
超链接中的地址需要有#符号
2、图片及文件路径img
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
使用上述标签可在指定位置添加图片
注：
1、src属性为所选图片文件的位置URL，也就是图片文件的路径
2、alt属性当获取图片出现问题时，原本会显示图片处显示的文字信息（占位符）
3、最后两个属性为图片指定高宽度，不过一般不建议使用（可能导致图片变形）
现目前对于小尺寸图片可采用base64编码以提升页面加载速度
->base64编码
其中注中第一条的文件路径分为相对路径、绝对路径，上面的试例就是绝对路径，相对路径如下：
将图片制作成超链接：
<a href="https://www.baidu.com/" target="_blank" title="百度一下"><img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo"></a>
直接将链接元素中的内容换为插入图片的标签即可，此外还可以为图片添加属性
此外，压缩图片大小，可以提升网页加载速度，下面提供两个不改变图片质量却能达到压缩大小目的的网站
websiteplanet以及tinypng
e、表格（table）、列表（list）以及表单（form）
1、表格table
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
以上<table></table>即为显示表格的标签，其中<tr></tr>为一行;<th></th>为表头，会加粗显示;<td></td>为一行之中的信息
现目前表格显示比较简陋，后续css会有相关美化操作
2、列表
列表分为无需序列表以及有序列表
无序列表：
<ul type="none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
其中type可以定义每项前面显示标志的图形，可以是square，circle，如果不定义默认为实心原点
有序列表：
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
会自动为每项排序并在每项前显示，默认为数字，可以定义为a，A等
3、表单
在以下示例中，
表单标签<form></form>,里面可以嵌套很多标签，以供我们的网页收集一些信息
点击提交，其中表单中没有name的元素将不会被提交，有name的元素会将value的值提交给服务器
<form>
<!-- 文本框，注意有 placeholder 提示符 -->
用户名：<br>
<input type="text" name="name" placeholder="请输入用户名"><br>
<!-- 密码框 -->
密码：<br>
<input type="password" name="ps" placeholder="请输入密码"><br>
年龄：<br>
<!-- 数字输入框，注意 min 和 value 属性-->
<input type="number" name="age" min="18" value="18"><br>
<!-- 单选按钮, 注意 checked 属性 -->
性别：<br>
<input type="radio" name="gender" value="male" checked> 男<br>
<input type="radio" name="gender" value="female"> 女<br>
<input type="radio" name="gender" value="other"> 其它<br>
<!-- 下拉列表，注意 selected 属性 -->
党派：<br>
<select name="party">
<option value="D">民主党</option>
<option value="R" selected>共和党</option>
<option value="N">无党派</option>
</select><br>
<!-- 多选框 -->
您有哪些交通工具：<br>
<input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
<input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
<input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
<input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
<!-- 日期选择器 -->
您的工作日期：<br>
<input type="date"><br>
<!-- 文件选择器 -->
上传您的照片:<br>
<input type="file" name="photo"><br>
<!-- 文本输入区域，注意 rows 和 cols 属性 -->
您的建议：<br>
<textarea name="message" rows="5" cols="30">
The cat was playing in the garden.
</textarea><br><hr>
<!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
<input type="submit" value="提 交">
<input type="reset" value="重 置">
</form>
f、其他
1、内联元素及区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<h1>, <pre>, <ul>, <table>，<div> 等。
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <span>, <input>, <td>, <a>, <img>等。
2、预设格式
可以使用<pre></pre>来展示特定格式的文本，标签内的内容将保持格式不变
由于存在一些预设的特殊字符，会被浏览器误认为标签，因此如果想要正确显示，需要使用字符实体
<p>有多 远，滚 多远！</p>
<hr>
<h2>test.html</h2>
<pre>
<h1>这是个一级标题</h1>
<p>这是一个段落<p>
<a href="https://twitter.com/">眼见何事，情系何处，身处何方，心思何人</a>
<pre>
效果图：
字符实体可以在以下网站查询到：
扫一扫
1796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
