HTML：HTML基础

HTML

1. 什么是 HTML?

Hyper Text Markup Language（超文本编辑语言）

超文本主要包括：文字、图片、音频、视频、动画等。

HTML5 是目前网页中常用的最新的版本，提供了一些新元素和新特性，同时也建立了一些新规则，被认为是互联网的核心技术之一。

2. 什么是 W3C 标准

World Wide Web Consortium（万维网联盟），又称 W3C理事会，是万维网的主要国际标准组织，同时也是 Web 技术领域最具权威和影响力的国际中立性技术标准机构。

W3C 标准包括三个方面

  • 结构化标准语言：HTML、XML
  • 表现标准语言：CSS
  • 行为标准语言：DOM、ECMAScript（即 JavaScript）

3. 常见的 IDEA

记事本、Dreamweaver、Intellij IDEA、VSCode、WebStorm、HBuilder 等等，在接下来的测试中使用 HBuilder 进行学习。

4. HTML 的基本结构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>

    </body>
</html>

  • <!DOCTYPE html> 声明为 HTML5 文档。

  • <html></html> 组成闭合标签，可以成为双标签元素，由开始标签（被括号包围的元素名） <html> 和结束标签（被括号包围的斜杠和元素名） </html>组成，部分 HTML 元素没有结束标签，比如 <br/> ，称为单标签元素。该 HTML 标签内的所有内容为完整的 HTML页面。

  • <head></head> 组成闭合标签，为网页的头部元素，包含文档的元数据，在网页界面中不显示内容。

  • <meta/> 单标签，也可以叫自闭和标签，提供页面的元信息，比如针对搜索引擎和更新频度的描述和关键词，位于文档的头部 <head></head>。自闭和标签中的斜杠可以省略。

  • <meta charset="utf-8" /> 定义网页的编码格式为 utf-8，防止在浏览器中出现中文乱码的问题。

  • <title></title> 定义网站的标题内容

  • <body></body> 组成闭合标签，为网页的主体元素，用来编辑网页界面中的内容。

5. 网页的基本标签

5.1 注释

<!-- 注释内容 --> 用于对代码进行注释，方便开发人员理解代码，被注释掉的内容不会出现在网页中，可以进行多行注释。

<!-- 单行注释 -->
<!--
多行注释1
多行注释2
-->

5.2 标题

由 h1-h6 元素标签定义标题，h1 标题最大，h6 标题最小。

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

运行结果

5.3 段落

HTML 不同于 Word、记事本等文本编辑软件，无法直接分段显示，可以通过使用 <p></p> 标签来定义段落。

<body>
    <!-- 无法直接分段显示 -->
    这是第一段文字
    这是第二段文字
    <p>这是第一段文字</p>
    <p>这是第二段文字</p>
</body>

运行结果

5.4 换行

HTML 不同于 Word、记事本等文本编辑软件，无法直接通过 Enter 换行键进行换行，可以通过使用 <br/> 标签进行换行。

<body>
    这是第一行文字<br />
    这是第二行文字<br>
    这是第三行文字
</body>

运行结果

可以发现换行的行间距和段落的行间距是不一样的。

5.5 水平线

可以通过使用 <hr/>标签进行换行，默认占网页的一整行长度，因此标签前后的文字会上下隔开。

<body>
    这是第一行文字<hr />
    这是第二行文字<hr>
    这是第三行文字
</body>

运行结果

5.6 字体样式

<strong></strong> 标签设置文字加粗，<em></em> 标签设置文字为斜体。

<body>
    <b>这是一种加粗文字</b><br />
    <strong>这是另一种加粗文字</strong>
    <br />
    <em>这是一行斜体文字</em>
</body>

运行结果

5.7 特殊符号

在 HTML 中，无论敲多少个空格键，在网页中都只显示一个空格位置，如果要定义多个空格，就需要用到空格的转义字符 &nbsp; 来代替。下面展示一些常用的转义字符，更多转义字符可以自行百度或者点 HTML特殊字符符号大全 查看

<body>
    普通空格：登    录<br>
    特殊空格：登&nbsp;&nbsp;&nbsp;&nbsp;录<br>
    小于号：&lt;<br>
    大于号：&gt;<br>
    & 用于显示其他特殊字符：&amp;<br>
    注册：&reg;<br>
    版权：&copy;<br>
    商标：&trade;
