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;">新华网上海7月26日电(记者李荣)26日13时36分至47分这一时间段,上海徐家汇气象观测站测得当日最高温达40.6摄氏度。这是上海有气象记录以来140年的高温新纪录,打破了此前1934年创下的40.2摄氏度的历史极值。</p> <p style="background-color: #655280;">上海已经连续2天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说,今年副热带高压强度特别强,对上海及江南地区的控制“实在太稳定了”,整个7月份基本上都处在它的势力范围之内。25日上海已出现了气象史上7月份“第四高”的高温值,这使得26日的“基础”气温就很高,超过了30摄氏度,然后不断地升温。此外,26日白天风小,又吹的是西南风,特别是在中午之后这一个最易出现高温的时段,光照又比较强,所以气温“直线飙升”,一举冲破历史极值,出现了“创纪录”的极端酷暑天。</p> <p style="background-color: #ff6da2;">在上海历史上,出现40摄氏度以上极端高温的几率并不大。根据相关资料,中心城区徐家汇观测站140年来仅出现了5次记录,除了这一次的新纪录,还有就是1934年7月12日的40.2摄氏度;1934年8月25日、2009年7月20日、2010年8月13日的40摄氏度。</p> <p style="background-color: #5df2ff;">由于气温实在太高,上 海2 6日下午不少地区出现了热对流天气。气象台说,首先是浦东地区,下起了热雷雨。到15时05分,全市大部分地区出现了分散性的雷电活动和热雷雨,中心城区徐家汇等地都响起了隆隆的雷声。</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标签都只能嵌套行元素或行内块元素)