标题
- 语法:h1-h6
- 语义:标题
- 特点:默认加粗
字体大小数字越大字体越小
独占一行
每行之间有间距
没有设置宽度的情况下默认宽度为父元素的宽度 - 注意:
h1标签在页面中只能使用一次
所以H1标签要给页面中最重要的部分
用途:在新闻页面中给新闻标题
电商页面给logo
段落
- 语法:
<p>段落内容</p>
- 语义:段落
- 特点:独占一行
每行之间有间距
没有设置宽度的情况下默认宽度为父元素的宽度 - 注意:p标签不能嵌套标题和段落(块元素)
div
- 语法:
<div>内容</div>
- 语义:无语义
- 特点:独占一行
没有设置宽度的情况下默认宽度为父元素的宽度 - 注意:div标签可以包含任何元素,用来做排版和布局
p和div的共同点和区别:
1.都独占一行,但是p标签里面不可以嵌套标题和段落,而div可以包含任何元素。
span
- 语法:
<span>内容</span>
- 语义:无语义,一般用来存放一小段文本
- 特点:一行多个
默认宽度为内容的宽度 - p标签和span标签没有绝对的用法
格式化标签
- 语义:本身带有一定样式的标签
<b></b>
加粗
<strong></strong>
加粗。但是具有强调作用
<i></i>
斜体,一般用于字体图标
<em></em>
斜体,加重语气
<sub></sub>
定义下标字体
<sup></sup>
定义上标字体- 特点:一行多个
默认宽度为内容的宽度
无序列表
- ul:定义无序列表
- li:定义列表项
- 注意:两者缺一不可
ul的子元素只能是li
li的父元素只能是ul或者ol
li的子元素可以使任何元素 - 通过type属性可以改变默认的无序列表样式,type属性添加给ul,type取值:
disc实心圆(默认)
circle空心圆
square实心方块
有序列表
- ol:定义有序列表
- li:定义列表项
- 注意:两者缺一不可
ol的子元素只能是li
li的父元素只能是ul或者ol
li的子元素可以使任何元素 - 通过type属性可以改变默认的有序列表样式,type属性添加给ol,type取值:a,i,A,I,1
自定义列表
标签定义了自定义列表
:定义列表中的项目标题
:描述列表中的项目
注意:dl的子元素只能是dt或者dd
dt和dd是兄弟关系(并列)
一个dt后面可以跟多个dd
表格
标签:(最少必须包含table,tr,td三个标签)
- table定义表格
- tr定义表格的行
- td定义表格的单元格
- th定义表格头
- thead表格的结构化标签,表示表头
- tbody表格的结构化标签,表示表体
- tfoot表格的结构化标签,表示表尾
属性:
- border:设置表格的边框,添加在table标签上
- cellpadding:单元格填充补白,也就是单元格边框与内容的距离,添加在table标签上
- cellspacing:单元格之间的距离,添加在table标签上
- colspan:跨列,添加在单元格上
跨n列,就删除掉后边的n-1个单元格 - rowspan:跨行,添加在单元格上
跨n行,就删除掉后面的n-1行,每一行删除掉一个单元格 - width:设置宽度,可以添加在table,tr,td,写在标签里面不加单位
- height:设置高度,可以添加在table,tr,td,写在标签里面不加单位
注意:
一般使用表格的时候就添加上以下代码:
table{
border-collapse: collapse;
}
th,tr,td{
border: 1px solid #000;
}
图片
存放图片的文件夹和图片的命名,一定不能用中文
- 语法:
<img src="">
- 属性:
src:引入图片的路径(绝对路径和相对路径),必须添加的属性
alt:图片加载失败时的提示文本,只用于img标签
title:鼠标浮上图片时显示的提示文本,是可以加在其他标签上
width,height:设置图片的宽高,假如只添加一个宽或者高的话,或根据原有图片的宽高进行缩放
路径
- 绝对路径(一般不用)
以自己的计算机的盘符开始的路径和以http或者https开头的路径 - 相对路径
以正在操作的文件出发,去寻找目标文件
查找上一级../文件夹/文件.后缀名
查找下一级/文件夹/文件.后缀名
查找本级./可以忽略