</body>

运行结果

5.8 图片

若要在网页中显示一张图片，可以使用 <img/>标签来实现，该标签中包含了一些常用的属性。

  1. 首先先在项目中添加一个文件夹，命名为 img 文件夹（如果使用的是一个单独的 html 文件，需要放在文件夹中）

  2. 在图片文件夹中添加一张图片

  3. 编写主体代码

    <body>
 <img src="img/demo1.jpg" alt="这是一张壁纸" title="壁纸图片" width="200px" height="auto" />
</body>

  4. 运行结果

<img/> 标签的一些常用属性的作用

  • src：定义图像的存放路径，可以使用相对路径和绝对路径

  • alt：图像的替代文字。如果因为某种原因（加载速度慢、路径错误等）导致图片无法正常显示，则会使用 alt 定义的文字去替代无法显示的图像

  • title：鼠标悬停图片时显示的一些提示文字

  • width、height：定义图像的宽和高，若不定义，则显示时默认显示原图像大小。像素（px）为长度单位，在网页中使用像素或相对长度单位（em）定义长度。如果只设置宽度，而不设置高度，或者高度值为 auto，意味高度随宽度大小进行自适应。

5.9 超链接

使用 <a></a> 双标签定义超链接，用于鼠标点击内容（可以是文字、图片或者其他内容）时从一个页面跳转到另一个页面。

<body>
    <a href="https://www.baidu.com">跳转到百度页面</a>
</body>

当鼠标点击“跳转到百度页面这几个字”，本页面将替换成百度页面。

如果有其他自定义的 html 页面，也可以跳转到其他自定义的页面，支持相对路径和绝对路径。

<a></a> 标签的一些常用属性的作用

  • href：链接指向的页面的地址或路径
  • target：定义打开链接的位置（若不定义，则点击时将当前页面替换为要跳转的目标页面），有四个特殊的值
    • _blank：在一个新打开的页面中加载跳转页面
    • _self：为默认跳转位置，相当于不定义 target 属性，点击时将当前页面替换为要跳转的目标页面。
    • _parent：加载父窗口或者框架集，如果是在窗口或者顶级框架中，则与 _self 等效。
    • _top：加载包含这个超链接的窗口。

拓展：<a></a> 标签可以进行单个页面之间的跳转（锚链接），当一个页面内容很多时，可以快速回到顶部或者其他内容的位置。

<body>
    <a name="top">这里是顶部</a>
    <img src="img/demo1.jpg" alt="这是一张壁纸" title="壁纸图片" />
    <img src="img/demo1.jpg" alt="这是一张壁纸" title="壁纸图片" />
    <img src="img/demo1.jpg" alt="这是一张壁纸" title="壁纸图片" />
    <img src="img/demo1.jpg" alt="这是一张壁纸" title="壁纸图片" />
    <a href="#top">跳转到顶部</a>
</body>

指定需要被锚点的标签定义有 id 或者 name 属性值，然后超链接的 href 属性值为 #+前者定义的属性值即可实现锚链接。

除了超链接和锚链接，<a></a> 标签还可以实现一些功能性链接。

邮件发送链接：<a href="mailto:xxx@qq.com">联系我</a>
QQ推广链接：<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=qq&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:qq:51" alt="点击向我发送QQ消息" title="点击向我发送QQ消息"/></a>

这里隐藏了我的一些个人信息，如有需要，邮件地址可以自行定义，QQ推广链接可以点击 QQ推广 申请。

5.10 列表

列表就是将一些清单、数据等信息按照从上往下的顺序排列。在 html 中，列表有三种形式（这里的 l 是 L 的小写，而非数字 1 或字母 I）

  • 有序列表：<ol></ol>
  • 无序列表：<ul></ul>
  • 自定义列表：<dl></dl>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>首先</li>
        <li>然后</li>
        <li>最后</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>默认样式</li>
        <li type="circle">空心圆点</li>
        <li type="square">实心方块</li>
        <li type="disc">无序列表的默认样式</li>
    </ul>
    <!-- 自定义列表，dt表示列表名称，dd表示列表内容 -->
    <dl>
        <dt>学科</dt>
        <dd>语文</dd>
        <dd>数学</dd>
        <dd>英语</dd>

        <dt>年级</dt>
        <dd>一年级</dd>
        <dd>二年级</dd>
        <dd>三年级</dd>
    </dl>
