文章目录
HTML
超文本标记语言(Hyper Text Markup Language,HTML也译为超文本标签语言是创建Web页面的基础。
HTML是用来描述网页的一种语言,是一种超文本标记语言。HTML不是一种语言。
HTML由一套标记标签(Markup Tag)组成。
HTML基本结构标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<p>网页内容</p>
</body>
</html>
-
标签以“<>”开始、以“</>”结束。要求成对出现,标签之间有缩进。
HTML的基本结构分为头部(head)和主体(body)两部分。头部包括网页标题(title)等基本信息,主体包括网页的内容信息,如图片、文字等。 -
<!DOCTYPE html>
:DOCTYPE声明,用于约束HTML文档结构,DOCTYPE声明必须位于HTML文档的第一行。 -
lang语言种类
- en定义为英语
- zh-CN定义为中文
-
<title>
标签:<title>
标签用于描述网页的标题。 -
<meta>
标签:`标签用于描述网页的摘要信息。- charset=“UTF-8”:表示字符集编码,设置编码为UTF-8
VSCode插件
-
open in browser插件:可以右键使用浏览器打开HTML页面。
-
Auto Rename Tag:自动重命名配对的HTML/XML标签
HTML常用标签
标题标签
标题标签表示一段文字的标题或主题,并且支持多层次的内容结构。HTML提供了六级标题 <h1>~<h6>
,并赋予了标题一定的外观,所有标题字体加粗,<h1>
字号最大,<h6>
字号最小。
<h1>标题1</h1>
段落标签和换行标签
<p>…</p>
段落标签表示一段文字等内容。
<br/>
换行标签表示强制换行,没有结束标签。
<h1>标题</h1>
<br/>
<p>网页内容</p>
水平线标签
<hr/>
水平线标签表示一条水平线,没有结束标签
字体样式标签
-
<strong>
或者<b>
标签可以让字体变粗。 -
<em>
或者<i>
标签可以让文字倾斜。 -
<del>
或者<s>
标签可以添加删除线 -
<ins>
或者<u>
标签可以添加下划线
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
<div>
和 <span>
标签
<div>
和 <span>
是没有语义的,它们就是一个盒子,用来装内容的。
<div>
<span>文字</span>
<p>一段文字</p>
</div>
图像标签
<img src="log.png" alt="一张log图片" title="log" width="100px" height="100px"/>
- src= 图片地址
- alt= 图像的替代文字
- title= 鼠标悬停提示文字
- width= 图片宽度
- height= 图片高度
超链接标签
超链接包含两部分内容:一是链接地址,二是链接文本或图像。
<a href="http://www.baidu.com" target="_blank">进入百度</a>
-
href:链接地址的路径。
-
target:指定链接在哪个窗口打开,常用的取值有
_self
(自身窗口)和_blank
(新建窗口)。 -
链接地址分为绝对路径和相对路径。
-
绝对路径:指向目标地址的完整描述,一般指向本站点外的文件。
-
相对路径:相当于当前页面的路径,一般指向本站点内的文件。
-
站内使用相对路径时常用到两个特殊符号:“…/“表示当前目录的上级目录;”…/…/“表示当前目录的上上级目录。
-
-
当超链接href链接路径为“#“时,表示空链接,重新加载。
-
下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件。
-
锚点链接:点击链接可以快速定位到页面中的某个位置
- 目标位置
<h1 id="top">标题</h1>
- 链接
<a href="#top">跳到顶部</a>
- 目标位置
HTML5的视频元素
- HTML5中的video元素是用来播放视频文件的,支持Ogg(Ogg vorbis的简写)、MPEG4、WebM等视频格式。
<video src=”视频路径” controls=”controls”></video>
- src属性:用于指定要播放的视频文件的路径。
- controls属性:用于提供播放、暂停和音量控件。
- 还可以使用width和height属性设置视频的宽度和高度。
- source元素:用来链接到不同的音频文件,浏览器会自动选择第一个可以识别的格式。
HTML5的音频元素
- HTML5中的audio元素是用来播放音频文件的,支持Ogg、MP3、WAV等音频格式。
<audio src=”音频路径” controls=”controls”></audio>
HTML5的结构元素
元素名 | 描述 |
---|---|
header | 标记头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
<header>
<p>头部区域</p>
</header>
<footer>
<p>底部区域</p>
</footer>
HTML中的注释和特殊字符
- 注释,快捷键
Ctrl + /
<!-- 注释:这是段落标签 -->
<p>一段文字</p>
- 特殊字符
特殊符号 | 字符实体 |
---|---|
空格 | |
大于(>) | > |
小于(<) | < |
引号(“) | " |
版权符号(©) | © |
表格标签
表格的基本结构
- 表格是由指定数目的行和列组成的。
- 单元格,单元个是表格的最小单位,一个或多个单元格纵横排列组成了表格。
- 行,一个或多个单元格横向堆叠即形成了行。
- 列,由于表格的单元格的宽度必须一致,因此但单元格纵向排列即形成了列。
<table cellspacing="0" cellpadding="20" border="1">
<thead>
<tr>
<th>姓名</th><th>性别</th><th>年龄</th>
<tr/>
</thead>
<tbody>
<tr>
<td>张三</td><td>男</td><td rowspan="2">20</td>
</tr>
<tr>
<td>李四</td><td>男</td>
</tr>
</tbody>
</table>
<table>
:表格标签<tr>
:行标签,可以有多行<th>
:用于创建表格标题<td>
:单元格标签,可以有多个单元格。- 设置
<table>
标签的边框border边框属性来指定边框的宽度。
表格的跨行和跨列
- 表格的跨列
<tr>
<td colspan=”所跨的列数”>单元格内容</td>
</tr>
- 表格的跨行
<tr>
<td rowspan=”所跨的行数”>单元格内容</td>
</tr>
- 在需要合并的第一个单元格中设置跨列或跨行属性。
表单属性
属性 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或"" | 规定表格单元是否拥有边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width> | 像素值或百分比 | 规定表格的宽度 |
表格结构标签
- 为了更好的表示表格的语义,可以将表格分割成表格头部和表格主体两大部分。
<thead>
标签:表格的头部区域<tbody>
标签:表格的主体区域
列表标签
- 列表是信息资源的一种展示形式。
- 列表可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者更快捷地获得相应的信息。
- 列表可分为三种类型:无序列表、有序列表、定义列表。
无序列表
- 无序列表由
<ul>
标签和<li>
标签组成。使用<ul>
标签作为无序列表的声明,使用<li>
标签作为每个列表项的起始。
<ul>
<li>第一项</li>
<li><p>第二项</p></li>
<li><div>第三项</div></li>
</ul>
-
<ul>
标签里面只能嵌套<li>
标签,不能嵌套其他标签, -
<li>
标签里面可以嵌套任意标签。 -
无序列表的特性:
- 没有顺序,每个
<li>
标签独占一行(块元素)。 - 默认
<li>
标签项前面有个实心小圆点。 - 一般用于无序类型的列表,如导航、侧边栏新闻、有规律的图文组合模块等。
- 没有顺序,每个
有序列表
-
有序列表由
<ol>
标签和<li>
标签组成。使用<ol>
标签作为有序列表的声明,使用<li>
标签作为每个列表项的起始。 -
有序列表的特性:
- 有顺序,每个 <li> 标签独占一行(块元素)。
- 默认 <li>标签项前面有顺序标记。
- 一般用于排序类型的列表,如试卷、问卷选项等。
<ol>
<li>第一项</li>
<li><p>第二项</p></li>
<li><div>第三项</div></li>
</ol>
定义列表
-
定义列表是一种特殊的列表形式,它是标题及列表项的结合。使用
<dl>
标签作为列表的开始,使用<dt>
标签作为每个列表项的起始,每个列表项的定义使用<dd>
标签。 -
定义列表的特性:
- 没有顺序,每个
<dt>
标签、<dd>
标签独占一行(块元素)。 - 默认没有标记。
- 一般用于一个标题有一个或多个列表项有多个标题的情况。
- 没有顺序,每个
<dl>
<dt>标题一</dt>
<dd>第一项</dd>
<dd>第二项</dd>
<dt>标题二</dt>
<dd>第一项</dd>
<dd>第二项</dd>
</dl>
表单标签
表单的组成
- 表单就是一个将用户信息组织起来的容器。将需要用户填写的内容放置在表单容器中,当用户单击“提交”按钮时,表单会将数据统一发送给服务器。
- 在HTML中,一个完整的表单通常由 表单域、表单控件(也称表单元素) 和 提示信息 3个部分组成。
- 表单域 是一个包含表单元素的区域。
在HTML标签中,<form>
标签用于定义表单域,以实现用户信息的收集和传输。
<form>
会把它范围内的表单元素信息提交给服务器。
- 表单域 是一个包含表单元素的区域。
<form action="demo.html" method="get" name="login">
<p>账号:<input type="text" name="uname"/></p>
<p>密码:<input type="password" name="password"/></p>
<p><input type="submit" value="提交"/><input type="reset" value="重填"/></p>
</form>
- 常用属性
属性 | 属性值 | 作用 |
---|---|---|
method | get、post | 发送表单数据的方式 |
action | url地址 | 向何处发送表单数据 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中多个表单域 |
表单元素
-
<input>
标签实现了向表单添加文本框、提交按钮、重置按钮的功能。 -
<input>
元素的常用属性
属性 | 说明 |
---|---|
type | 元素类型:text、password、checkbox、radio、submit、reset、file、image和button,默认为text |
name | 定义input元素的名称 |
value | 规定input元素的值 |
placeholder | 设置提示的文本 |
size | 元素的宽度,当type为text或password时 |
maxlength | type为text或password时,输入的最大字符数 |
checked | type为radio或checkbox时,指定按钮是否被选中 |
- type属性的值
属性值 | 描述 | 作用 |
---|---|---|
text | 文本框 | 用于输入单行文本信息 |
password | 密码框 | 在特殊情况下,用户希望输入的数据被隐藏。在密码框输入的字符全部以黑色实心的圆点来显示 |
checkbox | 复选框 | 复选框允许用户选择多个选项。 |
radio | 单选按钮 | 单选按钮用于一组相互排斥的值,组中的每个单选按钮控件应具有相同的名称,用户一次只能选中一个单选按钮 |
submit | 提交按钮 | 提交按钮用来提交表单信息。 |
reset | 重置按钮 | 重置按钮用来清除表单中已填的信息。 |
file | 文件域 | 文件域的作用是实现文件的选择。通常应用于文件上传。 |
image | 图像形式的提交按钮 | 图像形式的提交按钮用来提交表单信息。 |
button | 普通按钮 | 普通按钮主要用来响应onclick事件。 |
hidden | 隐藏的输入字段 | 定义隐藏信息,同表单一起提交 |
邮箱 | email类型的input元素是一种专门用于输入Email地址的文本框,email在提交表单时会自动验证email文本框的值。如果不是一个有效的邮箱地址,则不允许提交表单 | |
url | 网址 | url类型的input元素提供用于输入URL地址这类特殊文本的文本框,在提交表单时,如果输入的内容不是URL地址格式的文本,则不允许提交表单 |
number | 数字 | number类型的input元素提供用于输入数字的文本框,可以对接收的数字进行限制,包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果输入的数字不在限定范围之内,则会出现错误提示 |
- form表单示例
<form action="demo.html" method="get" name="login">
<p><label for="uname">账号:</label><input type="text" name="uname" id="uname" placeholder="请输入手机号" maxlength="11"/></p>
<p><label for="password">密码:</label><input type="password" name="password" id="password" placeholder="请输入密码"/></p>
<p><label for="email">邮箱:</label><input type="email" name="email" id="email" placeholder="请输入邮箱"/></p>
<p>性别:
<label for="man">男</label><input type="radio" name="sex" value="man" id="man" checked/>
<label for="woman">女</label><input type="radio" name="sex" value="woman" id="woman"/>
</p>
<p>爱好:<label for="basketball">篮球</label><input type="checkbox" name="likes" id="basketball" value="basketball"/>
<label for="football">足球</label><input type="checkbox" name="likes" id="football" value="football"/>
<label for="volleyball">排球</label><input type="checkbox" name="likes" id="volleyball" value="volleyball"/>
</p>
<p>城市:
<select name="city">
<option value="广东" selected>广东</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
</p>
<P>
<label for="code">验证码:</label><input type="text" name="code" id="code" maxlength="6"/>
<input type="button" value="获取验证码"/>
</P>
<p><label for="url">网址</label><input type="url" name="url" id="url"/> </p>
<p><label for="number">请输入数字:</label><input type="number" name="number" id="number" value="0" max="100" min="0" step="1"/></p>
<p><label for="file">上传头像:</label><input type="file" id="file" name="file"/></p>
<p>
自我介绍:<textarea name="textarea" cols="20" rows="4" placeholder="请简单介绍一下自己"></textarea>
</p
<input type="hidden" value="admin" name="usercode"/>
<p><input type="submit" value="提交"/><input type="reset" value="重填"/></p>
</form>
<label>
标签为input元素定义标注(标签)。- 对表单元素进行标注,是为了增强鼠标的可用性。当用户使用鼠标单击标注的文本内容时,浏览器会自动将焦点转移到与该标注相关的表单元素上。
select下拉表单元素
- 列表框的目的主要是使用户快速、方便、正确地选择一些选项,并且可以节省页面空间。它是通过
<select>
标签和<option>
标签来实现的。 - size属性确定列表中可同时看到的行数。
- selected属性表示该选项在默认情况下是被选中的,一个列表框中只能有一个列表项默认被选中。
textarea文本域元素
- 使用场景:当用户输入的内容较多的情况下,我们就不能使用文本框表单了,我们可以使用
<textarea>
标签。 - 在表单元素中,
<textarea>
标签是用于定义多行文本输入的控件。 - cols=“显示的列数”
- rows=“显示的行数”
表单的只读和禁用设置
- 只读场景:网站服务器方不希望用户修改的数据,这些数据往往在表单元素中显示。如注册或交易协议、商品价格等。
- 禁用场景:只有满足某个条件后,才能选用的某项功能。
- 只读通过设置readonly属性来实现。
- 禁用通过设置disabled属性来实现。
<p><input type="text" name="name" value="张三" readonly/>
<input type="button" name="update" value="修改" disabled/>
</p>