HTML

最新推荐文章于 2023-10-09 11:34:46 发布

Zengyh_

最新推荐文章于 2023-10-09 11:34:46 发布

阅读量597

点赞数 1

本文链接：https://blog.csdn.net/Zengyh_/article/details/101529401

版权

HTML

HTML是用来描述网页的一种语言，它是一种超文本标记语言，是由一套标记标签(Markup Tag)组成的。目前最新版本的HTML是HTML5 。

HTML5的优势

1.世界知名浏览器厂商对HTML5的支持(微软、GOOgle、苹果、Opera、Mozilla)

2.市场的需求(统一的互联网通用标准)

3.跨平台(打开浏览器即可访问应用)

W3C标准

由于早期各浏览器之间互不兼容，导致 HTML 编码规则混乱，违背了 HTML 发明的初衷，因此诞生了W3C标准。

W3C标准不是某一个标准，而是一系列的标准集合，一个网页主要由三部分组成，即结构(Structure)、表现(Presentation)和行为(Behavior)，这三部分分别对应三种非常常用的技术，HTML、CSS、JavaScript，HTML 用来决定结构和内容，CSS 用来设定网页的表现样式，JavaScript 用来控制网页的行为。

HTML5文件

HTML 的基本语法：

<标记>内容</标记>

HTML5 的基本结构分为两部分，整个HTML 包括头部 (head) 和主体 (body) 两部分，头部包括网页标题 (title) 等基本信息，主体包括网页的内容信息，如图片、文字等，如图：

在这里插入图片描述

网页的基本信息

1.DOCTYPE 声明

约束 HTML 文档结构，检验是否符合相关的 Web 标准，同是告诉浏览器，使用哪种规范来解释这个文档中的代码。必须位于 HTML 文档的第一行。

2.<title>标签

使用<title>标签描述网页的标题。

3.<meta>标签

使用该标签描述网页的摘要信息，如文档内容类型、字符编码信息等等，内容并不会显示，其目的是方便浏览器解析或利于搜索引擎搜索，如：

<head>
    <meta charset="UTF-8"/>
</head>

属性：charset 表示字符集编码，常用的编码有以下几种：

gb2312	简体中文，一般用于包含中文和英文的页面。
ISO-885901	纯英文，一般用于只包含英文的页面。
big5	繁体，一般用于带有繁体字的页面。
UTF-8	国际性通用的字符编码，同样适用于中文和英文的页面，和gb2312编码相比国际通用性更好

基本标签

1.标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

注意：所有标题字体默认加粗，其中<h1>字号最大，<h6>字号最小。

2.段落标签和换行标签

<p>
    正文<br />
</p>

其中<p>表示一个段落，<be/>表示换行。

3.水平线标签

顾名思义，水平线标签<hr/>表示一条水平线，如

<h1>标题</h1>
<hr/>
<p>正文</p>

效果运行图：
在这里插入图片描述

4.字体样式标签

<strong>内容<strong>
<em>内容1</em>

<strong>标签不但能让字体加粗，实际上<strong>标签还有一个更重要的"身份"，它是一个带有语义化的标签。它有强调、加强语气的作用。

<em>标签表示字体倾斜。

5.注释和特殊符号

HTML 中的注释是为了方便代码阅读和调式，和Java注释一样，当浏览器遇到注释会自动忽略注释内容，语法：

<!--注释内容-->

由于大于号 (>) 、小于号 (<) 等已作为 HTML 的语法符号，所有要在页面中显示出来，就要使用相应的 HTML 代码表示，这些特殊符号对应的 HTML代码被称为字符实体。 HTML中常用的特殊符号及其对应的字符实体，如：

特殊符号	字符实体
空格	&nbsp
大于号 (>)	&gt
小于号 (<)	&lt
引号 (’’)	&quot
版权符号 (©)	&copy

注意：这些实体符号都已 ”&“ 开头，以 “;” 结束。

图像标签

使用比较多的图像格式有四种，即 JPG 格式、GIF 格式、 BMP 格式、 PNG 格式，语法：

<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />

其中，src 表示图片的路径，alt 属性指定的替代文本，表示图像无法显示时(如图片路径错误或网速太慢等) 替代显示的文本，title属性可以提供额外的提示或帮助信息，当鼠标移至图片上时显示提示信息，width 和 height 两个属性分别表示图片的宽度和高度。

超链接标签