</body>

运行结果

5.11 表格

表格的基本元素有：单元格、表格的行、表格的列，同时呢也会存在合并行单元格、列单元格的结构。在 HTML 中，可以定义一系列的标签和属性来设计表格的结构，具体代码如下。

<body>
    <table border="1px">
        <tr>
            <td colspan="3">学生成绩表</td>
        </tr>
        <tr>
            <td rowspan="2">张三</td>
            <td>语文</td>
            <td>80</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>90</td>
        </tr>
        <tr>
            <td rowspan="2">李四</td>
            <td>语文</td>
            <td>100</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>95</td>
        </tr>
    </table>
</body>

一些标签和属性的具体作用为

  • <table></table> 标签：定义 HTML 表格。
  • border 属性：定义表格的边框长度，不定义则无边框。
  • <tr></tr> 标签：定义表格的行。
  • <td></td> 标签：定义表格的列。
  • colspan 属性：合并行单元格的数量。
  • rowspan 属性：合并列单元格的数量。

运行结果

5.12 媒体

使用 <video></video> 标签导入视频

使用 <audio></audio> 标签导入音频

需要在项目文件里提前准备一个视频和一个音频文件

<body>
    <video src="media/video/video.mp4" controls="controls" autoplay="autoplay" width="200" loop="loop" muted="muted"></video>
</body>

一些视频标签常用属性的作用（这些属性的值可定义也可不定义，若定义则值为其属性本身）

  • src：视频路径。
  • controller：用来显示播放、音量、下载、全屏等按钮。
  • autoplay：视频加载出来后直接自动播放。
  • loop：设置视频自动重复播放。
  • muted：设置视频静音播放。
  • width、height：设置播放视频的宽度和高度（若值为纯数字，则默认以像素为单位）。

运行结果

<body>
    <audio src="media/audio/张远-嘉宾.mp3" controls="controls"></audio>
</body>

音频常用的属性可以参考视频的常用属性

运行结果

5.13 表单及表单元素

表单是用来收集、提交用户的信息的一种格式，它包含了文本框、文本域、单选按钮、多选按钮、提交按钮、日期时间选择框、文件上传按钮、重置按钮等一些元素。接下来实现一下具体的效果。

<body>
    <!-- 使用 form 标签来定义表单
		action 为表单提交的页面路径或者请求地址
		method 为表单内容的提交方式 get|post，若选用 get 提交，则提交后的地址栏后面携带提交的内容，不安全，使用 post 则不会出现-->
    <form action="index.html" method="get">
        <!-- 以下标签中的 name 属性值为对应标签的名字，值可以自定义
		placeholder 为可输入的框添加提示信息-->
        <!-- maxlength 属性限制输入的字符长度，size 限制文本框的长度 -->
        <p>文本框：<input type="text" name="userName" placeholder="请输入用户名" maxlength="6" size="6" /></p>
        <p>密码框：<input type="password" name="userPwd" placeholder="请输入密码" /></p>
        <!-- rows 属性值定义一行显示的字符个数，cols 属性定义列数 -->
        <p>文本域：<textarea name="textarea" rows="5" cols="5" placeholder="请输入文字"></textarea></p>
        <!-- 单选按钮提交的数据为 value 属性的值，
		同一性质（都属于性别）的单选按钮（男和女）需要统一 name 属性值，值可以自定义
			checked 属性为该单选按钮默认为选中状态，可以只添加 checked 属性，不定义 checked 值
	-->
        <p>单选框：<input type="radio" name="sex" value="boy" checked="checked" />男
            <input type="radio" name="sex" value="girl" />女</p>
        <!-- 类似于单选框，多选框也需要绑定同一个 name 属性值，value 属性值为提交的数据 -->
        <p>多选框：<input type="checkbox" name="hobby" value="sing" checked="checked" />唱歌
            <input type="checkbox" name="hobby" value="dance" />跳舞
            <input type="checkbox" name="hobby" value="chess" />下棋</p>
        <p>日期选择：<input type="date" /></p>
        <p>日期时间选择：<input type="datetime-local" /></p>
        <p>文件上传：<input type="file" name="fileName" /></p>
        <!-- value 属性的值为提交的数据，select 属性定义默认被选择的项 -->
        <p>下拉列表：
            <select name="cource">
                <option value="语文">语文</option>
                <option value="数学" selected="selected">数学</option>
                <option value="英语">英语</option>
            </select></p>
        <!-- value 值为按钮上的文字说明 -->
        <p>自定义按钮：<input type="button" value="自定义按钮" /></p>
        <p>图片按钮：<input type="image" src="./img/demo1.jpg" width="100" /></p>
        <p>表单提交按钮：<input type="submit" /></p>
        <p>清空表单输入数据按钮：<input type="reset" /></p>
    </form>
