文章目录
开发软件: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新增标签