超链接常用来设置到其他页面的导航链接，语法：

<a href="链接地址" target="目标窗口位置">链接文本或图像</a>

href：表示链接地址的路径。

target：指定链接在哪个窗口打开，常用的取值有_self (自身窗口)、_blank (新建窗口)。

超链接可以是文本链接，也可以是图像超链接。

根据链接地址是指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径：

1.绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。列如：

<a href="http://www.sohu.com/index.html">搜狐</a>

2.相对路径：相对于当前页面的路径，一般指向本站点内的文件，所以一般不需要一个完整的 URL 地址形式。例如：

<a href="login/login.html">登录</a>

表示链接地址为当前页面所在路径的 login 目录下的 login.html 页面。

注意：使用相对路径时常用到两个特殊符号："…/" 表示当前目录的上级目录，"…/…/" 表示当前目录的上上级目录。

超链接的分类

根据超链接的应用场合，可以把链接分为三类：

1.页面间链接

页面间链接就是从一个页面链接到另外一个页面。

2.锚链接

锚链接常用于目标页内容很多，需定位到目标页内容中的某个具体位置时。

第一步：在页面的乙位置设置标记，语法：

<a name="marker">目标位置乙</a>

name 为<a>标签的属性，marker 为标记名。

第二步：设置甲位置链接路径 href 属性值为 “#标记名”，语法：

<a href="#marker">当前位置甲</a>

如果要实现不同页面间的锚链接，即从A页面甲位置跳转到B页面乙位置，如上目标位置乙在 help.html 中，那么锚链接为：

<a href="help.html#marker">甲位置</a>

3.功能性链接

功能性链接比较特殊，当单击该链接时不是打开某个网页，而是启动本机自带的某个应用程序，如网上常见的电子邮箱、QQ、MSN 等链接。如电子邮箱链接为例：

[<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>]

行内元素和块元素

行内元素特性：宽度由自己内容决定，其他的元素可以排在它后面，如 strong 元素、a 元素等。

块元素特性：不管自身内容多少，都独占一行，如 p 元素、h1 元素等。

列表、表格与媒体元素

无序列表

由<ul>标签和<li>标签组成，使用<ul>标签作为无序列表的声明，使用<li>标签作为每个列表项的起始，语法：

<ul>
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
</ul>

注意：遵循W3C标准，<ul>标签里面只能嵌套<li>标签，不能嵌套其他标签，<li>标签里面可以嵌套任意标签。

无序列表的特性：

1.没有顺序，每个<li>标签发独占一行(块元素)。

2.默认<li>标签项前面有个实心小圆点。

3.一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。

有序列表

有序列表由<ol>标签和<li>标签组成，使用<ol>标签作为有序列表的声明，使用<li>标签作为每个列表项的起始，有序列表嵌套同无序列表一样，只能<ol>标签里嵌套<li>标签，语法：

<ol>
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
</ol>

有序列表的特性：

1.有顺序，每个<li>标签独占一行 (块元素)。

2.默认<li>标签项前面有顺序标记。

3.一般用于排序类型的列表，如试卷、问卷选项等。

定义列表

定义列表是一种很特殊的列表形式，它是标题及列表项的结合，它使用<dl>标签发作为列表的开始，使用<dt>标签作为每个列表项的起始，而对于每个列表项的定义则使用<dd>标签来完成，语法：

<dl>
    <dt>标题一</dt>
    <dd>第1项</dd>
    <dd>第2项</dd>
    <dt>标题二</dt>
    <dd>第1项</dd>
</dl>

定义列表的特性：

1.没有顺序，每个<dt>标签，<dd>标签独占一行(块元素)。

2.默认没有标记。

3.一般用于（一个标题下有一个或多个列表项）*n的情况。

列表总结

1.无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容。有序列表会依据列表项的顺序进行显示。

2.在实际的网页应用中，无序列表比有序列表应用得更加广泛，有序列表 ol-li 一般用于显示带有顺序编号的特定场合。

3.定义列表一般适用于带有标题和标题解释性内容的场合。

表格

表格是块状元素，发明该标签的初衷是用于显示表格数据。

使用表格的优势：1.简单通用，2.结构稳定，语法：

<table>
    <tr>
    	<th>第1个单元格的内容</th>
        <th>第2个单元格的内容</th>
        ...
    </tr>
    <tr>
		<th>第1个单元格的内容</th>    
        <th>第2个单元格的内容</th>
        ...
    </tr>
