码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2019-09-10 00:23:24      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:规则   int   head   继承   asc   显示   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 前段开发 标签的认识及运用

标签:规则   int   head   继承   asc   显示   python   权重   默认   

原文地址:https://www.cnblogs.com/doraemon548542/p/11495115.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!