Document

通俗易懂之快速入门HTML

2024-03-26
dfer
210
html 前端 CSDN

一、HTML学习

1.1 认识HTML

1.1.1 HTML(HTML5+CSS3)

Hyper Text Markup Language 超文本标记语言

超文本包括：文字、视频、音频、动画等等
标记：指标签

1.1.2 W3C

World Wide Web Consortium 万维网联盟（官网）

W3C标注包括：

结构化标准语言：（HTML、XML）

表现标准语言：（CSS）

行为标准：（DOM、ECMAScript）

1.2 HTML使用

1.2.1 HTML基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

1.2.2注释

<!--DOCTYPE:告诉浏览器，我们要用什么样的规范-->
<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta是描述性标签，表述网站的信息-->
    <meta charset="UTF-8">
    <!--title标签代表网页标题标签-->
    <title>Title</title>
</head>
<!--body标签代表网页主体-->
<body>
    
</body>
</html>

1.2.3 网页基本标签

1.2.3.1 标题标签

代码如下：

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

这是标题 1

这是标题 2

这是标题 3

这是标题 4

这是标题 5

这是标题 6

1.2.3.2 段落标签

代码如下：

<p>
    变幻万千的光影秀、充满赛博朋克风格的沉浸式互动投影、
    全息媒体打造的沉浸直播平台……<span style="font-size: x-large">冬奥会首钢赛区</span>，
    从巍巍华夏史到奥运冰雪梦，在科技的加持下都得到全景化、沉浸式地呈现。
</p>
<p>
    基于物联网构建出多元数字孪生模型及智能管理系统，
    综合打造出大尺度、低功耗、强体验的园区。从能适应天气等外部条件变化
    与场景模式变化的公共设施，到低能耗、强交互、一束花的夜景“光乐园”，
    再到基于5G、物联网、多模态交互直播系统等技术支撑的未来体验空间与直播体验中心。
</p>
<p>
    冬奥会是让世界更多了解中国文化的窗口和中国文化走向世界
    的宝贵契机，清华大学工物系钟茂华团队承担的项目是一个囊括了科技、
    传播、语言、文化等多种元素为一体的综合项目，
    它以冬奥赛事多模态资源聚合、跨模态内容生成与检索关键技术、大数据聚合分析等技术为抓手，打造了冬奥赛事全球传播数据融合与资源库，将冬奥传播议题一网打尽，为冬奥会的全球传播提供重要支撑，为全球观众和媒体提供综合了解冬奥赛事以及中国文化的平台。特别的是，该平台还提供多语种翻译功能，帮助各国记者及时把握最新冬奥赛事热点、让全球观众用自己的母语随时了解冬奥最新进展，让冬奥讯息、冬奥故事“唾手可得”！
</p>
<p>
    北京冬奥会三个赛区的分布面临着空间跨度大、保障线路长、天气情况多变等现实问题，再加上疫情防控需要，导致信息共享和指挥协同难度更高。对此，该项目设计了一个能够帮助冬奥运行指挥部门完成科学判断与决策的“冬奥大脑”。
    团队研发出的冬奥会态势感知与运行指挥保障系统，能汇聚八方信息，并展开智能分析，
    实现更早发现问题、查找风险，并以情景推演的模式给出对策参考，
    成为运行名副其实的指挥核心枢纽
</p>

变幻万千的光影秀、充满赛博朋克风格的沉浸式互动投影、全息媒体打造的沉浸直播平台……冬奥会首钢赛区，从巍巍华夏史到奥运冰雪梦，在科技的加持下都得到全景化、沉浸式地呈现。

基于物联网构建出多元数字孪生模型及智能管理系统，综合打造出大尺度、低功耗、强体验的园区。从能适应天气等外部条件变化与场景模式变化的公共设施，到低能耗、强交互、一束花的夜景“光乐园”，再到基于5G、物联网、多模态交互直播系统等技术支撑的未来体验空间与直播体验中心。

冬奥会是让世界更多了解中国文化的窗口和中国文化走向世界的宝贵契机，清华大学工物系钟茂华团队承担的项目是一个囊括了科技、传播、语言、文化等多种元素为一体的综合项目，它以冬奥赛事多模态资源聚合、跨模态内容生成与检索关键技术、大数据聚合分析等技术为抓手，打造了冬奥赛事全球传播数据融合与资源库，将冬奥传播议题一网打尽，为冬奥会的全球传播提供重要支撑，为全球观众和媒体提供综合了解冬奥赛事以及中国文化的平台。特别的是，该平台还提供多语种翻译功能，帮助各国记者及时把握最新冬奥赛事热点、让全球观众用自己的母语随时了解冬奥最新进展，让冬奥讯息、冬奥故事“唾手可得”！

