HTML基础--HTML标签元素

最新推荐文章于 2023-09-08 13:52:49 发布

哈密瓜Q

最新推荐文章于 2023-09-08 13:52:49 发布

阅读量403

点赞数 1

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/m0_53062159/article/details/113657655

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

HTML标签元素

1. HTML文档的基本结构
2. 块级元素（块标签）
3. 内敛元素（行标签）
4 行内块元素

1. HTML文档的基本结构

<!DOCTYPE HTML> /*声明文档类型*/
<html> /*网页的根标签*/
    <head> /*网页的头部标签*/
        <meta charset='utf-8'>
        <title>网页标题</title>
    </head>
    <body>
       /*网页的主体内容*/
       <h1>这是一个标题</h1>
       <p>这是一个段落</p>
       <p>这是另外一个段落</p>
    </body>
</html>

在这里插入图片描述 只有 <body> 区域 (白色部分) 才会在浏览器中显示

2. 块级元素（块标签）

2.1 快捷键

ctrl + /（注释快捷键）
!(英文感叹号)（快速生成网页的模板）
html:5（快速生成网页的模板）
ctrl + F（查找）
ctrl + H（替换）

2.2 块标签特性

1. 设置样式时可以给块级元素设置宽高
2. 块级元素默认充满一整行
3. 块级元素排列方式为从上往下排列
4. 如果一个块级元素没有设置宽度，那么其宽度等于其父元素的宽度

2.3 空块标签

空的块标签： <div></div>

<!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>
    <div style="background-color: pink; width: 200px; height: 200px;">这是一个div标签</div>
    <div style="background-color: powderblue;">这也是一个div标签</div>
</body>
</html>

在这里插入图片描述

每个元素标签都有一个style属性，style属性用来书写当前元素标签的样式。

2.4 列表标签

有序列表： <ol><li></li></ol>
无序列表： <ul><li></li></ul>
定义列表： <dl><dt></dt><dd></dd></dl>

通过type属性可以指定有序列表编号的样式，取值方式有如下几种:

"1"代表阿拉伯数字（1、2、3…)
"a"代表小写字母(a、b、c…)
"A"代表大写字母(A、B、C…)
"i"代表小写罗马数字(i、ii、iii…)
"I"代表大写罗马数字(I、II、III…)

通过start属性指定列表序号的开始位置，例如start="3"表示从3开始编号

无序列表中type属性用于设置列表的图形前缀，取值可以是 circle(圆)、disc(点)、square (方块)、none等类型，当缺省type属性时浏览器默认是disc类型。

<!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 type="square">
        <li>无序列表一</li>
        <li>无序列表二</li>
        <li>无序列表三</li>
    </ul>
    <ol type="A" start="3">
        <li>有序列表一</li>
        <li>有序列表二</li>
        <li>有序列表三</li>
    </ol>
    <!-- dl 定义列表 -->
    <!-- dt 定义列表标题 -->
    <!-- dd 定义列表的项 -->
    <dl>
        <dt>兴趣爱好</dt>
        <dd>游泳</dd>
        <dd>健身</dd>
        <dd>打篮球</dd>
    </dl>
</body>
</html>

在这里插入图片描述

2.5 表格标签

表格标签： <table></table>
表格标题：<caption></caption>
表格的行： <tr></tr>
表格的列： <td></td>
表格头部信息：<th></th>
表格的头部： <thead></thead> 、<th></th>
表格的内容： <tbody></tbody>
表格的尾部： <tfoot></tooft>

<table> 标签内置属性：

属性名	描述
border	表格的边框属性
cellspacing	单元格之间的间距
cellpadding	单元格内的内间距
width	表格的宽度
align	设置表格在父容器中的对齐方式

单元格的合并
colspan：当前单元格占几列
rowspan：当前单元格占几行

<!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" cellspacing='0' cellpadding='0' width='600'  height='300' align="center">
        <!-- thead 表头 -->
        <thead>
            <tr>
                <!-- th标签多用于表格的第一行或第一列，其内容通常以水平居中粗体表示 -->
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </thead>
        <!-- tbody 表格的表身，如果默认只写上tr的话，默认自动放tbody -->
        <tbody>
            <tr>
                <th colspan="2" rowspan="1" align="center">1.1</th>
                <td rowspan="2" align="center">1.2</td>
            </tr>
            <!-- 表格的行 -->
            <tr>
                <!-- 表格的列 -->
                <th style="text-align: center;">2.1</th>
                <td align="center">2.2</td>
            </tr>
            <tr>
                <th align="center">3.1</th>
                <td align="center">3.2</td>
                <td align="center">3.3</td>
            </tr>
        </tbody>
        <!-- tfoot 表尾 -->
        <tfoot>
            <tr>
                <td align="center" colspan="3">表尾部分</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

在这里插入图片描述

3. 内敛元素（行标签）

3.1 行标签特性

1. 设置样式时不能给行标签设置宽高，设置也无效
2. 行标签的宽度和高度由内容的大小撑开
3. 行标签排列方式为从左向右排列

<!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>
    <span style="background-color: blue; width: 200px; height: 200px;">这是一个span标签</span>
    <span>这也是一个span标签</span>
</body>

</html>

在这里插入图片描述

3.2 文本相关行标签

字体加粗标签： <b></b> 、 <strong></strong>（更有强调意义）
字体斜体标签： <i></i> 、 <em></em>（更有强调意义）
字体下划线标签： <u></u> 、 <ins></ins>（更有强调意义）
字体删除线标签： <del></del>
上标、下标标签： <sup></sup> 、 <sub></sub>

