4、HTML基本结构和常用标签_描述html常用的基本标签结构

作者：你好赵伟 | 2024-03-28 08:09:57

踩

描述html常用的基本标签结构

1、HTML基本结构

html<!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>
    
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
- 文档类型定义DTD
- 作用
  - 告诉浏览器解析器知道该使用哪种语法解析页面；
  - 不是标签，是一条声明语句；
  - 必须写在HTML文档的第一行；
  - 例<!DOCTYPE html>用HTML5的语法来解析HTML文档
<html lang=“en”> 网页的整理文件，根元素
<head>网页的头部信息，不会显示在网页中
<meta charset=“UTF-8”>网页的元信息
charset属性：字符集
- UTF-8：万国码，国际通用编码
- ASCII：0-9数字、字母大小写、一些特殊字符
- GBK：汉字国际扩展码，全部中文字符
- gb2312：只针对简体中文
<title>网页标题
<body>网页主体元素

常用的HTML标签

1、块级标签

div标签搭建网页结构的基本元素
- 语法
```
<div>[content]</div>
1
```
- 特点
  - 宽度默认撑满整个父元素
  - 高度默认由内容撑开
  - 独立成行——垂直布局
标题标签 h系列
h1~h6大小依次减小，重要程度依次减弱;h1标签在同一个页面中只能使用1次，其他标签可以重复使用
- 语法
```
<h1>title</h1>
<h2>title</h2>
<h3>title</h3>
<h4>title</h4>
<h5>title</h5>
<h6>title</h6>
1
2
3
4
5
6
```
- 特点
  - 宽度默认撑满整个父元素
  - 高度默认撑满整个父元素
  - 独立成行——垂直布局
  - 自带文字加粗效果
  - 自带间距
段落标记 p标签
- 语法
```
<p>段落内容</p>
1
```
- 特点
  - 宽度默认撑满整个父元素
  - 高度默认由内容撑开
  - 独立成行——垂直布局
  - 自带间距
其他标签
- br标签强制换行标签空元素
  - 专门用来实现换行，不能设置其他样式，不参与分类；不产生新段落的情况下换行
  - 语法
```
<br />  <br>
1
```
  - hr标签水平分割线空元素
    块级标签，默认自带间距和边框
```
<hr>  <hr />
1
```

2、行级标签——span、b、strong、i、em、sup、sub、del

文本格式化标签

span标签：万能标签用于区分样式
b标签：是一个实体标签，被包围的字符显示粗体效果
strong标签：是一个语义标签，作用加强语气，表示重要的文本，在文本中显示粗体效果
sub标签：下标
sup标签：上标
del标签：删除线

特点

宽度默认由内容撑开
高度默认由内容撑开
默认横向显示——水平布局，相邻的行级元素在同一行显示，当一行排不下时才会换行
换行和空格会被解析

3、行块级标签——img

img标签图片标签
- 语法
```
<img src="图片路径" title="图片标题" alt="替换文本" width ="" height=""/>
1
```
- src属性：图片的存储位置
- title属性：鼠标悬停时的提示文字
- alt属性：如果浏览器中无法正常载入图像，则使用alt属性值替代图像
- width属性：宽度
- height属性：高度
使用
- 占位，可以撑开父元素
- 属于网页内容，有实际意义，是必不可少的
- 不可重复
- 可以被搜索引擎检测到
特点
- 默认水平布局
- 换行和空格会被解析
- 元素可以设置宽度和高度

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/328786