doraemon的python 前段开发标签的认识及运用

## 第十一章 前端开发

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/表单控件
```
doraemon的python 前段开发 标签的认识及运用

猜你喜欢

doraemon的python 前段开发标签的认识及运用
