【HTML+CSS】网页结构和常用标签

芒果Cake

已于 2022-12-01 09:09:21 修改

阅读量186

点赞数

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

于 2022-11-15 21:18:44 首次发布

本文链接：https://blog.csdn.net/huangwfu/article/details/127874145

版权

HTML 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

网页结构和常用标签

网页基本结构解读
HTML超文本标记语言（HyperText Markup Language）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

!DOCTYPE html

是声明文本类型，声明html文档，其中html是html5标准。

html lang=“en”

是网页的根元素(根标签)，具有唯一性。lang是html标签的修饰，英文language的简写。en则表示英文English，这里告诉我们这个html语言是英文的。

headhead网页的头部标签
meta charset=“UTF-8”

是网页信息的意思，charset是声明字符编码格式。
其中UTF-8万国码字符编码，还有gb2312、ASCII、ISO-8859-1

title/title标题网页的名字
body/body是网页的主题主体

常用标记/标签/元素
常规标签也叫做双标记，标记也可以叫做标签或者元素
空标记也叫做单标记
标记和属性用空格隔开
属性和属性值用等号相连,属性值必须放在""号内
一个标签可以没有属性，也可以有多个属性，属性与属性之间不分先后顺序
标签之间要么是嵌套关系，要么是并列关系

<!-- 1.文本标题-->
    <h1>文本</h1>
    <h2>文本</h2>
    <h3>文本</h3>
    <h4>文本</h4>
    <h5>文本</h5>
    <h6>文本</h6>

h1文本/h1

文本标题，双标签、加粗、独占一行，数字越小级别越大，保持了一定的上下距离。h1最重要一个页面(.html文件)只有一个h1标签，写标签是为了代码规范方便seo(搜索引擎化) sem(搜索引擎营销)。

p文本/p

段落标签双标签、独占一行，保持了一定的上下距离，浏览器会把空格和换行转为一个空格执行，自动文本自动换行，快捷键alt+z。p标签不能嵌套p标签(可是出效果,但是不符合语法标准),如果要在p标签中换行就br。

空格等特殊字符
空格：和 &nbsp是受字体影响明显而强烈 &emsp是正好是一个中文宽度并且不受字体影响。
尖括号：<>
版权号：©
商标：™和®
br

换行，单标签、独占一行

水平线，单标签、独占一行

文本和文本

加粗，双标签、不独占一行，推荐使用strong（语义化标签）

文本和文本

双标签,不独占一行推荐使用em(语义化标签)

文本修饰线
文本下划线
~~文本删除线~~
~~文本删除线~~推荐使用del(语义化标签)
上标 X²
下标 H₂O
列表
有序列表

<ol>
        <li>文本</li>
        <li>文本</li>
        <li>文本</li>
    </ol>

  2.   无序列表

<ul type="square"><!-- ul表示组合区域  li表示无序列表项 -->
        <!-- ul的html属性 type是列表的项目符号  值:默认值disc\空心圆circle\没有none\实心方块square-->
        <!--  属性和标签是固定搭配  属性1="属性值1" 属性2="属性值2"-->
        <li>文本1</li>
        <li>文本2</li>
        <li>文本3</li>
    </ul>

  3.  自定义列表

<dl><!--dl是自定义列表的区域  dt是自定义列表的标题常规只能有一个 dd是自定义列表的描述可以有无数个-->
        <dt>单身狗</dt>
        <dd>是个好人</dd>
        <dd>没人要</dd>
        <dd>吃得多</dd>
    </dl>

插入图片 src引入图片的路径(绝对路径和相对路径)
1.绝对路径
本地文件，从盘符开始一步一步往下找直到找到文件为止
网络地址
2.相对路径从当前文件开始,找到目标文件的路径
同级路径
同一个文件夹下,直接写文件名或者./文件名
下级路径
先找到同级文件夹,再到文件夹下面找图片,找到目标文件夹 / 进入文件夹
上级路径
…/找到上级目标文件

<img src="./image/001.png" alt="图片加载失败时显示" title="图片标题鼠标放入时显示" width="200px" height="200px">

超链接应用不独占一行,双标签,自带颜色和下划线,默认当前页面打开
```
href跳转地址
图片地址
文件地址
```
地址一定要写全
target默认值是_self当前页面打开
一般li里面嵌套一个a标签

<a href="http://www.baidu.com" title="链接的标题" target="_blank">百度一下</a>
<a href="http://www.baidu.com"><img src="./image/001.png" alt="图片加载失败时显示" width="200px" height="200px"></a>
<a href="./image/001.png" target="_blank">图片访问</a>
<a href="../day_02/001.html" target="_blank">访问文件</a>