0%

Web_note

HTML

段落/换行/字符实体

1
2
3
4
5
6
7
8
9
<body></body>  -->  里面写内容
<h1-6>test</h> --> 标题
<p></p> --> 文本段落
> --> >大于号
< --> <小于号
<br /> --> 换行
&nbsp --> 字符实体 空格
<!-- -->&&/**/ --> 注释
<hr> --> 横线

**块/含样式的标签**
1
2
3
4
5
<div></div>  -->  块
<em> --> 行内元素,强调
<i> --> 行内元素,专业词汇
<b> --> 行内元素,表示文档中的关键字
<strong> --> 行内元素,表示非常重要的内容

**图片插入/链接**
1
2
3
<img src="路径" alt="定义属性" />  -->  优先使用相对路径,而不是绝对路径
点击图片可以,跳转到网址,跳转网址写到图片的前面,如<a herf="xxx"><img src="xxx"></img></a>
target="_black",弹出新界面,写在<a href="xxx">网址里面
**Emmet插件使用方法** [Emmet插件使用方法](http://m.hangge.com/news/cache/detail_1537.html)
1
2
ol>li*3再加一个tab   -->  新建有序列表
ul>(li>a{新闻})*3 --> 新建无序列表

**列表标签**
1
2
dd  -->  术语解释
dt --> 属于题目

**表格,传统布局table布局**
1
2
3
4
5
6
7
8
9
10
<table>  -->  定义一个表格
border --> 定义边框的数值
cellpadding --> 单元格内容与边框的距离
cellspacing --> 单元格与单元格之间的距离
<tr> --> 行
<td> --> 列
align --> 单元格内容的水平对齐方式
valign --> 单元格内容的垂直对齐方式
colspan --> 单元格水平合并
rowspan --> 单元格垂直合并
### html表单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<form>  -->  定义一个表单

<label> --> 定义文字标注

<input> --> 定义通用的表单元素

# type属性
type="text" --> 单行文本输入框

type="password" --> 密码输入框

type="radio" --> 单选框

type="checkbox" --> 复选框

type="file" --> 上传文件

type="submit" --> 提交按钮

type="reset" --> 重置按钮

type="image" --> 图片作为提交按钮,用src属性定义图片地址

type="hidden" --> 隐藏的表单域,用来存储值

value --> 表单元素的值,提交后会显示在浏览器地址栏

name --> 表单元素的名称,此名称是提交数据时的键名,提交后会显示在浏览器地址栏

<textarea> --> 多行文本输入框

<select> --> 下拉表单元素

<option> --> 与<select>标签配合,下拉表单元素中的选项

for --> 不常用属性,比如输入用户名时,正常点击用户名是无法进入输入框的,用for就可以了

## CSS ### CSS基本语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
相对路径下css文件夹,css文件

[推荐使用]第一种外联式调用方式在<head>里面,用<link xxx href="css/xxx.css">

定义一个块的样式:
div{
font-size: 16px; --> 字体大小
color: red; --> 颜色
}

第二种内嵌式调用方式在<style>里面使用,用class定义.xxx

定义一个块:
<div class="box">xxx</div>

第三种插入式调用方式在行内元素里面使用,用style定义元素属性

定义一个链接:
<a href="https://www.baidu.com" style"font-size:20px;color:yellow">百度</a>

### CSS颜色表示法
1
2
3
4
5
颜色名直接表示,如red是红色,yellow是黄色

rgb表示,如rgb(255,0,0)表示红色

16进制数表示,如#ff0000 表示红色,这种可以简写成 #f00
### CSS选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
一、标签选择器,应用在层级选择器中
就是直接定义一种标签
在<head>的<style>中使用
div{
font-size:25px;
xxx;
}

<body>
<div>xxx</div> 使用同一文字大小25px
<div>XXXX</div> 使用同一文字大小25px
</body>

二、id选择器,一般给程序使用,所以不推荐用
在<head>的<style>中使用
#box{
font-size:25px;
xxx;
}

<body>
<div id="box">xxx</div> 使用上面定义的文字大小25px
</body>

三、类选择器,通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器

快速输出带class的div块 --> .box01 + tab

在<head>的<style>中使用
.box01,.box02{ /*同时用到了组选择器,给两个组同时定义*/
color: red;
}

.box01{
font-size:25px;
xxx;
}

.box02{
font-size:20px;
xxx;
}

<body>
<div class="box01">xxx</div> 使用上面定义的红色,文字大小25px
<div class="box02">XXXX</div> 使用上面定义的红色,文字大小20px
</body>

四、选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突

就相当于在div块里面,用来span,给span定义值

.box span{
color:red
}
.box .red{
color:pink
}
.red{
color:red
}

<div class="box"><span>....</span><a href="#" class="red">....</a>
</div>

五、组选择器,详情见三选择器

六、伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中插入内容

就是鼠标经过一个链接时,链接改变形式

