HTML块元素
div元素
-
整体页面布局当中最重要的 HTML 元素
-
没有任何具体的含义，主要用于网页的布局，通过一个一个的div将页面划分为不同的部分，之后在针对部分进行开发
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--div标签：没有任何具体的含义，主要用于网页的布局，
通过一个一个的div将页面划分为不同的部分，之后在针对部分进行开发-->
<!--网页分块要求：先分行 在分列-->
<!--网页的最外层-->
<div>
<!--头部区域-->
<div>
我是头部
</div>
<!--导航区域-->
<div>
我是导航
</div>
<!--主要内容区域-->
<div>
<!--主要内容上部分-->
<div>
上部分
</div>
<!--主要内容下部分-->
<div>
<!--内容左-->
<div>内容左</div>
<!--内容右-->
<div>内容右</div>
</div>
</div>
<!--底部区域-->
<div>
底部区域
</div>
</div>
</body>
</html>
h1~h6元素
- h1～h6 标签分别表示不同级别的标题，
<h1>定义最大的标题，<h6>定义最小的标题。 - 在浏览器默认状态下，每种标题均为加粗效果，各自对应不同的文字大小
1、不要因为标题的字号大小很小，而使用低级别的标题,字号大小可以通过css的font-size来控制
2、尽量避免跳过某一级标题，依次使用
3、需要避免在同一个网页中多次使用h1元素，h1经常用在网页的标题或者是logo上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<div>
<!-- ctrl+d 复制整个一行-->
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
<!--标题样式 字号大小：由大到小 默认加粗状态
默认上下有一定的间隙-->
</div>
</body>
</html>Copy to clipboardErrorCopied
段落元素和换行元素
内容讲解：
- p 标签用于定义一个段落
<p>XXXX</p> <br>标签表示换行，为单标签，通常出现在 p 标签中- 每个 p标签 表示一个段落，而使用 br 标签换行，通常被称为软换行，段落的文本从一个新行开始，但是这些文本依旧是一个段落
- br不要来增加文本之间的间隙 我们可以使用css的margin来代替
- br标签是一个单标签 也是一个空元素,早期版本 <br /> ,但是在h5中，已经把 / 给省略了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--meta标签是一个空标签 单标签-->
<title>p标签</title>
</head>
<body>
<div>
<h2>html5XXXXXXXXXX</h2>
<p>
html5是html语言的第五次重大修改。。。。 html5 <br>是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次
<br>重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5
<br>是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语 <br>言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。 html5是html语言的第五次重大修改。。。。
</p>
<p>html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀html5前端开发工程师很香呀</p>
</div>
</body>
</html>Copy to clipboardErrorCopied
小练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>气象新闻练习</title>
</head>
<body>
<div>
<h1>40.6摄氏度： 上海创出140年气象史上高温新纪录</h1>
<p>2013年07月27日</p>
<!--hr标签代表一个横线-->
<hr>
<div>
style属性是给某个标签添加样式，本案例为添加一个背景颜色（后期课程学习）
<p style="background-color: #fffbb5;">新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值。</p>
<p style="background-color: #655280;">上海已经连续２天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。２５日上海已出现了气象史上７月份“第四高”的高温值，这使得２６日的“基础”气温就很高，超过了３０摄氏度，然后不断地升温。此外，２６日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天。</p>
<p style="background-color: #ff6da2;">在上海历史上，出现４０摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站１４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p>
<p style="background-color: #5df2ff;">由于气温实在太高，上 海２ ６日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</p>
</div>
</div>
</body>
</html>Copy to clipboardErrorCopied
有序列表和无序列表
- 无序列表
- ul 表示无序列表，表示出是带有项目符号列表
- ul元素前边的符号可以是任何的形式 ,我们可以通过css的list-style-type属性控制
- 没有规定ul和li嵌套的深度
- 有序列表
- ol 表示有序列表，显示出是带有编号的列表
- ol元素前边的编号可以是任何的形式 我们可以通过css的list-style-type属性控制
- 没有规定ul和li嵌套的深度
- 无论是 ul 还是 ol ，列表中每个具体的列表项都使用的是 li 标签
- 使用规范：
- ul li 、 ol li 是组合标签
- ol或ul的子元素 必须只能是li，li的父元素只能是ol或ul。根据规范，不建议在ul和li嵌套的中间 书写其他元素
- li中可以嵌套任何元素
案例代码及效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ol标签和ul标签</title>
</head>
<body>
<div>
<div style="background-color: red;font-size: 30px;">
<h2>尚硅谷校区时间排名</h2>
<ol>
<li>北京校区</li>
<li>深圳校区</li>
<li>上海校区</li>
<li>武汉校区</li>
<li>郑州校区</li>
</ol>
</div>
<div>
<h2>你喜欢吃的东西有哪些</h2>
<ul>
<li>上海红烧肉</li>
<li>北京卤煮</li>
<li>北京豆汁</li>
<li>柳州螺蛳粉</li>
</ul>
</div>
</div>
</body>
</html>Copy to clipboardErrorCopied
ul和ol的其他用法
ul和ol也可以用于重复结构的 大块内容布局。
练习及代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ul和ol的用法</title>
</head>
<body>
<!--
ul、ol和li的使用规范：
1、ul li ol li 是组合标签
2、ol或ul的子元素 必须只能是li
3、li的父元素只能是ol或ul
4、根据规范，不建议在ul和li嵌套的中间 书写其他元素
5、li中可以嵌套任何元素
-->
<div>
<h1>前端工程师招聘列表</h1>
<ul>
<li>
<h2>UI前端工程师</h2>
<p>
<span>20K-30K</span>
<span>深圳-南山区</span>
</p>
<p>求贤若渴</p>
</li>
<li>
<h2>UI前端工程师</h2>
<p>
<span>20K-30K</span>
<span>深圳-南山区</span>
</p>
<p>求贤若渴</p>
</li>
<li>
<h2>UI前端工程师</h2>
<p>
<span>20K-30K</span>
<span>深圳-南山区</span>
</p>
<p>求贤若渴</p>
</li>
<li>
<h2>UI前端工程师</h2>
<p>
<span>20K-30K</span>
<span>深圳-南山区</span>
</p>
<p>求贤若渴</p>
</li>
<li>
<h2>UI前端工程师</h2>
<p>
<span>20K-30K</span>
<span>深圳-南山区</span>
</p>
<p>求贤若渴</p>
</li>
</ul>
</div>
</body>
</html>Copy to clipboardErrorCopied
自定义列表
- 定义列表包括 dl 、dt 、dd 三种标签
- 自定义列表是包含 术语 和 对术语描述 的列表 ，通常用来展示词汇表或者是对内容的解释
- 其中 dl 标签表示定义列表，dt标签表示定义列表的标题，dd 标签定义了列表的内容
- dl dt dd是组合标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义列表dl</title>
</head>
<body>
<div>
<dl>
<dt>html5</dt>
<dd>html5是在2014年10月29日宣布完成</dd>
</dl>
</div>
</body>
</html>
自定义列表的用法
-
单条解析和描述
<dl> <dt>html5</dt> <dd>html5是在2014年10月29日宣布完成</dd> </dl>Copy to clipboardErrorCopied -
多条术语的描述
<dl> <dt>html5</dt> <dt>css3</dt> <dt>js</dt> <dd> 他们仨结合起来就是传说中的网页三剑客 </dd> </dl>Copy to clipboardErrorCopied -
对一个术语 进行多次描述
<dl> <dt>html5</dt> <dd>html是真的好啊</dd> <dd>学了html5 每天天气真的好</dd> </dl>Copy to clipboardErrorCopied -
在一个dl中 可以有多个 术语-解析 这样的格式（类似键值对）
<dl> <dt>html5</dt> <dd>html5 好啊</dd> <dt>css3</dt> <dd>css3 真好啊</dd> <dt>js</dt> <dd>js 真的很简单</dd> </dl>Copy to clipboardErrorCopied
hr元素
基本使用
- h5规范：语义表示段落之间的主题转换，并不仅仅用在表现层上
- 旧版本中：他仅仅就是一个横线 只是表现层 没有什么语义
- 横线默认和父级一样宽
- 其实hr标签的表现是一个高度为0 宽度和父级一样宽的元素 拥有上下左右各1像素的边框，所以默认hr的线高度是2px
- 我们可以通过css来控制hr的样式
一条线的其他做法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一条线</title>
</head>
<body>
<!--第一种：空标签-->
<div style="height: 1px;background-color: red;"></div>
<!--第二种：边框-->
<div style="border-bottom: 1px solid pink;margin-top: 100px;"></div>
</body>
</html>Copy to clipboardErrorCopied
块标签的特性
- 独占一行，换行显示
- 可以设置宽高
- 可以容纳行内元素和其他块元素(p标签、h标签都只能嵌套行元素或行内块元素)
版权声明：本文为z-bky原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。