html5的常用标签

雪球不会消失了

已于 2024-03-15 10:45:06 修改

阅读量254

点赞数 1

文章标签： css3 html5 css

于 2023-01-11 17:44:23 首次发布

本文链接：https://blog.csdn.net/m0_61925586/article/details/128597111

版权

2.3.1为什么要使用VS Code开发工具

3.1.5 图片标签的width和height属性

7.1.2 input的placeholder占位符属性

7.1.3 type="radio"时加的属性name，checked

7.1.4 type="file"时加的属性multiple

一、基础认知

1、基本概念（常识）

2、HTML简介

2.1.1 HTML的概念

HTML(超文本标记语言)：专门用于网页开发的语言，主要通过HTML标签对网页中的文本，图片，音频，视频等内容进行描述。

HTML标签：由尖括号包围的关键词，比如 <html>，有双标签和单标签两种。

双标签由开始标签和结束标签组成，结束的尖括号里要有/。
单标签只有开始标签。

HTML元素："HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思，但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签

案例：

2.2.1 HTML文件的骨架结构

html文件的骨架结构通过特定的HTML标签来进行描述，包括头部和主体两大部分：

其中<head></head>标签里描述浏览器所需的信息（头部）
<body>标签则包含页面的主体内容（主体），如文字，图片，音频，视频，超链接。

<!DOCTYPE html>   <!-- <!DOCTYPE html> 声明为HTML5文档 -->
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 定义网页编码格式为 utf-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>
</head>
<body>
    网页的主体内容
</body>
</html>            <!-- <html>元素代表整个网页 -->

2.3.1为什么要使用VS Code开发工具

速度快，体积小，插件多，还免费

3、HTML的语法

3.1.1 注释

注释的作用：对代码解释说明，浏览器执行代码时会忽略掉所有的注释。

注释的快捷键：

在 VS Code中：alt + shift + a

3.2.1 HTML标签的两种结构

双标签的结构：

单标签的结构：单标签只有开始标签，自成一体无法包裹内容。

标签属性：

3.4.1 HTML标签和标签的关系

二、常见的HTML标签

1、排版标签

1.1.1 标题标签

案例：

1.2.1 段落标签

作用：分段显示一段文字。

案例：

1.3.1 换行标签

作用：将<br>标签加到要换行的位置表示换行

代码：<br>

特点：

单标签

案例：

1.4.1 水平分割线标签

作用：将<hr>加到要分割地方的中间，在页面中显示一条水平线

代码：<hr>

特点：

单标签

案例：

2、文本格式化标签

2.1 文本格式化标签的介绍

文本格式化是双标签，用来处理文字，把要处理的文字写在开始标签和结束标签里面。

左边和右边的效果都是一样的，只不过重要的就写在右边的标签里面，不重要的就写在左边里面：

案例：

3、媒体标签

3.1.1 图片标签

代码：

<img src="" alt="">

作用：在网页中显示图片

特点：

单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置

图片标签的结构图：

图片标签的src属性

<!DOCTYPE html>   <!-- <!DOCTYPE html> 声明为HTML5文档 -->
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 定义网页编码格式为 utf-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>
</head>
<body>
    <img src="要展示图片的路径">
</body>
</html>            <!-- <html>元素代表整个网页 -->

注意：

src属性写图片的路径，./表示当前目录，写的时候加不加都无所谓。
当html文件和图片在同一个目录下，src里面可以直接写图片名(包括后缀名)。

案例：

图片标签的alt属性

<!DOCTYPE html>   <!-- <!DOCTYPE html> 声明为HTML5文档 -->
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 定义网页编码格式为 utf-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>
</head>
<body>
    <img src="目标图片的路径" alt="替换文本">
</body>
</html>            <!-- <html>元素代表整个网页 -->

注意：

当图片加载失败时，才显示alt的文本；图片加载成功时，不会显示alt的文本

案例：

图片标签的title属性

作用：鼠标悬停时，显示提示文本

注意：title属性还可以用于其他标签

<!DOCTYPE html>   <!-- <!DOCTYPE html> 声明为HTML5文档 -->
<html lang="en">
<head>
    <meta charset="UTF-8">  <!-- 定义网页编码格式为 utf-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>
</head>
<body>
    <img src="目标图片的路径" alt="替换文本" title="提示文本">
</body>
</html>            <!-- <html>元素代表整个网页 -->

案例：

图片标签的width和height属性

案例：

3.3.1 音频标签

作用：在页面中插入音频

案例：

3.4.1 视频标签

作用：在页面中插入视频

案例：

4.链接标签

4.1 链接标签的介绍