</body>

运行结果

除了以上基本标签元素以外，HTML 还提供了一些特别的 type 属性值。

<body>
    <form action="index.html" method="get">
        <p>不允许为空：<input type="text" name="notnull" placeholder="不允许为空" required="required" /></p>
        <p>正则表达式：<input type="text" name="zhengze" placeholder="字母数字4-16位" pattern="/^[a-zA-Z0-9]{4,16}$/" /></p>
        <p>邮箱验证：<input type="email" name="email" placeholder="请输入正确的邮箱" /></p>
        <p>URL 地址：<input type="url" name="url" placeholder="请输入正确的地址" name="url" /></p>
        <!-- step 为步长，每次增加或者减少的数量 -->
        <p>数字验证：<input type="number" min="1" max="100" step="5" name="number" /></p>
        <p>滑块范围：<input type="range" min="1" max="100" step="1" name="range" /></p>
        <p>搜索框：<input type="search" name="search" /></p>
        <p><input type="submit" /></p>
    </form>
</body>

运行结果

除了以上判断输入内容以外，表单元素还提供了一些只读、隐藏、禁用的功能。

<body>
    <p>只读：<input type="text" value="只读文本框" readonly="readonly" /></p>
    <p>禁用：<input type="text" value="禁用文本框" disabled="disabled" /></p>
    <p>隐藏文本框（仍然存在）：<input type="text" value="只读文本框" hidden="hidden" /></p>
    <p>不可选中：<input type="radio" name="sex" disabled="disabled" />不可选中选项</p>
    <p>不可点击按钮：<input type="submit" disabled="disabled" /></p>
    <!-- 点击文字光标指向绑定的文本框 -->
    <p>
        <label for="label">点此</label>
        <input type="text" id="label" />
    </p>
</body>

运行结果

注意：当文本框设置禁用属性（disabled）后，表单的 value 值是无法提交的，而设置只读属性（readonly）的文本框，其 value 属性值可以提交处理。

<body>
    <form action="index.html" method="get">
        <p>只读：<input type="text" value="只读文本框" name="readonly" readonly="readonly" /></p>
        <p>禁用：<input type="text" value="禁用文本框" name="disabled" disabled="disabled" /></p>
        <p><input type="submit" /></p>
    </form>
</body>

点击提交后查看地址栏，可以发现，提交后的页面只获取到了只读属性的 value 值。

6. 行内元素和块级元素

  • 行内元素：有多少内容就占多少宽度，多个行内元素可以单行显示（例：a、b、strong、img...）。
  • 块级元素：无论标签的内容有多长，该标签总是独占一行，后面的其他内容换行显示（例：p、h1-h6、hr、div、ul、ol、dl、form、div...）。

7. 网页嵌套

在 HTML 中可以使用 iframe 标签实现在一个页面中嵌套另一个页面。

<body>
    此页面需要嵌套另一个页面
    <iframe src="two.html" name="two" width="400px" height="auto" frameborder="1"></iframe>
</body>

iframe 标签的一些属性的作用

  • src：定义框架要显示的内容的路径或地址。
  • name：对该框架的命名。
  • frameborder：规定是否显示框架的边框（0 显示，1 不显示）
  • width、height：定义框架的宽和高

运行结果

拓展：可以通过 a 标签的 target 属性值和 href 地址，指定在框架中要加载的页面。

<body>
    此页面需要嵌套另一个页面
    <iframe src="two.html" name="two" width="400px" height="auto" frameborder="1"></iframe>
    <!-- target 值指向 iframe 标签的 name 属性值 -->
    <a href="https://fanyi.youdao.com/" target="two">打开有道翻译</a>
</body>

运行结果

posted @ 2022-02-09 20:31  亦浮云  阅读(317)  评论(0)    收藏  举报