北京冬奥会三个赛区的分布面临着空间跨度大、保障线路长、天气情况多变等现实问题，再加上疫情防控需要，导致信息共享和指挥协同难度更高。对此，该项目设计了一个能够帮助冬奥运行指挥部门完成科学判断与决策的“冬奥大脑”。团队研发出的冬奥会态势感知与运行指挥保障系统，能汇聚八方信息，并展开智能分析，实现更早发现问题、查找风险，并以情景推演的模式给出对策参考，成为运行名副其实的指挥核心枢纽

1.2.3.3 换行标签

<body>
<!-- 换行标签 -->
这是一行文字 <br/>
这是下一行文字
</body>

1.2.3.4 水平线标签

<p>
    变幻万千的光影秀、充满赛博朋克风格的沉浸式互动投影、
    全息媒体打造的沉浸直播平台……<span style="font-size: x-large">冬奥会首钢赛区</span>，
    从巍巍华夏史到奥运冰雪梦，在科技的加持下都得到全景化、沉浸式地呈现。
</p>
<p>
    基于物联网构建出多元数字孪生模型及智能管理系统，
    综合打造出大尺度、低功耗、强体验的园区。从能适应天气等外部条件变化
    与场景模式变化的公共设施，到低能耗、强交互、一束花的夜景“光乐园”，
    再到基于5G、物联网、多模态交互直播系统等技术支撑的未来体验空间与直播体验中心。
</p>
<p>
    冬奥会是让世界更多了解中国文化的窗口和中国文化走向世界
    的宝贵契机，清华大学工物系钟茂华团队承担的项目是一个囊括了科技、
    传播、语言、文化等多种元素为一体的综合项目，
    它以冬奥赛事多模态资源聚合、跨模态内容生成与检索关键技术、大数据聚合分析等技术为抓手，打造了冬奥赛事全球传播数据融合与资源库，将冬奥传播议题一网打尽，为冬奥会的全球传播提供重要支撑，为全球观众和媒体提供综合了解冬奥赛事以及中国文化的平台。特别的是，该平台还提供多语种翻译功能，帮助各国记者及时把握最新冬奥赛事热点、让全球观众用自己的母语随时了解冬奥最新进展，让冬奥讯息、冬奥故事“唾手可得”！
</p>
<p>
    北京冬奥会三个赛区的分布面临着空间跨度大、保障线路长、天气情况多变等现实问题，再加上疫情防控需要，导致信息共享和指挥协同难度更高。对此，该项目设计了一个能够帮助冬奥运行指挥部门完成科学判断与决策的“冬奥大脑”。
    团队研发出的冬奥会态势感知与运行指挥保障系统，能汇聚八方信息，并展开智能分析，
    实现更早发现问题、查找风险，并以情景推演的模式给出对策参考，
    成为运行名副其实的指挥核心枢纽
</p>
<hr/>

1.2.3.5 字体样式标签

<font>标签控制网页中文本的样式，如字体、字号和颜色。

<font>标签的基本语法格式如下：<font 属性="属性值">文本内容</font> </font>

我是默认样式的文本<br />
<font face="微软雅黑" size="7" color="green"><br />
我是7号绿色文本，我的字体是微软雅黑哦</font>

标签控制网页中文本的样式，如字体、字号和颜色。

标签的基本语法格式如下：<font 属性=“属性值”>文本内容

我是默认样式的文本

我是7号绿色文本，我的字体是微软雅黑哦

1.2.3.6 特殊符号

特殊符号： > &lt ; ©

空            格:
<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:
<br/>
&gt;
&lt;
<br/>
&copy;版权所有

1.2.3.7 图像标签

要想在HTML网页中显示图像就需要使用图像标签。
标签基本语法格式如下：<img src="图像URL" alt="图片名称" title="悬停文字" />

上述的语法中，src属性用于指定图像文件的路径，属性值可以是绝对路径，也可以是相对路径(推荐使用)，它是标签的必需属性。

注意：…/表示上一级目录