链接标签是双标签，开始标签和结束标签里面写跳转的地方

代码：

 <a href="./目标网页.html">超链接</a>

作用：点击后，从一个页面跳转到另一个页面

特点：

双标签，内部能包裹内容

超链接标签的href属性：只有a标签才有

属性名：href

属性值：要跳转到的资源地址，可以为相对路径也可以为绝对路径。可以是网络中某个资源的路径，也可以是本地资源的路径。（用#表示空链接）

a标签的target属性：

属性名：target

属性值：网页的打开方式

超链接的作用：

可以从浏览器向服务器发送请求

案例：

5.列表标签

5.1 列表标签

作用：以列表的方式显示内容

种类：无序列表、有序列表、自定义列表

5.2.1 无序列表

作用：在网页中表示无顺序的列表

无序列表标签的结构：由ul标签嵌套li标签组成

ul标签：表示无序列表的整体，包裹li标签
li标签：表示无序列表的每一行，包裹每一行的内容

    <ul>
        <li>第一行的内容</li>
        <li>第二行的内容</li>
        <li>第三行的内容</li>
    </ul>

特点：

无序列表的每一行前默认有圆点标识
ul标签只能包含li标签
li标签可以包含任意的内容

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>第一行的内容</li>
        <li>第二行的内容</li>
        <li>第三行的内容</li>
    </ul>
</body>
</html>

5.3.1 有序列表

作用：在网页中显示有序列表，如排行榜。

有序列表标签的结构：由ol标签嵌套li标签组成

ol标签：表示有序列表的整体，包裹li标签
li标签：表示有序列表的每一项，包含每一项的内容

    <ol>
        <li>有序列表的第一行内容</li>
        <li>有序列表的第二行内容</li>
        <li>有序列表的第三行内容</li>
    </ol>

特点：

有序列表的每一项前默认都有序号
ol标签中只能包含li标签
li标签可以包含任意的内容

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>有序列表的第一行内容</li>
        <li>有序列表的第二行内容</li>
        <li>有序列表的第三行内容</li>
    </ol>
</body>
</html>

5.4.1 自定义列表

dl=definition list dt=definition title dd=definition detail

自定义列表的结构：由dl嵌套dt和dd组成

dl标签：表示自定义列表的整体，包裹dt/dd标签
dt标签：表示自定义列表的主题
dd标签：自定义列表中主题的每一项内容

    <dl>
        <dt>自定义列表的主题</dt>
        <dd>自定义列表中主题的每一项内容1</dd>
        <dd>自定义列表中主题的每一项内容2</dd>
        <dd>自定义列表中主题的每一项内容3</dd>
    </dl>

特点：

dd前默认有缩进
dl标签：中只能包含dt/dd标签
dt/dd标签：可以包含任意的内容

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>自定义列表的主题</dt>
        <dd>自定义列表中主题的每一项内容1</dd>
        <dd>自定义列表中主题的每一项内容2</dd>
        <dd>自定义列表中主题的每一项内容3</dd>
    </dl>
</body>
</html>

6.表格标签

6.1.1 表格的基本标签

tr=table row th=table head td=table detail

作用：在网页中定义一个表格表格

基本标签：

标签名	功能
caption	整个表格的标题，默认在整个表格顶部居中位置显示
table	定义整个表格，用于嵌套多个tr
tr	定义表格的每一行，用于嵌套td或th
th	每一列小标题，通常用于表格的第一行。th标签写在tr标签的内部（用于替换td标签）。内部包裹的文字默认加租并居中显示
td	定义每一列，用于包裹文本内容

表格的语法结构：

    <table border="1">
        <caption>整个表格的标题</caption>
        <tr>
            <th>每一列的小标题1</th>
            <th>每一列的小标题2</th>
            <th>每一列的小标题3</th>
        </tr>
        <tr>
            <td>每一列1</td>
            <td>每一列2</td>
            <td>每一列3</td>
        </tr>
    </table>

注意：

标签的嵌套关系：table>tr>th=td

caption标签写在table标签的内部

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <caption>学生成绩单</caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>100分</td>
            <td>真棒1</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99分</td>
            <td>真棒2</td>
        </tr>
    </table>
</body>
</html>

6.1.2 表格的标签属性

实际开发中推荐使用CSS设置

border属性：可以显示表格的边框，设置表格边框的宽度

6.2.1 表格的结构标签

作用：可以方便人阅读，让浏览器内核的执行效率更高

注意：

表格结构标签内部包裹tr标签
表格的结构标签可以省略

案例：

6.3.1 合并单元格

合并单元格的步骤：

