## 第十一章 前端开发
html 超文本标记语言
html特征：
- 对换行和空格不敏感
- 空白折叠（无论多少空格都折叠程）
### 11.1 标签
标签：
- 双闭合标签<html></html>
- 单闭合标签<meta charset='UTF-8'>
head标签：
- meta 基本网络元信息标签
- title 网络的标签
- link 链接css文件
- script 链接JavaScript文件
- style 内嵌样式
body标签：
- h1-h6标题标签
- p标签 段落标签
- a anchor 锚点 超链接标签
- href 链接的网址
- title 鼠标悬浮上的标题
- style 行内样式
- target 目标
- 默认是_self 在当前页面中打开新的链接
- _blank 在心得空白页打开新的链接
- img
- src 链接的图片资源
- title标题
- style
- alt 图片资源加载失败的时候显示的文本
- ul 无序列表
- li
- ol 有序列表
- li
- table
- form
- input
- type 控件的类型
- text 文本输入框
- password 密码框
- radio 单选框
- checkbox 多选框
- name
- 名称 提交服务器的键值对中的name
- value
- 值 提交服务的键值对中的value
- select name mutiple:多选框
- option value
- textarea
- name
- value
- clos
- rows
- div
- 称为盒子标签，divsion：分割
- 把网页分割成不同的独立逻辑区域
- width 内容的宽度
- height 内容的高度
- padding 内边距，border到内容的距离
- border 边框
- margin 外边框
- lable
- 它中的for属性跟单控键的id属性有关联
#### 11.1.1 行内标签与独占一行标签（标签总结）
行内标签
```html
b
strong 加粗
i
em
a
img 图片
input
td 表格中的
```
独占一行的标签
```html
h1 - h6 字体
ul 无序表格
ol 有序表格
li
form 方式
table
tr
p 换行
div 块
```
### 11.2 css的引入方式
三中css的引入方式：
- 行内样式
```html
<div style="color:red;">liujia</div>
```
- 内嵌式
```html
在head标签内部书写
<style>
/*css代码
</style>
```
- 外接式：
```html
<link href='css/index.css' rel='styleheet'
```
- 三种引入方式的优先级
- 行内>内嵌=外接
- 内嵌和外接看谁在后面，在后面的优先级高
#### 11.2.1 css选择器 基础选择器
id选择器 唯一的
```html
#xxxx
```
类选择器 可以重复，归类，类可以设置多个
```html
语法：.xxxxx
<style>
.box{
width:200px;
height:200px;
backgroup-color:yellow;
}
</style>
<div class='box active'></div>
<div class='box'></div>
<div class='box'></div>
```
标签选择器：
```html
div{}
p{}
ul{}
ol{}
.....
```
#### 11.2.2 高级选择器
后代选择器：
```html
div p{color:red;}
```
子代选择器
```html
div>p{color:green;}
```
组合选择器：
```html
div,p,body,ul....{
color:red;
padding:0;
margin:0;
}
```
交集选择器：
```html
div.active{
}
```
#### 11.2.3 层叠性和继承性
继承性：在css有些属性是可以继承下来，color，text-xxx，line-height，font-xxx是可以继承下来的
权证的比较规则：
- 继承来的属性权重都为0
- 选中标签
```html
选中标签时，权重的比较：
1.数选择器个数：id 类 签 谁大它的优先级就高，如果一样大，后面的属性会覆盖前面的属性
2.选中的标签的属性优先级大于继承来的属性
3.同时继承来的属性
3.1 谁描述的最近，谁的优先级就高
3.2 描述的一样近，这个时候才回归到树选择器的数量
```
11.2.4 html的嵌套关系
```html
<!--块级标签：1.独占一行 2.可以设置宽高，如果不设置宽高，默认就是父标签的100%宽度-->
<!--行级标签：1.在一行内显示 2.不可以设置宽高。如果不设置宽高，默认就是字体的大小-->
<!--行内块标签：1.在一行内显示 2.可以设置宽高
在网页中：
行内装块和行内块经常使用
display:
inline 行内
inlint-block 行内块
block 块
嵌套关系：
1.块级标签可以嵌套块级和行内以及行内块
2.行内标签尽量不要嵌套块
3.p标签不要嵌套div，也不要嵌套p，可以嵌套a/img/表单控件
```
浙公网安备 33010602011771号