<!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>
    <b>文本加粗标签</b>
    <strong>这也是一个文本加粗标签，比b标签更具有强调的意义</strong>
    <br>
    <!-- 文本斜体的标签 -->
    <i>文本斜体标签</i>
    <em>这也是一个文本斜体标签，比i标签更具有强调的意义</em>
    <br>
    <!-- 文本下划线标签 -->
    <u>自带下划线的文本</u>
    <ins>这也是下划线的文本，比u标签更具有强调的意义</ins>
    <br>
    <!-- 删除线标签 -->
    <del>这是一个自带贯穿线/删除线的文本</del>
    <br>
    <!-- 上标下标 -->
    <sub>下标</sub>文本信息<sup>上标</sup>
</body>
</html>

在这里插入图片描述

3.3 超链接标签

超链接标签： <a href='#' traget='_self'></a>

target的属性:

属性值	描述
_blank	规定在新窗口打开界面
_self	默认在当前窗口打开页面（默认值）

图片链接

<!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>
    <a href="https://www.baidu.com/?tn=15007414_8_dg" target="_blank"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片加载失败"></a>
</body>
</html>

在这里插入图片描述

4 行内块元素

4.1 特性

1. 设置样式时，可以给元素设置宽高(块元素的特性)
2. 元素排列方式是从左往右排列(行元素的特性)

4.2 图片标签

图片标签：<img src='/图片路径' />

4.3 表单元素

表单标签：<form></form>（块标签）
输入框：<input type='text'>
按钮: <button type='submit'>提交</button>
文本域: <textarea></textarea>
下拉框: <select><option>选项</option></select>

input的type类型：

属性值	描述
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符
number	定义自带上下箭头控件的数字字段
password	定义密码字段。该字段中的字符被掩码
radio	定义单选框
checkbox	定义复选框/多选框
button	定义可点击按钮（多数情况下用于通过 JavaScript 启动脚本）
file	文件选择
reset	定义重置按钮，清除表单中的所有数据
submit	定义提交按钮，把表单数据发送到服务器
color	定义拾色器
date	定义日期字段

<!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>

    <!-- action 表单提交数据的地址，一般是为服务器地址 -->
    <form action="">
        <div>
            <!-- label 一般是跟着input使用 -->
            <!-- for绑定后面输入框的id -->
            <label for="username">账号</label>
            <!-- <label>用于为输入控件定义文本标签（label）——即显示在输入控件旁边的说明性文字，
            要为<label>指定关联的输入控件，只需把相关控件的id赋值给<label>标签的for属性即可。 -->
            <!-- 输入框 -->
            <!-- placeholder 表单的提示性文字 -->
            <!-- required 设置必填项 -->
            <input type="text" id="username" placeholder="请输入账号" required>
        </div>

        <div>
            <label for="psw">密码</label>
            <!-- password 输入框内容以加密的文本格式展示 -->
            <input type="password" id="psw" placeholder="请输入账号" required>
        </div>

        <div>
            <!-- 自带上下箭头控件的数字字段 -->
            年龄：<input type="number" style="width: 40px;">
        </div>

        <div>
            <!-- radio 单选框 -->
            性别：<input type="radio" name="sex">男<input type="radio" name="sex">女
        </div>

        <div>
            <!-- checkbox 多选框 -->
            兴趣爱好：<input type="checkbox">游泳<input type="checkbox">健身
        </div>

        <div>
            <!-- 文件选择 -->
            文件选择：<input type="file" placeholder="浏览">
        </div>

        <div>
            <!-- 日期 -->
            日期选择：<input type="date">
        </div>
        <div>
            所在省份：
            <!-- select 下拉框 -->
            <select name="" id="">
                <!-- option 下拉框的选项 -->
                <option>请选择</option>
                <option>福建省</option>
                <option>浙江省</option>
            </select>
        </div>

        <div>
            <!-- textarea 可伸缩的输入框 -->
            意见反馈：
            <!-- cols 设置宽度，每一行占据几个文字 -->
            <!-- rows 设置高度，每一列占据几个文字-->
            <textarea name="" id="" cols="10" rows="5"></textarea>
        </div>
        <!-- button 按钮 -->
        <button>提交</button>
        <!-- reset 重置表单的内容 -->
        <button type="reset">重置</button>
    </form>

</body>

</html>

在这里插入图片描述

4.4 转义符

常用转义符

转义符	描述
`<`	<
`>`	>
` `	一个英文字符大小的实体空格
`　`	一个中文字符大小的实体空格
`©`	©（防伪标识）

在这里插入图片描述

4.5 语义化标签

标签名	描述
`<header></header>`	定义了文档的头部区域
`<nav></nav>`	定义文档的导航栏
`<footer></footer>`	定义文档的底部
`<article></article>`	定义文档中的文章内容
`<section></section>`	定义文档的小节
`<aside></aside>`	定义页面的侧边内容
`<main></main>`	定义网页的主体内容

语义化标签的作用与div标签一致，但标签名更加语义化，使代码结构更加清晰。

哈密瓜Q

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML基础--HTML标签元素

HTML标签元素2. 块级元素（块标签）2.1 特性2.2 空块标签2. 块级元素（块标签）2.1 特性1. 设置样式时可以给块级元素设置宽高2. 块级元素默认充满一整行3. 块级元素排列方式为从上往下排列4. 如果一个块级元素没有设置宽度，那么其宽度等于其父元素的宽度2.2 空块标签空的块标签： <div></div>...
复制链接

扫一扫