1.明确要合并哪几个单元格，然后在代码中找到对应的标签

2.根据左上原则确定保留哪个删除哪个，在代码中删除对应的代码

3.在保留的单元格的td标签加跨行合并（rowspan）或跨列合并（colspan）属性，属性值有几个要合并的单元格就写数字几。

7.表单标签

7.1.1 input标签简介

作用：在网页中显示收集用户信息的表单

①input标签是单标签，根据其type属性的不同属性值，可以实现不同的功能。

②input标签默认行。不换

Web开发中的属性：

input标签的name属性：定义了该表单的名称，在提交表单时会将该name作为参数名和对应表单控件值value一起发送给服务器。（表单要填写了name属性的，才会提交给服务器。不加name的时候，该项不会提交给服务器）
文本框和密码框的value属性不需要程序员指定，而是用户输入的

案例：

7.1.2 input的placeholder占位符属性

概述：占位符，可配合表单文本框和密码框使用。提示用户输入内容的文本，属性值可以是任意内容，写在input标签中。

案例：

7.1.3 type="radio"时加的属性name，checked

属性名	功能
name	对单选框进行分组。name属性值相同的单选框为一组，一组中只有一个单选框会被选择
checked	设置默认选中单选圈

案例：

7.1.4 type="file"时加的属性multiple

属性名	功能
multiple	可以选择多个文件

案例：

7.1.5 input表单的按钮

<input type="submit" value="提交按钮上的字">

1、type="submit"时：表示该按钮是一个提交按钮，具有提交表单的能力。

2、对于按钮，input标签的value属性可以指定按钮上的字

案例：

8、 button按钮标签

作用：在网页中显示按钮

特点：

button标签根据type不同的属性值实现不同的功能
button标签里面可以包裹按钮的名字或内容。

注意：

谷歌浏览器中button默认是提交按钮

button是双标签，便于包裹内容，如：文字、图片。

案例：

9、 select下拉菜单标签

作用：在网页中提供有多个选项的下拉菜单控件

标签的语法组成：

select标签：下拉菜单的整体
option标签：下拉菜单中的每一项，包裹下拉菜单的每一项文本

    <select>
        <option>下拉菜单的每一项文本1</option>
        <option>下拉菜单的每一项文本2</option>
        <option>下拉菜单的每一项文本3</option>
    </select>

注意：

要默认选择下拉菜单的哪一项就在哪一项的option标签里加selected属性即可

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select>
        <option>下拉菜单的每一项文本1</option>
        <option>下拉菜单的每一项文本2</option>
        <option selected>下拉菜单的每一项文本3</option>
    </select>
</body>
</html>

10、 textarea文本域标签

作用：在网页中提供可输入多行文本的表单

语法：

<textarea></textarea>

常见属性：

cols：规定文本域内可见宽度

rows：规定文本域内可见行数

注意：

开始标签和介绍标签里面一般不用写东西。
常见的属性通过css修改的，html的不用记
右下角可以拖拽改变大小
实际开发中使用CSS设置样式

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea></textarea>
</body>
</html>

11、 label标签

作用：常用于绑定内容与表单标签的关系

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <label><input type="radio" name="sex">男</label>
</body>
</html>

12、字符实体

一个字符实体代表某个符号

1.HTML中有空格合并现象，也就是网页不认识多个空格，只认识一个空格，无论打多少个空格都只会显示一个空格

2.字符实体的特点：以&开始，以;结束

3.常见的字符实体：

语义标签

无语义的布局标签：div和span标签（用来网页布局）

div标签：双标签，独占一行

span标签：双标签，一行显示多个的

表单域form标签

form标签的作用：收集用户信息，用户填写表单后点击提交按钮提交数据给服务器，它可以将其他表单标签"包裹"起来，作为一个整体提交数据到服务器。

form标签的基本语法如下：

<form action="URL地址" method="提交方式" name="表单的名称">
    各种表单控件
</form>

action属性：指定表单提交到哪个URL地址进行处理；，例如action="login.jsp"，表示表单中的数据会提交到login.jsp页面中处理。

method属性：设置表单数据的提交方式，常用的有 GET 和 POST 两种方式，GET方式为默认值

雪球不会消失了

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5的常用标签

本文章是看了黑马的HTML5和css3课程做的，其实就是为了方便复习，所以文章质量可能不好，看不懂的可以绕过。。如果是看过课程的可以参考下，毕竟ppt的内容都截下来了也做了一些补充，方便后期复习，后期复习的时候要是忘记哪了就可以不用再去翻视频了。（因为手机端好像不能看仅我可见的博客，所以还是只能发公开的了）
复制链接

扫一扫