HTML中常见的标签

他咔咔咔

已于 2024-07-17 23:02:05 修改

阅读量835

点赞数 21

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

于 2024-07-11 09:55:16 首次发布

本文链接：https://blog.csdn.net/weixin_64294248/article/details/140341481

版权

html 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML标签

6 篇文章 0 订阅

订阅专栏

1.HTML简介

HTML 是一种网页开发的标准语言，我们可以叫做超文本标记语言。使用HTML是因为浏览器在展示图文信息的时候，需要容器/骨架承载图文内容。通俗点理解就是需要HTML来搭建网页的结构（划分页面的结构）。

2.HTML基础模板

<!DOCTYPE html> <!-- 声明文档类型 -->
<html lang="zh"> <!-- 根元素 -->
<head> <!-- 网页头部标签 (不可视化部分) -->
    <meta charset="UTF-8"> <!-- 描述网页的信息 字符编码设置为UTF-8  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 针对移动端设置视口相关信息，例如：设备宽度，初始化字体比例-->
    <title>网页标题</title><!-- 浏览器topbar显示标题 -->
</head>
<body>
    <!-- 网页主体（视化部分） -->
     <h1>hello world !</h1>
     <div class="text5">5</div>
</body>
</html>

3.HTML标签

3.1 HTML标签使用时的注意事项

双标签要遵循开闭原则，也就是有开始和结束标签，如：<开始标签></结束标签>
单标签<单标签>
标签的字母是小写的
标签需要添加属性的写法：<标签标签属性=“值”></标签>

其中，类名和ID命名时需要注意：

4.1 注意采用字母开头，不可以采用数字或者特殊开头

4.2 不可以采用特殊符号命名 @!#%&*

4.3 可以采用数字结尾 text1 box1

4.4 类名属性可以采用驼峰命名 loginButton indexHeader indexList

也可以采用短横线 ‘-’来命名 login-button index-header index-list

4.5 ID名称建议采用驼峰命名 loginButton indexHeader indexList

4.6 不推荐使用中文命名，不是不能使用中文命名

注意：

html 不是编程语言，css 也不是编程语言。

html 超文本标记语言。标签就是标记

3.2HTML标签

标签可分为有语义和无语义标签，语义，即意义，一个语义元素能够清楚的描述其意义给浏览器和开发者

无语义标签

div 块标签
span 行内标签

语义标签

h1 ~ h6 标题标签

p 段落标签

ul li 列表标签(无序)

ol li 列表标签(有序)

dl dt dd 自定义列表

img 图片

table thead tr th tbody td 表格标签

form 表单标签

input 输入框标签 / 其他作用

button 按钮标签

select option 下拉标签

a 链接标签

u 带下划线标签

i 斜体字标签

del 带删除线标签

b 加粗标签

strong 字体加粗标签

......

标签还可以分为块级标签、行内标签以及行内块标签，块级元素可以转化为行内元素

块级元素

块级元素默认属性display:block，块级元素独占一行显示，可以直接设置宽度高度，块元素用于承载内容，进行排版布局

行内元素

行内元素默认属性display:inline，行内展示在同一行显示，不能直接设置宽度高度。行内元素是用于修饰页面的细节，如字体颜色、字体大小，文本线

不建议用行内元素嵌套块元素，如： <span> <div></div> </span> ，这样不符合规范，通常是块级元素嵌套行内元素，如：<div><span></span></div>

行内块元素

行内块元素的默认属性display: inline-block，行内块元素用于布局页面细节、小的区块，例如：图标、输入框、按钮。行内块元素可以在同一行显示，也可以直接设置宽度高度。行内块标签通常会伴随着文本空白的出现（元素周围间隙|间距），为了清除，可以给行内块元素嵌套一个标签，并且给这个标签设置font-size为0。

注释

注释用于说明描述作用、不被浏览器解析，按下 Ctrl + / 组合就可以进行注释

常见的HTML标签

标题标签

h1 ~ h6 是标题标签，默认字体加粗，一个网页通常是一个h1标签，h1 ~ h6 也是块标签。

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

段落标签

段落标签、通常形容一段文本、一段字符。

p标签不可以嵌套div或其他块元素，如果采用p标签嵌套div标签，就会出现p标签被分割。
p标签可以嵌套文本、行内元素,但是不能直接嵌套块元素。
p标签也是一种块标签，因为可以独占一行，可以直接设置宽度高度

<p>段落....</p>

列表标签

列表标签可以独占一行显示，也可以直接设置宽度高度。视为块级元素。

<!-- 无序列表标签 -->
<ul>
    <li>新闻xxxxx</li>
    <li>财经xxxxx</li>
    <li>体育xxxxx</li>
    <li>历史xxxxx</li>
    <li>娱乐xxxxx</li>
</ul>

<!-- 有序列表标签 -->
<ol>
    <li>新闻yyyyy</li>
    <li>财经yyyyy</li>
    <li>体育yyyyy</li>
    <li>历史yyyyy</li>
    <li>娱乐yyyyy</li>
</ol>

<!-- 自定义列表 -->
<dl>
    <dt>一级菜单</dt>
    <dd>二级菜单</dd>
    <dd>二级菜单</dd>
    <dd>二级菜单</dd>
 </dl>
 <dl>
    <dt>一级菜单</dt>
    <dd>二级菜单</dd>
    <dd>二级菜单</dd>
    <dd>二级菜单</dd>
 </dl>

图片标签

img是图片标签，单标签，是行内块标签。在同一行显示，可以直接设置宽度高度，src 属性填写图片文件路径，alt 属性描述图片，示例代码如下：

<style>
    img {
        width: 200px;
    }
</style>

<img src="photo/p2.jpeg"  alt="这是一朵美丽的荷花" title="美丽的荷花">
<img src="photo/icon1.png" alt="图标1">
<img src="./photo/icon1.png" alt="图标1">
<img src="../icon2.png" alt="图标1">

路径问题

1）本地相对路径（推荐）

    ./ 当前路径
    ../ 上一级目录路径
    ../../ 上上一级目录路径

2） http环境下相对路径

<img src="http://127.0.0.1:5500/p1.jpeg" alt="图片p1">

3) 绝对路径：带电脑盘符，例如： E:\stu\GZH52429\HTMLCSS\DAY01 这种路径的图片，在客户端（浏览器）通常不推荐使用，需要在文件传输协议上 file:///E:/ 才能访问到。

<img src="E:\stu\GZH52429\HTMLCSS\DAY01\icon2.png" alt="图标2">

4）线上的图片路径

这种是别人服务器的图片路径，需要连网才能访问。

<img src="https://img10.360buyimg.com/img/jfs/t1/176863/16/41608/14330/668e3421F64b41094/15c9d9130b980a51.png" alt="">

他咔咔咔

关注

21
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML中常见的标签

HTML 是一种网页开发的标准语言，超文本标记语言。使用HTML是因为浏览器在展示图文信息的时候，需要容器/骨架承载图文内容。通俗点理解就是需要HTML来搭建网页的结构，本文介绍了HTML常见的标签。
复制链接

扫一扫