<body>
显示图片：<img src="../resourse/image/ru.png" alt="国旗图片" title="国旗" width="200px" height="100px" >
</body>

1.2.3.8 链接标签

页面链接：从一个页面跳转到另一个页面

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

在新窗口打开：
<a href="demo3.html" target="_blank">段落标签学习</a><br />
在原窗口打开：
<a href="https://www.baidu.com" target="_self">
    <img src="../resourse/image/百度.png" alt="百度链接" title="百度链接" width="246px" height="109px" >
</a>

锚标记：<a name="top">顶部</a>
<br/>
<p><img src="../resourse/image/rs.png" alt="国旗图片" title="国旗" width="298px" height="200px" ></p>
跳转到标记：<a href="#top">回到顶部</a>

功能性连接：邮件链接（mailto）、QQ链接

<a href="mailto:gyujieii@126.com">点击联系我</a>
<br/>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1767205807&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:1767205807:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>

1.2.3.9 行内元素和块元素

块元素
- 无论内容多少，该元素独占一行
- （p、h1-h6…）
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- （span、a、strong、em…）

1.2.4 列表

1.2.4.1 什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。

1.2.4.2 列表分类

无序列表
注意：
标签用于定义无序列表，
标签嵌套在
标签中，用于描述具体的列表项，每对
中至少应包含一对
。

软件学院学科

<ul>
    <li>web前端</li>
    <!-- 指定type属性值 ,disc为默认值-->
    <li type="disc">JAVA</li>
    <li type="square">PHP</li>
    <li type="circle">.NET</li>
</ul>
<hr/>

web前端
JAVA
PHP
.NET

<ol>
    <li>python</li>
    <li>web</li>
    <li>数据库</li>
    <li>java</li>
</ol>
<hr/>

有序列表

python
web
数据库
java

自定义列表(dt:列表标题，dd是具体的内容)

<body>
<dl>
    <dt>红色 </dt>
    <dd>是光谱的三原色和心理四色之一</dd>
    <dd>代表着吉祥、喜庆、火热、幸福、豪放、
        斗志、革命、轰轰烈烈、激情澎湃等</dd>
    <dt>绿色</dt>
    <dd>是自然界中常见的颜色</dd>
    <dd>绿色有无公害，健康的意思</dd>
</dl>
</body>

应用范围：
无序列表：导航、侧边栏……
有序列表：试卷、问答……
定义列表：公司网站底部……

1.2.5 表格

表格的特点：
- 简单通用
- 结构稳定
基本结构：***
- 单元格 table
- 行：tr
- 列：td
- 跨行：rowspan
- 跨列：colspan
  
  简单的表格案例：

 <table border="1px" align="center">
       <tr>
         <td colspan="5">冬天奥奖牌统计</td>
        </tr>
        <tr>
            <td>国家</td>
            <td>金牌</td>
            <td>银牌</td>
            <td>铜牌</td>
            <td>总计</td>
        </tr>
        <tr>
            <td>中国</td>
            <td>4</td>
            <td>3</td>
            <td>1</td>
            <td>8</td>
        </tr>
        <tr>
            <td>美国</td>
            <td>5</td>
            <td>5</td>
            <td>1</td>
            <td>11</td>
        </tr>
        <tr>
            <td>挪威</td>
            <td>8</td>
            <td>3</td>
            <td>6</td>
            <td>17</td>
        </tr>
        <tr>
            <td>欧盟</td>
            <td>8</td>
            <td>5</td>
            <td>1</td>
            <td>14</td>
        </tr>
        <tr>

    

            <td>4</td>
            <td>6</td>
            <td>4</td>
            <td>14</td>
        </tr>

    </table>

在这里插入图片描述

高级操作（合并单元格）

<hr/>
<table border="1px" align="center">
   <tr align="center">
       <td colspan="5">东奥奖牌统计</td>
   </tr>
    <tr>
        <td>国家</td>
        <td>金牌</td>
        <td>银牌</td>
        <td>铜牌</td>
        <td>总计</td>
    </tr>
    <tr>
        <td>中国</td>
        <td>4</td>
        <td>3</td>
        <td>1</td>
        <td>8</td>
    </tr>
    <tr>
        <td>美国</td>
        <td>5</td>
        <td>5</td>
        <td>1</td>
        <td>11</td>
    </tr>
    <tr>
        <td>挪威</td>
        <td>8</td>
        <td>3</td>
        <td>6</td>
        <td>17</td>
    </tr>
    <tr>
        <td rowspan="2">欧盟</td>
        <td>8</td>
        <td>5</td>
        <td>1</td>
        <td>14</td>
    </tr>
    <tr>

        <td>4</td>
        <td>6</td>
        <td>4</td>
        <td>14</td>
    </tr>
