山西农业大学20240918

Jia_dongyao

已于 2024-09-19 14:33:22 修改

阅读量589

点赞数 10

分类专栏：山西农业大学文章标签： html5

于 2024-09-18 11:25:00 首次发布

本文链接：https://blog.csdn.net/2401_86991268/article/details/142324377

版权

山西农业大学专栏收录该内容

22 篇文章 2 订阅

订阅专栏

02-HTML

- 一. HTML标签

一. HTML标签

1. 标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
    Hello World!
    <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
<!--特点:
    1. 单独成行(独占一行)  -- 块级标签
    2. 字号变化(h1最大,h6最小)并加粗
    3. 上下有垂直间距

 -->
</body>
</html>

2. 段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
Hello World!
<br>
Hello World!
    <p>
        一轮弯月、一只作跳
        跳跃的兔子、
        一只口衔仙草的蟾蜍……湖南长沙，马王堆汉墓出土的T形帛画上，充满自然气息和神秘色彩的“中秋元素”，展现了古人对宇宙和生命的浪漫想象。
    </p>
    <p>
        水面波光之上，神龙昂首、吉鸟振翅，天空中圆月高悬，月宫里玉兔捣药……陕西历史博物馆珍藏的一枚铜镜，展现了当时的人们对碧空悬月的美好遐想。
    </p>
    <p>
        家是最小国
    </p>
    <p>
        中华民族历来重真情、尚大义。“团聚最喜悦，团圆最幸福，团结最有力。当今社会快速变化，人们为工作废寝忘食，为生计奔走四方，但不能忘了人间真情，不要在遥远的距离中割断了真情，不要在日常的忙碌中遗忘了真情，不要在日夜的拼搏中忽略了真情。
    </p>

<!--
    特点:
        1. 单独成行 - 块级标签
        2. 上下有垂直间距
    注意:
        1. 用法:一般用于大段文字,或者段落文章;
        2. 布局:p标签不建议做布局分块,就包裹文字最好, 不能包裹其他的
        块级标签, 可以包裹内联标签和文字
-->
</body>
</html>

3. 文本样式标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式标签</title>
</head>
<body>
    <b>文本加粗</b>
    <i>文本斜体</i>
    <s>删除线</s>
    <u>下划线</u>
    <sup>上标</sup>
    <sub>下标</sub>
    <ins>插入(下划线)</ins>
    <p>
        <b>促销</b>: 原价 <s>300</s>,现价: <u>100</u>
    </p>
    <p>
        <strong>促销</strong>: 原价 <del>300</del>,现价: <ins>100</ins>
    </p>
    <p>
        a<sup>2</sup>
    </p>
    <p>
        H<sub>2</sub>O
    </p>
<!--
    特点:
        1. 在一行内显示, -- 内联标签(行内标签)
 -->
</body>
</html>

4. 分区元素

① 块分区标签 <div></div>
② 行分区标签 <span></span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分区元素</title>
</head>
<body>
    Hello World!
<!--    块分区元素-->
<!--
    div是块级分区元素的代表, div用于各种功能, 没有任何的默认样式
    div标签没有任何的语义;
    用法: 页面布局, 搭建页面结构时候使用
    特点: 单独成行 --- 块级元素
-->
    <div>Hello World!</div>
    <div>Hello World!</div>
    <div>Hello World!</div>
    <h1>Hello World!</h1>
    <p>Hello World!</p>

<!-- 行分区元素 -->
<!--
    span是一个行内元素(内联元素), 只能包裹文字, 和div一样,没有任何语义
    用法: 段落中的特殊文字样式
    特点: 在一行内显示
-->
    <span>这是span1</span>
    <span>这是span2</span>
    <!-- css样式-->
    <p style="color:blue">
        央视<span style="color:orange">新</span>闻客户端
    </p>
    <h3>练习</h3>
    <p>
        <span style="color:red;">中秋月圆夜，天涯共此时。</span>
        今年中秋前夕，送上中秋的节日祝福，祝家家户户都平安、健康、快乐。
    </p>
</body>
</html>

5. 元素的显示方式

行内元素	块级元素	行内块元素
靠标签中的内容撑开, 内容为文字,从左向右横着排	块级元素,从上到小排列,默认独占父级的一行,宽度和高度可以设置, 也可以依靠内容撑开	和内联元素一样, 是从左到右横向排列的,内容不够浏览器宽度时换行显示; 又与块级元素一样,可以设置宽高, 具有自己默认的宽度和高度, 不依靠内容撑开
span,b,strong,i,del,u,s,sub,sup	h1~h6, p, div	img, input

6. 单标签

6.1 水平分割线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单标签</title>
</head>
<body>
<!--水平分割线
    '<hr>' 或 <hr/>
    size="50": 设置hr的厚度
    width="10%": 设置hr的宽度
    color="pink": 设置hr的颜色
    align="left/center/right": 设置hr的水平对齐方式
-->
    <div>演示分割线的效果</div>
    <hr size="50" width="30%" color="pink" align="left">
    <div>以上为分割线</div>

<!--
    HTML属性:
        一个元素是由 '标签+ 属性 + 内容' 组成
        <hr size="50" width="30%" color="pink" align="left">
-->
</body>
</html>

6.2 换行标记

<!--换行标签-->
    <span>一轮弯月、一只作跳跃状的兔子、
<!--        浏览器在解析文本的时候, 有空格折叠现象
            空格折叠现象:浏览器把代码文本中的所有空格和回车都解析成一个空格
            注意:如果在一段文字中,想让文字换行显示,使用br是非常明智的
-->
        <br>一只口衔仙草的蟾蜍……湖南长沙，马王堆汉墓出土的T形帛画上，
        <br/>充满自然气息和神秘色彩的“中秋元素”，
        <br>展现了古人对宇宙和生命的浪漫想象。
    </span>