</table>

创建表格一般分为四部：

第一步：创建表格标签<table>…</table>。

第二步：在表格标签<table>…</table>里创建行标签<tr>…</tr>，可以有多行。

第三步：在第一行标签<tr>…</tr>里创建单元格标签<th>…</th>，用于创建表格标题。

第四步：在行标签<tr>…</tr>里创建单元格标签<td>…</td>，可以有多个单元格。

为了显示表格的轮廓，一般还需要设置<table>标签的 border 边框属性，指定边框的宽度。

跨行与跨列

跨列是值单元格的横向合并，语法：

<table>
    <tr>
    	<td colspan="所跨的列数">单元格内容</td>
    </tr>
</table>

col 为 column （列）的缩写，span 为跨度，所以 colspan 的意思为跨列。

跨行是值单元格在垂直方向上的合并，语法：

<table>
	<tr>
		<td rowspan="所跨的行数">单元格内容</td>
	</tr>
</table>

row 为行的意思，rowspan 即跨行。

视频元素

之前 Web 上的视频播放从来都没有一个固定的标准，不同的浏览器往往拥有不同的插件，在 HTML5 中的 video 元素是现在播放视频的一种标准方法，语法：

<video src="视频路径" controls="controls"></video>

src 属性是指定要播放的视频文件的路径，controls 属性用于提供播放、暂停和音量控件，还可以使用 width 和 heigth 设置视频的宽度和高度。

注意：在 video 中虽然可以使用 src 属性链接视频路径，可是只能链接一种格式的视频，很难让每种浏览器都支持这种格式（不同浏览器支持的视频格式不同），所以我们就可以使用 source 元素来解决这一问题，语法：

<video controls>
	<source src="视频路径"/>
    <source src="视频路径"/>
    ...
</video>

使用 source 元素来链接到不同的视频文件，浏览器会自动选择第一个可以识别的格式。

音频元素

在 HTML5 中的 audio 元素是用来播放音频文件的，支持 Ogg、MP3、WAV等音频格式，语法：

<audio src="音频路径" controls="controls">你的浏览器不支持</audio>

从语法中，我们可以发现视频元素和音频元素的语法及使用都一样，音频元素同样要使用 source 元素用来链接到不同的音频文件，浏览器会自动选择第一个可以识别的格式。

结构元素

在 HTML5 中几个具有语义化的结构元素来划分网页结构，如：

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航栏辅助内容

<iframe> 框架

<iframe src="引用页面地址" name="框架标识名" ...></iframe>

表单

表单是一个将用户信息组织起来的容器，表单的应用是比较常见的，如：

1.登录、注册：登录时填写用户名、密码，注册时填写用户名、电话等个人信息。

2.网上订单：在网上购买商品，一般要求填写姓名、联系方式、付款方式等信息。

3.调查问卷：回答对某些问题的看法，以便形成统计数据，方便分析。

4.网上搜索：输入关键字，搜索想要的可用信息。

在 HTML5 中，使用<form>标签来实现表单的创建，该标签用于在网页中创建表单区域，属于容器标签，其他表单标签需要在它的范围内才有效，<form>有两个常用的属性，action 和 method 。

action ：表示提交的地址。

method：提交的方式，get / post。

get 和 post 两种提交方式的区别：

1.post 方法提交方式不会改变地址栏状态，表单数据不会被显示。

2.使用 get 方法提交方式，地址栏状态会发生变化，表单数据会在 URL 信息中显示。

基于以上两点区别，post 方法提交的数据安全性明显高于 get 方法提交数据。

表单元素

在用户注册时，需要输入很多注册的信息，而装载这些数据的控件，就称为表单元素。我们可以使用<input>标签实现功能。<input>标签中有很多属性，以下是一些常用属性如：

属性	说明
type	此属性指定表单元素的类型。
name	此属性指定表单元素的名称。
value	此属性是可选属性。
size	此属性指定表单元素的初始宽度。
maxlength	此属性指定可在 text 或 password 元素中输入的最大字符数
checked	此属性用于指定按钮是否是被选中。

文本框

在表单中最常用、最常见的表单输入元素就是文本框（text）,例：

<input type="text" value="" name="fname"/>

密码框

输入密码时避免被他人得到，这时候就需要密码框来实现，在密码框输入的字符全都以黑色实心的圆点来显示，例：

