标签嵌套
div 块级标签
span 行内标签
这两个标签主要用于页面的前期的结构布局
标签之间可以互相嵌套,理论上可以无限嵌套
<div>
<div>
<a></a>
</div>
<p></p>
</div>
块级标签可以嵌套块级标签和行内标签,但是p标签是个例外,它是不能嵌套块级标签的。
PS:前端不会轻易报错的。
以小米官网为例:
div通常是解决导航条和页眉之类的布局。
span主要是用来给文本占位的。
![](https://s3.bmp.ovh/imgs/2021/08/74e5daabd420db23.png)
input标签
value参数:相当于默认值
本质:用户数据其实都是由value参数存储
placeholder参数:相当于提示信息
checked参数
针对radio和checkbox,可以默认选中
checked = "checked" 可以简写成 checked
select标签
option子标签:selected = "selected" 可以简写成 selected
form标签
action参数:用来控制数据提交的地址。
novalidate参数:取消浏览器的校验动作。
button标签
需要在form表单的内部,才能触发提交功能。
CDN:内容分发网络
主要功能:使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。
有不少的网站对于常见的软件开设了免费的CDN服务
例如:前端相关CDN服务可以上:https://www.bootcdn.cn/
PS:使用CDN的前提是计算机必须时刻有网络。
![img](https://img2.baidu.com/it/u=3000391345,3991826069&fm=26&fmt=auto&gp=0.jpg)
CSS层叠样式表
css就是用来调节html标签样式的。
语法结构:
选择器{
属性名1:属性值1;
属性名2:属性值2;
}
语法注释:/*注释内容*/
css有三种引入方式
1.style标签内部书写
<style> 选择器{属性名:属性值;} </style>
2.link标签herf引入外部css文件
<link href = "" rel = "stylesheet" />
3.标签内部直接书写
<p style = "";></p>
上述三种方式中最正规的是第二种方式,第三种通常不使用。
![](https://s3.bmp.ovh/imgs/2021/08/7e31470f23b0dad7.png)
CSS选择器
基本选择器
基本选择器有四类:
1.元素选择器:直接写标签名即可
p{color:red}
2.类选择器:书写标签class属性值并在前面加点
.c1{color:red}
PS:标签中的class属性如果有多个,要用空格分隔,不要用数字开头。
3.id选择器:书写标签id属性值并在前面加#
#d1{color:red}
4.通用选择器:所有的标签
*{color:red}
![](https://s3.bmp.ovh/imgs/2021/08/d16a4f8d54149a63.png)
组合选择器
在前端我们表达标签之间的嵌套关系的关键点就在于嵌套的层级。
组合选择器也分为四类:
1.后代选择器
li a{color:red;}
2.儿子选择器
div>p{font-family: "Arial Black", arial-black, cursive;}
3.毗邻选择器
div+p{margin:5px;}
4.弟弟选择器
#i1~p{border:2px solid royalblue;}