.link{
font-size: 23px;
color: yellow;
}

.link:hover{
color: blue;
font-weight: bold;
font-style: italic;
}

<a href="http://www.baidu.com" class="link">百度</a>

### CSS盒模型
1
2
3
4
5
6
7
最外层是盒子距离浏览器的数值,margin
中间是盒子壳的数值,border
border: 10px double #000;
里面是div距离盒子壳的数值,padding

padding和margin只设置一次或者几次的顺序
上右下左/上,左右,下/上下,左右
**border是soild**

margin是auto

CSS盒形使用技巧

1
margin: 20px auto 50px;  -->  auto默认水平居中,margin只能用水平居中,垂直居中不适用

### CSS盒形实际尺寸
1
2
3
盒子宽度 = width + padding左右 + border左右

盒子高度 = height + padding上下 + border上下

### 盒模型使用技巧
1
2
3
4
5
6
7
设置元素水平居中: margin:x auto;

margin负值让元素位移及边框合并:margin: -1px;

text-align: center; /*直接字体水平居中*/

line-height: 30px; /*字高等于行高,能垂直居中*/

### 盒模型外边距合并 **当两个垂直外边距相遇时,形成一个外边距,合并后的外边距的高度等于两个外边距中的较大值,比如50px和30px,取50px的那个** - 1. 使用这种特性 - 2. 设置一边的外边距,一般设置margin-top - 3. 将元素浮动或者定位

盒模型margin-top塌陷

  1. 外部盒子设置一个边框
    1
    2
    3
    4
    5
    6
    .box01{
    width: 300px;
    height: 300px;
    background-color: gold;
    border: 1px solid #000; /*第一种用边框解决margin-top塌陷的方式*/
    }
  2. 外部盒子设置 overflow:hidden
    1
    2
    3
    4
    5
    6
    .box01{
    width: 300px;
    height: 300px;
    background-color: gold;
    overflow:hidden; /*第二种用元素溢出解决margin-top塌陷的方式*/
    }
  3. 使用伪元素类:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .clearfix:before{
    content: '';
    display:table;
    }
    <body>
    <div class="box clearfix">
    <div class="box02">xxx</div>
    </div>
    </body>

### CSS元素溢出 **overflow属性,上面的解决盒模型margin-top塌陷,第二种方式用来元素溢出的方法overflow** 1. visible 缺省值,溢出的元素可见 2. hidden 将溢出的元素裁剪隐藏 3. scroll 显示滚动条,不管是否溢出 4. auto 溢出的时候产生滚动条,不溢出的时候不显示
### CSS盒子类型 1. **块元素** div、p、ul、li、l1~l6、dl、dt、dd 如果没有设置宽度,默认的宽度为父级宽度100% 2. **内联元素** 行内元素,a/span/em/b/strong/i 1.不支持宽/高/margin上下/padding上下 2.宽高内容决定 3.代码换行,盒子之间会产生间隙 解决内联元素间隙的方法 1.去掉内联元素之间的换行 2.把内联元素的父级设置font-size为0px,内联元素自身再设置font-size为16px 4.子元素是内联元素,父元素可以用text-align属性设置子元素的水平对齐方式
1
2
.con:hover .box2{
}

em和rem

rem = html标签设置的font-size大小的多少倍
em = 盒子内文字大小font-size的多少倍

CSS文本设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
font-size 设置文字的大小,如:font-size:12px;

font-family 设置文字的字体,如:font-family:'微软雅黑';

font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,font-style:'italic';设置文字倾斜

font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

line-height 设置文字的行高,设置行高相当于在每行文字的上下同时加间距, 如:line-height:24px; 行高示例图片

font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑';

text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉,加上下划线就是underline

text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px 行高示例图片

text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中

## JS ### 获取元素方法一: **1. 把script放到div下面,不推荐**
1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<meta charset="UTF-8">
<title>获取页面元素</title>

</head>
<body>
<div id="div1">这是一个30px的red_div标签</div>
<script type="text/javascript">
var oDiv = document.getElementById('div1')
oDiv.style.color = "red";
oDiv.style.fontSize = "30px"
</script>
</body>

**2. 在script中写入window.onload = function(){}**
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<meta charset="UTF-8">
<title>获取页面元素</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1')
oDiv.style.color = "red";
oDiv.style.fontSize = "30px"
}
</script>
</head>
<body>
<div id="div1">这是一个30px的red_div标签</div>
</body>

Note

isNaN:isNaN
是数,返回false;非数,返回true

跳转

1
2
3
4
5
6
7
8
9
10
11
<script> 
function delayURL(url, time) {
setTimeout("top.location.href='" + url + "'", time);
}
</script>

<script type="text/javascript">
delayURL("http://www.baidu.com/", 3000);
</script>

<!-- 等待三秒跳转到百度 -->

欢迎关注我的其它发布渠道