<input type="password" name="pwd" size="22"/>

注意：密码框仅仅只能使周围的人看不见输入的符号，不能保证输入的数据安全。

单选按钮

单选按钮用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称，用户一次只能选中一个单选按钮，例：

<form method="post" action="">
    性别：
    <input name="sex" type="radio" value="男"/>男
    <input name="sex" type="radio" value="女"/>女
</form>

如果希望在页面加载时，单选按钮有一个默认的选项，那么可以使用 checked 属性，例：

<input name="sex" type="radio" value="男" checked/>男

复选框

复选框与单选按钮有些类似，只不过复选框允许用户选中多个选项。复选框的类型是 checkbox，例：

<form method="post" action="">
    爱好：
    <input type="checkbox" name="interest" value="sports"/>运动
    <input type="checkbox" name="interest" value="talk"/>聊天
    <input type="checkbox" name="interest" value="play"/>玩游戏
</form>

与单选按钮一样，复选框也可以设置默认选项，同样使用 checked 属性进行设置。例：

<input type="checkbox" name="cb1" value="sports" checked/>运动

列表框

列表框的目的主要是使用用户快速、方便、正确地选择一些选项，并且节省页面空间。它是通过<select>标签和<option>标签来实现的，语法：

<select name="指定列表名称" size="行数">
    <option value="可选项的值" selected="selected">...</option>
    <option value="可选项的值">...</option>
</select>

<select>标签用于显示可供用户选择的列表框，每个选项由一个<option>标签表示，<select>标签必须至少包含一个<option>标签。其中 size 属性确定列表中可同时看到的行数，selected 属性表示该选项在默认情况下是被选中的，一个列表有且只有一个列表项默认被选中。

按钮

在 HTML5 中按钮分为三种，分别是普通按钮（button）、提交按钮（submit）和重置按钮（reset），普通按钮主要用来响应 onclick 事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填的信息，语法为：

<input type="reset" name="Reset" value="重填"/>

其中，type=“button” 表示普通按钮；type=“submit” 表示提交按钮；type=“reset” 表示重置按钮。name用来给按钮命名，value用来设置显示在按钮上的文字。

按钮的作用：

reset 按钮：用户单击该按钮后，无论表单中是否已经填写或输入数据，表单中各个表单元素都会被重置到最初状态，而填写或输入的数据将被清空。
submit 按钮：用户单击该按钮后，表单将会提交到 action 属性所指定的 URL ，并传递表单数据。
button 按钮：属于普通按钮，需要与事件关联使用。

多行文本域

当需要在页面中输入两行或两行以上的文本时，应该使用多行文本框，它的标签是<textarea>，语法：

<textarea name="textarea" cols="显示的列数" rows="显示的行数">
	文本内容
</textarea>

其中，cols 属性用来指定多行文本框的列的宽度，rows 属性用来指定多行文本框的行数，在<textarea>…<textarea>标签对中不能使用 value 属性来赋初始值。

文件域

文件域的作用是用于实现文件的选择，在应用时只需把 type 属性设为 file 即可，例：

<form action="" method="post" enctype="multipart/form-data">
    <p> <input type="file" name="files"/><br/>
        <input type="submit" name="upload" value="上传" /></p>
</form>

运行效果图

在这里插入图片描述

邮箱

email 类型的 input 元素是一种专门用于输入Email 地址的文本框，与上面表单元素不同的是 email 在提交表单的时候自动验证 email 文本框的值，如果不是一个有效的邮箱地址，则该输入不允许提交表单。例：

<form action="" method="post">
    <p>
        邮箱：
        <input type="email" name="email" />
    </p>
    <input type="submit" />
</form>

运行效果图：

在这里插入图片描述

网址

url 类型的 input 元素提供用于输入URL地址这类特殊文本的文本框，提交表单时如果输入的内容不是URL地址格式的文本，将不允许提交表单，例：

<form action="" method="post">
    <p>
        请输入你的网址：
        <input type="url" name="userUrl" />
    </p>
    <input type="submit" />
</form>

运行效果图

在这里插入图片描述

数字

number 类型的 input 元素提供用于输入数字的文本框。我们还可以对所接收的数字进行限制，包括规定允许的最大值和最小值，合法的数字间隔或默认值等，如果所输入的数字不在限定的范围之内，则会出现错误提示，例：