</table>

在这里插入图片描述

1.2.6 视频和音频

1.2.6.1 视频元素video

注意：controls表示控制条，autoplay表示自动播放

<hr/>
<p>
    变幻万千的光影秀、充满赛博朋克风格的沉浸式互动投影、
    全息媒体打造的沉浸直播平台……<span style="font-size: x-large">冬奥会首钢赛区</span>，
    从巍巍华夏史到奥运冰雪梦，在科技的加持下都得到全景化、沉浸式地呈现。
</p>
<video src="../resourse/audio/china.mp4" controls autoplay height="500px" width="1000px"></video>
</body>

1.2.6.2 音频元素audio

音频元素<audio>是HTML5中引入的一个新元素，用于在网页上嵌入音频内容。通过这个元素，开发者可以方便地在网页上播放音频文件，并控制音频的播放、暂停、循环等。

一些常用的重要属性：

autoplay：如果设置了该属性，音频将在页面加载后自动播放。
controls：如果设置了该属性，浏览器将提供一个包含播放、暂停和音量控制等功能的控制面板。
loop：如果设置了该属性，音频将循环播放。
src：用于指定音频文件的URL。
muted：如果设置了该属性，音频将默认静音。
preload：这个属性用于设置音频的预加载策略，它可以是"none"（不预加载）、“metadata”（仅加载元数据）或"auto"（浏览器自行决定）。

此外，<audio>元素还可以包含多个<source>子元素，每个<source>元素指定一个不同的音频文件。浏览器将按照<source>元素的顺序尝试加载和播放音频，直到找到一个支持的格式为止。

注意：虽然<audio>元素提供了在网页上嵌入音频的功能，但不同的浏览器可能对音频格式的支持有所不同。因此，在提供音频文件时，最好提供多种格式以确保最大的兼容性。

1.3 页面结构分析

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

1.4 iframe内联框架

语法格式：

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

案例：内联BiLiBiLi视频

<p>B站</p>
<iframe src="//player.bilibili.com/player.html?aid=808673534&bvid=BV1q34y127hD&cid=500432883&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<hr/>

在这里插入图片描述

点击该视频即可跳转至你需要的视频中。

案例：通过name标识跳转内联框架

<iframe src="https://music.qq.com" name="" width="1200px" height="400px"></iframe>
<hr/>
<a href="demo3.html" target="tarG">点击跳转</a> 
<hr/>
<iframe src="" name="tarG" width="1200px" height="200px"></iframe>

通过下面的例子来说明name的作用:

假设你有两个 iframe，一个用来显示视频，另一个用来显示广告。你想通过点击一个按钮来在视频 iframe 中加载新的视频。

不使用 name 属性：

如果你没有给 iframe 设置 name 属性，那么你需要通过其他方式来引用它，比如通过它的 DOM 位置（这通常比较麻烦，尤其是在复杂的页面布局中）。

使用 name 属性：

给 iframe 设置 name 属性后，你可以很容易地通过 JavaScript 引用它。

HTML 部分：

<iframe name="videoFrame" src="initial_video.html" width="500" height="300"></iframe>  
<button onclick="loadNewVideo()">加载新视频</button>

JavaScript 部分：

function loadNewVideo() {  
    var videoFrame = document.getElementsByName('videoFrame')[0];  
    videoFrame.src = 'new_video.html';  
}

在这个例子中，当点击按钮时，JavaScript 会找到名为 “videoFrame” 的 iframe，并更改其 src 属性，从而加载新的视频。

此外，name 属性还可以用在表单的 target 属性中，以便在特定的 iframe 中显示表单提交后的结果。例如：

<form target="videoFrame" action="submit_video.php" method="post">  
    <!-- 表单内容 -->  
</form>

这样，当用户提交表单时，结果会显示在名为 “videoFrame” 的 iframe 中。

1.5 表单

1.5.1 初识表单post和get提交

表单语法：

form标签属性：

method：规定如何发送表单数据
- get方式提交：可以在url中看到提交的信息，不安全，高效
- post方式提交：比较安全，传输大文件
action：表示向何处发送表单数据，可以是网站，也可以是一个请求处理地址

