HTML标签

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标记脚部区域的内容(用于整个页面或页面的一块区域)
sectionWeb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用(常用于侧边栏)
nav导航类辅助内容
<header>
    <p>头部区域</p>
</header>
<footer>
    <p>底部区域</p>
</footer>

HTML中的注释和特殊字符

  • 注释,快捷键 Ctrl + /
<!-- 注释:这是段落标签 -->
<p>一段文字</p>
  • 特殊字符
特殊符号字符实体
空格&nbsp;
大于(>)&gt;
小于(<)&lt;
引号(“)&quot;
版权符号(©)&copy;

表格标签

表格的基本结构

  • 表格是由指定数目的行和列组成的。
  • 单元格,单元个是表格的最小单位,一个或多个单元格纵横排列组成了表格。
  • 行,一个或多个单元格横向堆叠即形成了行。
  • 列,由于表格的单元格的宽度必须一致,因此但单元格纵向排列即形成了列。
<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>
  • 在需要合并的第一个单元格中设置跨列或跨行属性。

表单属性

属性属性值描述
alignleft、center、right规定表格相对周围元素的对齐方式
border1或""规定表格单元是否拥有边框,默认为"",表示没有边框
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>
  • 常用属性
属性属性值作用
methodget、post发送表单数据的方式
actionurl地址向何处发送表单数据
name名称用于指定表单的名称,以区分同一个页面中多个表单域

表单元素

  • <input> 标签实现了向表单添加文本框、提交按钮、重置按钮的功能。

  • <input>元素的常用属性

属性说明
type元素类型:text、password、checkbox、radio、submit、reset、file、image和button,默认为text
name定义input元素的名称
value规定input元素的值
placeholder设置提示的文本
size元素的宽度,当type为text或password时
maxlengthtype为text或password时,输入的最大字符数
checkedtype为radio或checkbox时,指定按钮是否被选中
  • type属性的值
属性值描述作用
text文本框用于输入单行文本信息
password密码框在特殊情况下,用户希望输入的数据被隐藏。在密码框输入的字符全部以黑色实心的圆点来显示
checkbox复选框复选框允许用户选择多个选项。
radio单选按钮单选按钮用于一组相互排斥的值,组中的每个单选按钮控件应具有相同的名称,用户一次只能选中一个单选按钮
submit提交按钮提交按钮用来提交表单信息。
reset重置按钮重置按钮用来清除表单中已填的信息。
file文件域文件域的作用是实现文件的选择。通常应用于文件上传。
image图像形式的提交按钮图像形式的提交按钮用来提交表单信息。
button普通按钮普通按钮主要用来响应onclick事件。
hidden隐藏的输入字段定义隐藏信息,同表单一起提交
email邮箱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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhouqing_meng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值