<form action="#" method="post">
    <p>
        请输入数字：
        <input type="number" name="num" min="0" max="100" step="10" />
    </p>
    <input type="submit" />
</form>

运行效果图

在这里插入图片描述

滑块

range 类型的 input 元素提供用于输入包含一定范围内的数字值的文本框，在网页中显示为滑动条，例：

<form action="#" method="post">
    <p>
        请输入数字：
        <input type="range" name="range1" min="0" max="10" step="2" />
    </p>
    <input type="submit" />
</form>

运行效果图

在这里插入图片描述

搜索框

search 类型的 input 元素提供用于输入搜索关键词的文本框，例：

<form action="#" method="post">
    <p>
        请输入搜索的关键词：
        <input type="search" name="sousuo" />
        <input type="submit" value="Go" />
    </p>
</form>

运行效果图
在这里插入图片描述

表单的隐藏域

将 type 属性设置为 hidden 隐藏类型即可创建一个隐藏域。例：

<form action="" method="get">
    <p>用户名：<input name="name" type="text"/></p>
    <p>密码：<input name="pass" type="password"/></p>
    <p><input type="submit" value="提交"/></p>
    <p><input type="hidden" value="666" name="userid"/></p>
</form>

将表单的提交方式改为 get 方法，单击提交按钮，可以从地址栏中查看到隐藏域的数据，如图：

在这里插入图片描述

只读与禁用

只读：网站服务器方不希望用户修改的数据，这些数据在表单元素中显示。

禁用：只有满足某个条件后，才能选用某项功能。

<form action="" method="get">
    <p>用户名：<input name="name" type="text" value="张三" readonly/></p>
    <p>密码：<input name="pass" type="password"/></p>
    <p><input type="submit" value="修改" disabled/></p>
</form>

运行效果图：

在这里插入图片描述

其中，用户名采用了默认设置的方式，且无法进行修改。"修改"按钮则采用了禁用的设置，按钮呈浅色显示，表示无法使用。

表单元素的标注

对表单元素进行标注，这样做的目的就是为了增强鼠标的可用性。如果当用户使用鼠标单击标注的文本内容时，浏览器会自动将焦点转移到与该标注相关的表单元素上。为表单元素进行表注释时，需要使用<label>标签，语法：

<label for="表单元素的id">标注的文本</label>

运行以下代码：

<form>
    请选择性别：
    <label for="male">男</label>
    <input type="radio" name="gender" id="male" />
    <label for="female">女</label>
    <input type="radio" name="gender" id="female" />
</form>

运行效果图：

在这里插入图片描述

表单验证

表单验证的好处：

1.减轻服务器的压力。

2.保证数据的可行性和安全性。

注：在客户端对表单进行验证是非常有必要的。

表单初级验证的方法

1.placeholder

placeholder 属性用于为 input 类型的文本框提供一种提示（hint），在输入为空时显示，当在文本框中写入内容时消失。例：

<form action="#" method="post">
    <p>
        请输入搜索的关键词：
        <input type="search" name="sousuo" placeholder="请输入要搜索的关键字" />
        <input type="submit" value="Go" />
    </p>
</form>

运行效果图：

在这里插入图片描述

2.required

required 属性用于规定文本框填写内容不能为空，否则不允许用户提交表单，例：

<form action="#" method="get">
    <p>
        用户名：
        <input type="text" name="username" required />
        <input type="submit" value="提交" />
    </p>
</form>

运行效果图：

在这里插入图片描述

3.pattern

pattern 属性用于验证input 类型文本框中用户输入的内容是否与自定义的正则表达式相匹配，例：

<form action="#" method="post">
    <p>
        电话号码：
        <input type="text" name="tel" required pattern="^1[358]\d{9}" />
        *以13、15、18开头的11位数字
        <br />
        <input type="submit" value="提交" />
    </p>
</form>

运行效果图：
在这里插入图片描述

HTML5 的内容就介绍到这，谢谢观看！

Zengyh_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML

HTMLHTML是用来描述网页的一种语言，它是一种超文本标记语言，是由一套标记标签(Markup Tag)组成的。目前最新版本的HTML是HTML5 。HTML5的优势1.世界知名浏览器厂商对HTML5的支持(微软、GOOgle、苹果、Opera、Mozilla)2.市场的需求(统一的互联网通用标准)3.跨平台(打开浏览器即可访问应用)W3C标准由于早期各浏览器之间互不兼容，导致 H...
复制链接

扫一扫