input标签：

type：指定元素的类型。（默认为text）
- text：文本输入框
- password：密码框
- checkbook：多选框
  - 选项的name需要一致。（即：在同一个组）
- radio：单选框
  - 必须指定一个值。
  - 选项的name需要一致。（即：在同一个组）
- submit：提交按钮
- reset：重置按钮
- file：文件域
- image：图片按钮
- button：普通按钮
name：指定表单元素的名称。（必填）
value：元素的初始值。
size：指定表单元素的初始宽度。
- 当type为text或password时，表单元素的大小以字符为单位。
- 对于其他类型，宽度以像素为单位。
maxlength：type为text或password时，输入的最大字符数。
checked：type为radio或checkbox时，指定按钮是否被选中。
readonly：设置文本框为只读
disabled：禁用
hidden：隐藏（用于传递默认值）
placeholder：输入框提示信息
autocomplete：type为text时，指定是否提示原来输入过的内容。
required：非空判断
pattern：正则表达式

<form method="post" action="demo1.html">
    <p>用户名：<input type="text" name="username" ></p>
    <p>密 码：<input type="password" name="passwd" ></p>
    <p><input type="submit">
        <input type="reset">
    </p>
</form>

1.5.2 单选框&多选框

单选框

<p>性&nbsp;别：
        <input type="radio" value="girl" name="sex">女
        <input type="radio" value="boy" name="sex">男
    </p>

在这里插入图片描述

<p>性&nbsp;别：
        <input type="radio" value="girl" name="sex">女
        <input type="radio" value="boy" name="sex">男
    </p>

多选框

<p>爱&nbsp;好：
    <input type="checkbox" value="game" name="hobby">游戏
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="swim" name="hobby">游泳
    <input type="checkbox" value="run" name="hobby">慢跑
</p>

在这里插入图片描述

1.5.3 按钮

<p>按&nbsp;钮：
    <input type="button" name="btn1" value="获取验证码">
    <input type="image" src="../resourse/image/icon1.png" width="50px" height="50px">
</p>

在这里插入图片描述
注意：我这个src下没有这个照片，所以加载不出来。

1.5.4 下拉框/列表框

<p>国&nbsp;家：
    <select name="列表名称">
        <option value="china">中国</option>
        <option value="US">美国</option>
        <option value="eth">瑞士</option>
        <option value="india">印度</option>
    </select>
</p>

在这里插入图片描述

1.5.5 文本域

<p>反&nbsp;馈：
    <textarea name="textarea" cols="50" rows="9">文本内容</textarea>
</p>

在这里插入图片描述

1.5.6 文件域

<p>文&nbsp;件：
   <input type="file" name="files"/>
   <input type="button" value="上传" name="upload">
</p>

在这里插入图片描述

1.5.7 简单验证

<p>邮&nbsp;箱：
    <input type="email" name="email">
</p>
<p>网&nbsp;址：
    <input type="url" name="url">
</p>
<p>年&nbsp;龄：
    <input type="number" name="num" max="150" min="0" step="1">
    <!--max:输入字段的最大值 min:输入字段的最小值 step:定义了输入字段的合法值之间的间隔，也就是步长-->
</p>

在这里插入图片描述

1.5.8 滑块

<p>音&nbsp;量：
    <input type="range" name="voice" max="100" min="0" step="2">
</p>

在这里插入图片描述

1.5.9 搜索框

<p>搜&nbsp;索：
    <input type="search" name="search">
</p>

在这里插入图片描述

1.6 表单应用

表单属性的应用

隐藏域(hidden)
只读（readonly）
禁用(disabled)

1.6 表单初级验证

思考？为什么要进行表单初级验证

减轻服务器压力，保证数据安全

常用方式

placeholder(提示信息)

required（非空判断）

<form method="post" action="demo1.html">
    <p>用户名：<input type="text" name="username" value="admin" maxlength="8" size="30" required ></p>
    <p>密&nbsp;码：<input type="password" name="passwd" placeholder="请输入密码"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

在这里插入图片描述

pattern(正侧表达式)使用input标签自带的一些判断属性，如：

常用的正则表达式可以去搜索现成的模板：

https://www.jb51.net/tools/regexsc.htm

上一篇：第07章 HTML表

下一篇： php 快速入门（一