（记录用）相关HTML知识学习总结
HTML简介+开发工具
HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面即所谓的网页。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。
HTML通常搭配CSS以及JavaScript一同使用，前者负责页面的表现，后者负责网页的功能和行为。
HTML以及 CSS（Cascading Style Sheets 级联式样式表) 和 JS（JavaScript）是构建Web程序的三剑客。
推荐开发工具：VS Code （VS Code 官网）
其他开发工具：高级文本编辑器(SublimeText)，Dreamweaver，AdobeEdge，WebStorm等。
开发插件（推荐安装）：Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence、Open in live server等。
推荐搭配Chrome浏览器使用，快速稳定。
360，QQ，百度浏览器等只适合新手入门加快上手使用！
HTML组成
基本组成：元素（elements）
HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。其中，< html > < /html > 元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
HTML 标记包含一些规定的 “元素” 如 < head >，< title >，< body >，< header >，< footer >，< article >，< section >，< p >，< div >，< span >，< img >，< aside >，< audio >，< canvas >，< datalist >，< details >，< embed >，< nav >，< output >，< progress >，< video > 等等。
元素
一个简单的元素如此构成：
<p>芜湖~起飞~~</p>
<!--其中<P>和</p>为元素的开始标签和结束标签-->
<!--中间的内容为元素的内容-->
<!--整体标签+内容的组成称为一个元素（element）-->
<!-- 为heml的注释标签 -->
<!-- 这个元素中的内容将被浏览器忽略 -->
空元素
元素之中也有特殊的存在：空元素 。这类元素只有一个开始标签而没有内容以及结束标签，比如< br >, < hr >, < input >, < img >, < a >等等。空元素的构成如下：
<!-- 换行 -->
<p>我可以<br>换行</p>
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>
< br >元素放在< p >元素内的形式我们称之为嵌套。
元素的属性
元素是有属性的，属性包含元素的额外信息且不会在浏览器中显示出来。
<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移到该字段上会出现该元素的属性</p>
<!-- 带属性的输入框 -->
<input type="text"><!-- text属性 输入的文本会正常显示 -->
<input type="password"><!-- password属性 输入的文本会变为* -->
属性必须包含以下三条：
- 属性与元素名称中间必须有一个空格，如果有多个属性则需要多个空格。
- 属性名称type后需要一个“=”符。
- 属性值由""号包含其中，如上述text以及password皆在其中。
结构组成：头（head）与身体（body）
由上述所知，页面的基本组成为元素（elements），因此我们的web页面的结构也由元素构成，其中最主要的三个元素为< html > < /html >，< head > < /head >，< body > < /body >。
最简单的web页结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>你好</title>
</head>
<body>
<h1>我的第一个Web页</h1>
<p>由头和身体组成</p>
</body>
</html>
非常的简单对吧，简单到整个HTML由7个元素（html，head，meta，title，body，h1，p）组成。其中< html > < /html >元素包含其他的所有元素，为整个html文件的根元素，其他所有元素都被包含其中。而heml元素内部包含了head和body元素构成我们html的身体结构。我们在将我们的内容填充至head，以及body标签中，这样便形成了我们的html文件，并在浏览器中显示出来。
head元素
< head >标签用于定义文档的头部，是所有头部元素的容器。
< head >中的元素可以：
- 引用脚本
- 提示浏览器在某位置找到样式表
- 提供元信息
等等功能。
绝大部分的头部文档包含的信息都不会真正作为内容显示给读者。
以下标签可以包含在head中：< base >,< link >,< meta >,< script >,< style >,< title > 。
其中 < title > 的作用是定义文档的标题，它是 head 部分中唯一 必须元素。
body元素
< body >元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
body元素的组成将会在下一节详细介绍。
其他元素
标题（heading）元素
HTML一共提供从大到小的六级标题，依次是< h1 >，< h2 >，< h3 >，< h4 >，< h5 >，< h6 >。
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<h7>我是标题7</h7>
<hr> #分割线
我是标题7
</body>
一个页面的标题非常重要：搜索引擎使用标题来索引页面的内容。
注意：不能因为希望醒目而对标题文字进行放大或加粗。文字和样式的修饰将由HTML三剑客中的CSS完成。
h1用作主标题（意味着最重要的），其实h2才是。。（emmmmm。。。）
虽然h1至h6的显示样式从大到小，但是 记忆HTML标签的显示样式是没有意义的
图片（img）元素
img元素的作用便是标记一个图片。全称为image。
img元素的属性可以有src，alt，title等
- src指定的图片地址可以为网址或本地地址。格式为png、jpg和gif。
- alt=“图片加载失败时显示的内容”，该属性可用于支持搜索引擎。
- 如果没有指定width和height则显示图片默认高宽。只要指定图片的一个高值或宽值，图片将等比拉伸。
代码结构如下：
<body>
<img src="img/1.jpg" title="这是一个美女" alt="图片被怪兽吃掉了" width="200px" >
</body>
提示： 对于小尺寸的图片，现在可采用 base64 编码进行，可提高页面加载速度，提升用户体验。 图片的存储大小对网页的加载有重要的影响，从而影响用户体验。因此，在不明显改变图片质量的情况下压缩图片是提高 Web站点速度的重要手段
文件路径
为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。
| 例子 | 解释 |
|---|---|
| < img src=“picture.jpg” > | 该图片文件与当前文档在同一目录中 |
| < img src="./images/picture.jpg" > | 该图片文件在当前目录下的images目录中 |
| < img src="…/picture.jpg" > | 该图片文件在上一级目录中 |
超链接（a）元素
超链接元素用来标记一个内容为超链接，全称为anchor，即 锚。基本上，我们可以给任何元素加上超链接，超链接的存在使得万维网出现。
代码结构如下：
<body>
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
</body>
其中：
- href 为跳转的网络地址 URL（Uniform Resorce Locator）
- _blank属性表示新建页面打开该超链接
- 超链接标签包含的内容，此处为“百度一下”，供用户点击。
超链接中的假链接：
- 假链接即为点击之后不会跳转的链接
- 在企业开发初期，跳转的其他页面尚未完成，不知道跳转到哪里时，只能用假链接作为代替。
- 定义格式：
1、href="#" :会自动回到网页的顶部
2、href=“javascript:” ：不会返回顶部
表格（table）与列表（list）元素
有时，页面的内容需要用表格来进行呈现。我们可以使用< 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>
< tr >表示行, < td >表示行中的单元, < th >是表头的单元（将会加粗显示）
同理，当我们需要列表时，我们也可以使用列表标签来呈现内容，列表分为无序列表和有序列表。
无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
表单（Form）元素
表单元素通常用来获取用户相关信息以及意见等，例子代码如下：
<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>
当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。
其他HTML的有关元素远不止于此，我仅在此总结常用元素标签及其相关的一部分知识。
总结
HTML是本学期接触的一门新语言，它并不是一种程序语言，而是一种标记语言，对于该语言的学习将有助于未来对前端后端开发的深度研究。
2455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
