文章目录
开发软件：VS Code
安装后，点击界面左侧第五个图标，推荐安装插件：Auto Close Tag（自动补全结束标签）、Auto Rename Tag（自动同步修改前后标签名）、Code Runner（快速运行代码）、IntelliSense for CSS（提供了CSS 类名补全）、Material Icon Theme（美化图标）、Open in Browser（把编辑的HTML文件等用浏览器打开，查看效果）、Path Intelligence（自动补全路径）、Live Sever（实时加载功能的小型服务器，实时预览 HTML）等。
一. 什么是HMTL
-
HTML(Hyper Text Markup Language，
超文本标记语言）是一门描述性语言，用于定义内容结构。简单来说，网页就是用HTML语言制作的。 -
HTML是构成Web的框架，与后面会学习的CSS(美化作用)，JavaScript(内部行为)共同构建一个网页。 -
任何网页背后都是一个 HTML 文档，只要在网页上点击
右击鼠标->“查看页面源代码”即可看到。
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
二. HTML文档结构
HTML基本构架
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
（1）HTML的基本标签
HTML 使用标签（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。
1. HTML标签
整个网页是从< html >开始，到< /html>结束。
2. HTML head 元素
| 元素 | 描述 |
|---|---|
| < head > | 定义文档的信息 |
| < title > | 设置页面的标题 |
| < base > | 定义页面链接标签的默认链接地址 |
| < link > | 定义一个文档和外部资源之间的关系 |
| < meta > | 定义HTML文档中的元数据 |
| < script > | 定义客户端的脚本文件 |
| < style > | 定义HTML文档的样式文件 |
3. HTML主体内容
< body >< body/>: 网页中显示的实际内容均包含在这两个正文标记符之间。
| 元素 | 描述 |
|---|---|
| < h1 >~< h6 > | 从大到小共有6级标题，< h1 >定义一级标题，< h2 >定义二级标题，以此类推 |
| < p > | 段落 |
| < div > | 分割（块元素） |
| < span > | 区域（行内元素） |
4. 空元素
一般来说，元素都有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常在此元素所在位置插入/嵌入一些东西，如< br >, < hr >, < input >, < img> , < a >等，称其为空元素。
| 元素 | 描述 |
|---|---|
| < br > | 换行 |
| < hr > | 水平分割线 |
| < input > | 输入框 |
| < img > | 图片 |
| < a > | 锚点，超链接 |
5.文本格式标签
| 元素 | 描述 |
|---|---|
| < mark > | 标记文本，突出显示的文本 |
| < del >、< s > | 删除文本 |
| < ins > | 插入文本 |
| < u > | 下划线（文本） |
| < small > | 小号字体 |
| < strong > | 加重字体 |
| < em > | 着重文字（斜体） |
| < i > | 斜体字 |
| < sup > | 上标字 |
| < sub > | 下标字 |
（2）小试一手
- 打开/新建一个文件夹TEST1，然后在该文件夹下新建一个后缀名为
html的文件brief.html
- 使用快捷键“
!+tab”，然后回车，即可得到HTML的框架:
- 在< title >< /title>里面输入浏览器的标题：Verse
- 在< body>< /body>里面中输入主体内容：
<h1>泰戈尔《飞鸟集》</h1>
<p><i>生命有如度过一重<mark>大海</mark> ,</i></p>
<p><del>Life is like a major sea through.</del></p>
<p><i>我们相遇在同一条窄船里.</i></p>
<p><s>we meet with a narrow boat lane.</s></p>
<p><ins><i>死时,我们同登彼岸,</i></ins></p>
<p><u>When he died,we join the trip,</u></p>
<p><strong><i>又向不同的世界各奔前程.</i></strong></p>
<p><em>and it has also learned a different world.</em></p>
<p><br></br></p>
<p><small>当前页面还有点丑：)</small></p>
注意：记得选中File -> Auto Save （自动保存代码）
- 右击鼠标“
Open In Default Browser”即可将该文件在浏览器中打开：
🧐tips：用特殊的记号< !--和- ->包括起来进行注释；输入Ctrl + /可快捷的进行注释。
（3）元素的属性
元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。
<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">
一个属性必须包含如下内容：
- 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
- 属性名称，后面跟着一个 = 号。
- 一个属性值，由一对引号 “” 引起来。
（4）HTML 超链接
- 没有超链接就没有万维网（World Wide Web），HTML 使用超级链接与网络上的另一个文档相连。
- HTML使用标签
< a >来设置超文本链接，在此标签中使用href属性来描述链接的地址。 - 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分。
1. 超链接语法
<a href="url">链接文本</a>
2. 实例
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
说明：
- href即为
要跳转去的地址URL（Uniform Resorce Locator)target属性为_blank，表示在新的页面打开超链接（默认是在当前页面打开即_self）- 超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的
3. 锚点
- 锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
- 先使用
id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
<h2 id="C4">第四章 这是一个锚点</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
注意：
- 元素的id值必须是
唯一的，即页面不能再有其它元素的id值为C4- 超链接中的地址需要有
#符号
（5）图片及文件路径 img
-
在 HTML 中，图像由
< img >标签定，用于在网页中嵌入图像。 -
< img > 是空标签，它只包含属性，没有闭合标签。
-
< img > 标签有两个必需属性:
src——为要显示图片文件的位置 URL，即指定图片文件的路径，文件路径有相对路径和绝对路径两种。
alt——用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
语法：
<img src="url" alt="some_text">
实例
<!-- 图片及文件路径，这个是相对路径img -->
<img src="../img/1524422414.jpg" alt="Water Lilies by Monet"width="500" height="400">
🧐tips：. 表示当前目录，. . 表示上一级目录
然后就能在网页看到图片：
（6）表格 Table
- 表格由
< table >标签来定义。
| 元素 | 描述 |
|---|---|
| < tr > | 定义表格的行 |
| < td > | 定义每行被分割的若干单元格 |
| < th > | 定义表头，将会加粗显示 |
其中的字母
td指表格数据（table data），即数据单元格的内容，数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
实例
<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>
网页显示如下:
（7）列表 List
HTML 支持无序、有序和自定义列表。
1. 无序列表
- 无序列表使用
< ul >标签。 - 每个列表项都以
< li >标签开始。 - 默认情况下，使用
实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
实例
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
网页显示如下:
2. 有序列表
- 有序列表使用
< ol >标签 - 每个列表项都以
< li >标签开始 - 默认使用
数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。
实例
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
网页显示如下:
3. 自定义列表
- HTML还支持描述列表，自定义列表不仅仅是一列项目，而是项目及其注释的组合。
- 自定义列表使用
< dl >标签。 - 每个自定义列表项以
< dt >开始。 - 每个自定义列表项的定义的描述以
< dd >开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
网页显示如下:
（8）表单 Form
- HTML 表单
< form >用于搜集不同类型的用户输入，输入类型是由type属性定义。 - HTML 表单包含表单元素。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。
表单元素
| 元素 | 描述 |
|---|---|
| < input > | 定义输入 |
| < textarea > | 定义文本域 (一个多行的输入控件) |
| < label > | 定义了 元素的标签，一般为输入标题 |
| < fieldset > | 定义了一组相关的表单元素，并使用外框包含起来 |
| < legend > | 定义了 < fieldset > 元素的标题 |
| < select > | 定义了下拉选项列表 |
| < optgroup > | 定义选项组 |
| < option > | 定义下拉列表中的选项 |
| < button > | 定义一个点击按钮 |
| < datalist > | 指定一个预先定义的输入控件选项列表 |
| < keygen > | 定义了表单的密钥对生成器字段 |
| < output > | 定义一个计算结果 |
1. 文本输入
文本输入通过< input type="text">来设定。
实例：
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
网页显示如下:
2. 密码字段
密码字段通过标签 < input type="password"> 来定义。
实例：
<form>
Password: <input type="password" name="pwd">
</form>
网页显示如下:
3. 单选按钮（Radio Buttons）
表单的单选框选项通过标签< input type="radio">来定义。
实例：
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
网页显示如下:
4. 复选框（Checkboxes）
- 复选框通过标签
< input type="checkbox">来定义。 - 复选框可以选取一个或多个选项。
实例：
<form>
<input type="checkbox" name="art" value="piano">我喜欢弹钢琴<br>
<input type="checkbox" name="art" value="violin">我喜欢拉小提琴<br>
<input type="checkbox" name="art" value="drum">我喜欢打架子鼓<br>
</form>
网页显示如下:
5. 提交按钮(Submit)
-
提交按钮通过标签
< input type="submit">来定义，将表单中的数据传输给服务器端进行处理。 -
重置按钮通过标签
< input type="reset">来定义，将表单中的数据取消。 -
表单的
action属性会对接收到的用户输入数据进行相关的处理。
<input type="submit" value="提 交">
<input type="reset" value="重 置">
网页显示如下:
6. 小试一手
- 新建一个文件form1.html，制作一个用户信息收集表
<br>
<!-- 文本框，注意有 placeholder 提示符 -->
用户名：<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></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></br>
<!-- 下拉列表，注意 selected 属性 -->
学历：
<select name="education">
<option value="A">本科</option>
<option value="B" selected>硕士</option>
<option value="C">博士</option>
</select>
<br></br>
<!-- 多选框 -->
您有哪些兴趣爱好：<br>
<input type="checkbox" name="hobby1" value="piano"> 弹钢琴<br>
<input type="checkbox" name="hobby2" value="painting" checked> 画画<br>
<input type="checkbox" name="hobby3" value="sing">唱歌<br>
<input type="checkbox" name="hobby4" value="dance"> 跳舞<br>
其它兴趣：<input type="text" name="other hobby"><br>
</br>
<!-- 日期选择器 -->
您的工作日期：
<input type="date"><br></br>
<!-- 文件选择器 -->
上传您的照片:
<input type="file" name="photo"><br></br>
<!-- 文本输入区域，注意 rows 和 cols 属性 -->
您的建议：<br>
<textarea name="message" rows="5" cols="30">
I hope...
</textarea><br><hr>
<!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
<input type="submit" value="提 交">
<input type="reset" value="重 置">
</form>
提示： 当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。
- 右击鼠标“
Open with Live Sever”即可将该文件以绝对地址在浏览器中打开：
- 复制上面的地址，并在
brief.html文件里写入代码：
这里需要收集用户信息：<a href="http://127.0.0.1:5500/form1.html" target="_blank">点击跳转至表单</a>
网页显示如下:
点击“点击跳转至表单”即可跳转至form1网页。
（9）HTML区块和内联元素
- HTML 的元素可以以区块或内联的方式进行显示。
- HTML 可以通过
< div >和< span >将元素组合起来。
1. 区块元素
区块元素在浏览器显示时，通常会以新行来开始和结束。如：< h1 >, < pre >, < ul >, < table >，< div > 等。
<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>
网页显示如下:
2. 内联元素
- 内联元素相反，它们总是一个接一个进行显示，不会新起一行。如：
< span >,< input >,< td >,< a >,< img >等。 - 注意: 内联元素不能包含块级元素！
<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>Hello Minnie!</span>
<a href="https://www.disney.cn/">Go To Disney</a>
<img src="../img/minnie.jpg">
网页显示如下:
（10）其它
1. 预设格式
- 如果想在网页中展示一首诗或一些特别格式的文本，使用
pre标签。 - pre标签中的内容将保持格式不变。
<pre>
我如果爱你——
绝不象攀援的凌霄花，
借你的高枝炫耀自己；
我如果爱你——
绝不学痴情的鸟儿，
为绿荫重复单调的歌曲；
也不止像泉源，
常年送来清凉的慰藉；
也不止像险峰，
增加你的高度，衬托你的威仪。
甚至日光。
甚至春雨。
不，这些都还不够！
我必须是你近旁的一株木棉，
作为树的形象和你站在一起。
根，紧握在地下，
叶，相触在云里。
每一阵风过，
我们都互相致意，
但没有人，
听懂我们的言语。
你有你的铜枝铁干，
像刀，像剑，
也像戟；
我有我红硕的花朵，
像沉重的叹息，
又像英勇的火炬。
我们分担寒潮、风雷、霹雳；
我们共享雾霭、流岚、虹霓。
仿佛永远分离，
却又终身相依。
这才是伟大的爱情，
坚贞就在这里：
爱——
不仅爱你伟岸的身躯，
也爱你坚持的位置，足下的土地。
</pre>
网页显示如下:
2. 特殊字符
特殊字符还可参考ISO-8859-1字符实体手册
考虑下面的代码将显示成什么？
<p>有多 远，滚 多远！</p>
或者你希望在页面显示一段 HTML 的源代码，你打算用标签< pre >:
<pre>
<h1>这是个一级标题</h1>
<p>这是一个段落<p>
<a href="https://twitter.com/">天下熙熙，皆为利来；天下攘攘，皆为利往。</a>
<pre>
以上代码将得不到你想要的结果。
原因是：在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
<p>有多 远，滚 多远！</p>
<hr>
<h2>test.html</h2>
<pre>
<h1>这是个一级标题</h1>
<p>这是一个段落<p>
<a href="https://twitter.com/">天下熙熙，皆为利来；天下攘攘，皆为利往。</a>
<pre>
网页显示如下:
3. 新增标签
最新的 HTML5 规范摒弃了一些不合适的标签，同时引入了一些有效率、表达明确的标签如： header、footer、section、article、aside、nav、main等
| 标签 | 描述 |
|---|---|
| header | 头部标签,和div一样的效果，但更具有语义性 |
| footer | 尾部标签 |
| section | 块级标签，定义文档某个区域 |
| article | 内容标签 |
| aside | 侧边栏标签 |
| nav | 导航标签 |
| main | 主要内容标签。高版本浏览器兼容；main能包含别的标签；只能在文中出现一次，且只能当别人的父元素 |
可以尝试做以下案例：
三. 总结
通过初步对HTML的学习，让我对网页的制作产生了浓厚的兴趣，期待后面CSS、JavaScript的学习，希望自己也能制作一个完整又漂亮的网页！
四. 参考资料
[1] https://www.w3schools.cn/html/html_attributes.asp
[2] https://www.runoob.com/html/html-formatting.html
[3]HTML新增标签
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
