区块划分标签
把页面中的区域将进行划分显示,
1)段落标签
作用:文章的段落,自然段
语法:<p>文本</p>
特点:
会让文本呈现出一个独立的自然段,每一个段落和每一个段落之间存在一个段间距;同一个自然段里面多行文本之间有一个行间距
虚拟占位文本:lorem创建的 一个lorem生成一次虚拟文本,每次虚拟文本生成的内容不同; 如果想要生成比较多的虚拟占位文本: lorem*数值 代表的是出现多次
特殊1:默认纵向排列的
2)div盒子标签(双)
容器标签,是一个级别比较大的标签,里面可以盛放自己本身,盛放p,盛放文本修饰类型的标签
语法:<div></div>
特殊1:默认的情况下div是纵向排列的,应用于区块划分布局中
注意事项:
嵌套的注意事项: 主要是: 一层包裹一层;但是在嵌套的过程中
遵守:
1)区块划分里面嵌套文本修饰; 区块划分嵌套级别要比文本修饰的嵌套级别高
2)p标签里面不能嵌套其他区块划分标签;p标签里面不能嵌套自己本身;
3)列表标签
列表含义:即为清单
a)有序的列表清单(有序列表)
基本语法:
<ol> order list
<li>其他内容</li> list
<li>其他内容</li>
<li>其他内容</li>
<ol>
注意事项ji
1)ol,li都属于双标签
2)ol里面只能放li;如果想要出现其他标签的话,必须放在li里面
b)无序的列表清单(无序列表)
基本语法:
<ul> unorder list
<li>其他内容</li>
<li>其他内容</li>
<li>其他内容</li>
</ul>
注意事项:
1)ul,li都属于双标签
2)ul里面只能放li,如果想要放其他内容的话,必须放在li里面
c)自定义列表
主要应用于:图文混排, 问答列表
基本语法:
<dl>
<dt>图片/问答题目</dt>
<dd>解释说明/答案</dd>
</dl>
问题:dl里面是否可以放置多个dt和dd
可以放置多个,但是一般情况下,我们比较推荐你放置1个dt和1个dd
4)图片标签
语法:<img src="图片的路径" alt="">
1)src属性
路径地址属性,通过该属性能查找到图片(其他文件)所在的位置
相对路径:通过文件和文件夹的关系,查找对应的文件,这种查找形式的地址信息被称之为相对路径
绝对路径:是一个完整的地址,是从某一个盘符,或者是互联网地址来开始
注意事项:
/ == 进入到某一个文件夹里面
./ == 当前目录所在位置,可以省略不写
../ == 返回上一级
../../ == 返回上两级
路径:即为地址,存放位置的意思,可以理解成,查找这个图片的一个途径
目前来看我们使用的路径:大部分都是相对路径:在站点内,通过文件和文件夹之间的关系来查找对应的文件;
2)alt="图片描述属性"
只有图片没有正常加载出来的时候,才会显示的提示信息
应用场景:为了方便服务器加载缓慢,或者是网速过慢,导致图片没有正常显示,同时又 想让用户知道图片区域显示的内容是什么我们才使用的这个属性
提示文本:占位置
3)title="图片/文本提示"
无论图片是不是破损文件,只要鼠标放在上面就有对应的文本提示
提示文本不占页面控件
问题1:
06_图片标签.html和pic_fei.png两个之间是什么关系;同级别关系
图片名字可以当做路径使用
问题2:
06_图片标签.html和pic_shuang.png两个之间是什么关系;
不是直接的同级关系的话,考虑文件关系
返回上一级,然后进入到对应的文件夹中找到对应的图片
返回上一级:../
实际开发的时候最多返回:3级
5）超链接标签
超链接:实现,不同页面之间的跳转
基本语法:<a href="路径">文本/图片</a>
总结:超链接标签,默认自带下划线,默认文本颜色为蓝色,点击之后颜色为紫色
注意事项:默认超链接,是再自己原有窗口中打开的新页面
超链接标签里面除了有href属性之外,还有其他属性
1)href="超链接属性"
2)target="控制插连接打开形式"
是再本窗口中打开,还是再新窗口中打开
_self;(*) 再自己的窗口中打开,默认值
_blank;(*) 再新窗口中打开的
_top; 再顶部框架中打开
_parent; 再父级框架中打开
超链接实现锚点功能:
两部分组成:点击区域,跳转区域
锚点名字就是跳转区域的名字
点击区域: <a href="#锚点名字"></a>
跳转区域: <p id="锚点名字">文本</p>
6）标题标签
文章的标题标签(双)
作用:就能实现不同文章类型页面中的标题区域显示
<h1>一级标题</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>六级标题</h6>
总结:标题标签有哪些特点?
1)都是双标签,总共有6个级别
2)默认自带加粗效果,默认自带换行效果
3)h1最大,h6最小,
应用场景:
h1一般情况下应用于大标题,logo位置处
h2一般情况下应用于副标题
h3一般情况下应用于小标题
h4-h6==根据实际开发情况来决定使用
7）表单标签
1)含义及作用:表单就是我们页面中输入信息的部分(区域),主要是用来收集用户的信息,把信息 通过表单标签上传到服务器的数据库里面
2)表单的基础语法
<form>
里面放置的是各式各样的控件
控件:页面中你能输入,能点击,能选择的区域
</form>
3)form表单标签的的标签属性
target="控制提交数据后,页面的打开形式"
action="提交跳转地址"
method="提交方法,控制我们提交的时候使用明文提交还是密文提交"
4)表单基础中的控件内容
a)输入框(单)
单行文本输入框
<input type="text" value="让输入框显示一个值">
value属性是值的意思，给你一个值让你显示
通过value属性如果单做文本提示的话并不好,用户的体验度不高,
如何增强用户体验度,起到提示信息的作用
placeholder="文本" 占位符,不占页面空间
b)密码框(单)
单行输入密码框
<input type="password">
c)按钮类型
提交按钮 <input type="submit">
作用:配合form标签以及他的action属性完成跳转
重置按钮 <input type="reset">
作用:配合form标签能清空所有输入的数据
普通按钮 <input type="button">
作用:没有任何功能
d) 双标签button按钮 <button>文本</button>
双标签button配合form能提交跳转功能,如果没有form他就是一个普通按钮
图像按钮 <input type="image" src="图片路径">
图像按钮,有提交跳转功能;
f) 如果想要再地址栏中显示你输入的信息,需要给你的input标签添加name属性
name属性的取值,是用来暂时暂存接受你输入的信息,
实际开发的时候我们几乎不应该让用户看到密码,因为安全性的问题
通常情况下我们需要设置数据的提交形式
method="get/post"
get=明文提交,能看到输入信息,安全性低
post=密文提交,不能看到输入信息,安全性高
8)表格
作用:是用来展示用户信息的;显示的区域比较横平竖直,比较整齐划一
应用场景: 后台管理系统, 大部分都在使用; 比较整齐划一的网站,用来展示信息的时候
基本语法:
<table>
<tr>
<td>文本/其他的标签</td>
</tr>
</table>
table=====表格
tr========表格的行,一个tr代表的是一行;
td========表格的单元格,表格的列,一个td代表的是一行里面的一列
table的标签属性:
1)边框属性
border="1"
注意:给table添加边框的时候,td也会出现1px的边框
2)宽度和高度(*)
width=""
height=""
注意:1)可以设置宽度高度,没有单位的话默认是以px为单位的
2)宽度可以直接设置百分比, 但是高度不能直接设置;参照父元素的高度,进行百分比的实现;
注意事项:
默认情况下,单元格里面的内容,数量一致的话,则宽度高度默认是均分的;但凡不一致,则宽度高度不一样
3)背景颜色
bgcolor="red"
4)表格的水平对其方式
align="left/right/center"
5)调整单元格与单元格之间的缝隙(*)
cellspacing="数值"
6)调整单元格与内容之间的缝隙(*)
cellpadding="数值"
7)边框的颜色
bordercolor="red"
8)表格的内边框线(表格的横纵线)
rules="rows/cols"
rows===横向的边框线
cols===纵向的边框线
9)表格的外边框线条(最外边的一圈)
frame=""
above;=====上外边框线
below;=====下外边框线
lhs;=======左边框线(left horizontal side)
rhs;=======右边框线(right horizontal side)
tr标签属性
1)高度属性
height="设置的是一整行单元格的高度"
2)背景颜色
bgcolor="red"
设置的是一整行单元格的颜色
3)表格行中单元格的对其方式
a)设置一整行单元格的文本水平对其
align="left/right/center"
b)设置一行单元格的的文本垂直对其
valign="top/bottom/middle"
td的修饰
注意事项:如果你单元格里面的内容数量一致的话,则宽度高度是默认均分的;
1)宽度和高度属性
给单元格设置宽度,会影响该单元格所在的一整列单元格的宽度
给单元格设置高度,会影响该单元格所在的一整行单元格的高度
2)背景颜色
bgcolor="red"
3)对其方式
设置的是整个单元格的对其方式
align=""
valign=""
最重要的两个属性(*******)单元格的合并属性
4)水平合并单元格
横向合并,只在本行中操作,跨的是列,从第几列到第几列,总共多少列
colspan="数值"
5)垂直合并单元格
纵向合并,需要去其他的行中进行操作,跨的是行,从第几行到第几行,总共多少行
rowspan="数值"
表格的CSS修饰
- 边框属性 border:1px solid gray;
- 调整单元格与单元格之间的间距 cellspacing
- 实现1px的边框=边框线合并border-collapse: collapse;
9)表格新增标签
1)表格的标题
caption标签,双标签
位置:table里面,第一个tr出现的位置之前;
2)直接使用自带选择器的时候找不到td?
原因:若果你再使用表格布局的时候,没有使用行分组标签, 默认浏览器会自行给你创建一个tbody的行分组,
并且吧所有的tr放在这个tbody里面
注意:
总共有三个:行分组标签
tbody======表格主体
thead======表格头部
tfoot======表格尾部
使用的时候, 注意为了避免与浏览器中的tbody冲突, 我们推荐使用行分组标签;这样能精准的匹配元素
使用的时候, 注意,一个表格里面可以有多个主体,但是只能有一个头部,一个尾部;
3)表格的列分组标签
<colgroup span="让多少列划分成一组"></colgroup>
4)表格里面的标题行,标题列单元格标签
th等价替换的是td
两个标签可以混合使用
实现的效果: 加粗居中
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
