0%

html+css基础学习

Posted on In , Views: Valine:
Symbols count in article: 9.3k Reading time ≈ 8 mins.

html+css基础

html基础

head头配置

1
2
3
4
5
6
<meta charset="utf-8"/> <!-- 告诉浏览器用utf-8解析-->
<title>常用标签</title> <!--head头的标题-->
<meta name="keywords" content="前端"/> <!--meta可以作为关键字查询-->
<meta name="description" content="网页描述"/> <!--meta可以指定网页描述-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
<!--重定向请求-->

特殊字符

1
2
3
4
5
&lt <!--<号或小于号-->
&gt <!-->号或大于号-->
&nbsp; <!--英文空格-->
&emsp; <!--中文空格-->
&copy; <!--版权符号 @copy-->

input部分

1
2
3
4
5
6
7
8
9
<input type="radio" /> <!--这个是单选框-->
<input type="checkbox"/> <!--多选-->
<input type="password"/> <!--密码框-->
<input type="text" placeholder="用户名"/> <!--文本框，默认填充为用户名，提示-->
<input type="email"/> <!--email-->
<input type="range"/> <!--可拖动的进度条-->
<input type="date"/> <!--时间-->
<input type="image" src="download.img"/> <!--图片，点击可以提交-->
<input id="username" type="text"/> <!-- for 标签可以点击的时候转到指定id处-->

其他标签

1
2
3
4
5
6
7
8
<label for="username"></label>

<fieldset></fieldset> <!-- 这个是用于表单分组-->
<legend>用户名</legend> <!-- 子标签-->
<textarea>内容</textarea> <!--多行文本框-->

<h1></h1> <!-- 有6级 h1-h6 -->
<p> </p> <!-- 段落-->

图片

图片代码
1
2
3
4
5
6
7
8
<img src="1.gif" alt="这是一个大松树" width="200px" height="100px" /> 
<!--
alt是作为图片不能显示时候的描述
width 宽度
height 高度
只设置一个，另一个也会等比例修改
图片建议美工，不要修改宽比
-->
相对路径

相对于运行的html的路径

1
2
3
- index.html
-- img
   --- 1.jpg

index.html 就可以用 img/1.jpg这种路径

图片类型
  1. jpeg支持颜色较多，图片可以压缩，不支持透明
  2. gif支持颜色少，支持动态图，支持简单透明
  3. png支持颜色多，并支持复杂透明，通常用png

内联框架

1
2
3
4
5
6
7
8
9
<iframe src="demo2.html"></iframe>

<!--
src:指向一个外部页面的路径，可以使用相对路径
width:
height:
name:
内联框架内容不会被搜索引擎所检索
-->

超链接

1
2
3
4
5
6
7
8
9
10
11
<a href="http://www.baidu.com">文字描述</a> 
<a href="demo.html" target="_blank">文字描述</a>
<!--
href:
    #: 默认回到顶部
    #id: 去指定id处
target:
    _self 默认，当前窗口打开
    _blank: 新窗口打开
    某个内联框架name: 内联框架里打开
-->

居中

1
2
<center>所想要居中内容</center>
<!-- 将所有要居中的放到center中-->

table居中需要设置 width 跟height

div

  • div是一个纯粹的块元素，并且不会为其内部设置默认
  • div通常用来布局
1
<div style="backgroup-color: red; width: 200px;"></div>

span

1
<span>文字</span>
  • 行内元素，只占自身大小的元素，不会占一行
  • 通常用于设置文字颜色

文本标签

1
2
3
4
5
6
7
8
9
10
11
<em></em> <!--语气强调，    斜体显示-->
<strong></strong> <!--强调内容-->
<small></small> <!--合同中小字和版权放到small里-->
<cite></cite> <!--参考内容，加书名号的-->
<q></q> <!--引用内容-->
<blockquote></blockquote> <!--长引用-->
<sup></sup> <!--上标-->
<sub></sub> <!--下标-->
<ins></ins> <!--插入内容,下划线-->
<del></del> <!--删除内容,删除线-->
<pre></pre> <!--代码块-->
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
p{
    text-transform: capitalize;
    /*
    单词首字母大写，通过空格识别
    uppercase: 全大写
    lowercase: 全小写
    */
    text-decoration:
    /*
    underline下划线
    overline上划线
    line-through 删除线
    */
    text-align:
    /*
    文本对齐方式
    - left 左对齐
    - right 右对齐
    - justify 两边对齐
    - center 居中对齐
        - 通过调整文本之间的空格调整
    */
    text-indent:
    /*
    首行缩进
    正值，向右缩进
    负值，向左缩进
    */
}

### 列表

- 无序列表
    - ul无序列表
    - li是列表项
- 有序列表
    - ol有序列表
    - li是列表项
- 定义列表
    - dl 定义列表
    - dt 被定义内容
    - dd 被描述内容

type:
disc 实心圆点 默认
square 方块
circle 圆

无序列表

​```html
<ul>
    <li>1</li>
    <li>2</li>
</ul>

有序列表

1
2
3
<ol>
    <li></li>
<ol>

两个可以嵌套

长度单位

  • 像素 px
    • 像素
  • 百分比
    • 父元素的百分比
  • em
    • 相对于当前元素的字体大小

      rgb

#000000

第一组红色浓度
第二组绿色浓度
第三组蓝色浓度

1
2
rgb(161,187,215)
rgb(100%,50%,50%)

字体

1
2
3
color: red;
font-size: 30px; /*格子大小*/
font-family: 微软雅黑; /*字体类型*/

字体分类

  • serif 衬线字体
  • sans-serif 非衬线字体
  • monospace
  • cursive
  • fantasy

行高

1
2
3
4
5
6
7
8
9
p1{
    font-size: 20px;
    line-height: 40px;
    /*
    1. 行间距40-20=20px
    2. 可以指定一个百分比
    3. 数值，1.5就是1.5倍，150% 
    */
}

小技巧

div.box然后按tab 创建div类名叫box，这种用css语法自动补全

特殊规则

  • a元素可以包含任意元素，除了他本身
  • p元素不可以包含任何其他块元素

css基础

css选择器

选择器优先级

  • 内联>id>类和伪类>元素>统配选择器>继承样式

添加!important 就变成最高级别优先级了

类选择器
1
2
.class{
}

id选择器

1
2
#id{
}

元素选择器

1
2
h1{
}

属性选择器

1
2
3
4
5
6
7
8
9
10
11
p[title^=”hello"]{
}
/*
- 语法:
    - [属性名] 选取含有指定属性的元素
    - [属性名="属性值"] 选取含有指定属性值的元素
    - [属性名^="属性值"] 选取开头带有属性值的元素
    - [属性名$="属性值"] 结尾
    - [属性名*=”属性值"] 包含

*/

其他子元素选择器

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
p:first-child{
}
/*
同时是p元素也是第一个子元素
*/

p:last-child{
}
/*
同时是p元素也是最后一个子元素
*/

p:nth-child(1){
}
/*
- 参数
- num 指定个数处
- even 偶数个
- odd 奇数个
同时是p元素也是第1个子元素
*/

p:first-of-type{
}
/*
:first-of-type
:last-of-type
:nth-of-type
在同组类型中找到第某个
*/

兄弟元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
span + p{
}
/*
后一个兄弟元素选择器
可以选择一个接着的后面一个，这里选择span后的p
*/

span ~ p{
}
/*
后一个兄弟元素选择器
选中span后所有兄弟
*/

选择器分组

1
2
h2,.p2,#p{
}

交集选择器(复合选择器)

1
2
span.p3{
}

同时是span，也是p3

元素之间关系

  1. 父元素
  2. 子元素:
  3. 祖先元素: 直接或间接
  4. 后代元素: 直接或间接
  5. 兄弟元素: 拥有相同父元素
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
div span{
}
/*
祖先元素 后代元素{
}
*/

div > span{
}
/*
选中指定父元素的指定子元素
*/

plate + apple{
}
/*
并集选择
<plate /><apple class="small"/>
*/


A ~ B{
}
/*
selects all B that follow a A
*/
div p:first-child{
}
/*
selects all first child p elements that are in a div.
*/

ul li:last-child{
}
/*
selects the last li elements inside of any ul.
*/

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
1.   plate  元素选择器
2.   bento 元素选择器
3.   #fancy  ID选择器
4.   plate > apple  后代元素选择器
5.   #fancy pickle  ID选择器 后代选择器
6.  .small  类选择器
7.   orange.small 元素选择器 类选择器
8.   bento orange.small  后代选择器  符合选择器
9.   plate.bento  并集选择器 
10. * 通配选择器
11、plate * 后代选择器、通配选择器
12、plate + .small,plate + apple  兄弟选择器、分组选择器（并集选择器）
13、bento ~ pickle  兄弟选择器
14、plate>apple  子元素选择器
15、plate>orange:first-child  子元素选择器、其他子元素选择器
16、apple,.small:only-child   其他子元素选择器（匹配父元素中唯一一个子元素）  分组选择器（并集选择器）
17、.small:last-child  其他子元素选择器（匹配父元素中最后一个子元素）
18、plate:nth-child(3) 其他子元素选择器（匹配指定位置的子元素）
19、bento:nth-last-child(4)  其他子元素选择器（从最后一个子元素开始匹配指定位置的子元素）
20、apple:first-of-type   其他子元素选择器（匹配第一个子元素）
21、plate:nth-child(even)  其他子元素选择器（选择偶数子元素的位置）
22、plate:nth-of-type(2n+3)  其他子元素选择器（从第三个开始匹配每隔两个匹配一下）
23、apple:only-of-type  其他子元素选择器
24、 .small:last-of-type    其他子元素选择器（匹配父元素中每个类的最后一个父元素）
25、bento:empty   其他子元素选择器（指定空的子元素）
26、apple:not(big,.small)   其他子元素选择器

伪类选择器

  • a:link 没访问过
  • a:visted 访问过
  • a:hover 鼠标划过
  • a:active 正在点击
  • input:focus 获取焦点
  • p::selection 为p标签中选中内容使用样式
  • p::-moz-selection 专门用于火狐
1
2
a:link{
}

否定伪类
选择除了某个类

  • :not(.hello) 选择不是hello类的

伪元素选择器

  • p:first-letter p中第一个字符
  • p:first-line p中第一行
  • :before
1
2
3
4
5
6
7
8
9
10
/*
开始和结束部分加css
*/

p:before{
    content: "我会出现在整个段落最左边";
}

p:after{
}

css分类

内联css

1
<p style="color:red; font-size: 40px;"> 文字</p>

内部css

1
2
3
4
5
6
7
8
<head>
<style type="text/css">
p{
    color:red;
    font-size: 40px;
}
</style>
</head>

外联css

1
2
3
4
5
<link rel="stylesheet" type="text/css" href="style.css"/> 

<!--
href 写相对路径的css
-->

css注释

1
2
3
/*
css注释
*/

样式继承

css设置祖先元素，会同样设置后代元素
背景相关样式不会被继承

盒子模型

一个盒子分成以下几个部分

  • 内容区(content)
  • 内边距(padding)
  • 边框(border)
  • 外边距(margin)
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
.box1{
    background-color: #bfa;
    width: 100px;
    height: 100px; 
    /*
    width宽度 强调：内容区
    height高度 强调：内容区
    盒子整个大小，内边距，和边框共同决定
    */
    border-width: 10px;
    border-color: red;
    border-style: solid;
    /*
    边框宽度，颜色，样式
    border-width: 10px 20px 30px 40px;
    顺时针顺序，从12点开始，3点，6点，9点
    指定一个值:
    	上下左右
    指定三个值:
        上 左右 下
    指定两个值:
        上下 左右
    指定四个值:
        上右下左
    除了border-width,css提供了四个
    border-xxx-width
    xxx: top,rigth,bottom,left
    border-color也适用，上右下左
    border一指定就是4个边
    border-xxx可以指定分别的
    */
    /*
    内边距
    会影响盒子可见框的大小
    padding-top:100px;
    padding-right: 100px;
    padding-left: 100px;
    padding-bottom: 100px;
    外边距
    margin-top: 上外边距
    margin-right: 右外边距
    margin-bottom: 下外边距
    margin-left: 左外边距
    1. 默认是靠左上，
    2. 上和左外，会导致盒子自身位置改变
    3. 下和右外是导致其他盒子位置改变
    4. 可以设置负值，往反方向移动
    5. 可以设置为auto，一般只设置给水平方向的，垂直方向外边距设置为auto，默认为0
    6. left和right同时设置为auto，就可以使子元素在父元素中居中
    7. margin: 10px 20px 30px 40px
    8. 垂直外边距的重叠
       - 兄弟元素之间相邻外边距会取最大值而不是取和
       - 父子垂直外边距相邻，则子元素的设置会给父元素
    */

去除浏览器默认边距

1
2
3
4
*{
    margin:0;
    paddding:0;
}

浮动

水平排列利用浮动

块元素在文档流中默认垂直排列，自上而下依次排列

  1. display: inline-block;
    利用这个属性可以排成一行，多边距的话，将div换行部分去掉就可以了

  2. 使块元素脱离文档流，float属性

类似于图层

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
.box1{
    width: 200px;
    height: 200px;
    backgroud-color: red;
    float: 
    /*
    none: 默认值，在文档流排列
    left: 元素会脱离文档流，向左侧浮动
    right: 元素会向右侧浮动
    1.元素脱离文档流后，他下边元素会向上移动，会尽量往左上漂或右上漂，直到遇到父元素边框或其他浮动元素
    2. div是一个块元素，浮动不会超过上面的块元素
    3. 浮动元素不会超过他上边的兄弟元素，就是定义顺序，box3不会超过box2,最多平级
    */
}


.box2{
    width: 200px;
    height: 200px;
    backgroud-color: yellow;
}


.box3{
    width: 200px;
    height: 200px;
    backgroud-color: green;
}
1
2
3
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>

浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围

块元素脱离文档后，高度和宽度随内容变化

内联元素不能设置宽高，浮动后会变成块元素

高度塌陷问题，重叠，越界问题

父元素高度写死，避免塌陷，高度写死无法自适应子元素大小变化

隐含属性block formatting context 简称bfc
默认关闭，开启后，元素有如下特性

  1. 父元素的外边距不会和子元素重叠
  2. 开启bfc的元素不会被浮动元素所覆盖
  3. 开启bfc的元素可以包含浮动的子元素

开启方式

  1. 设置元素浮动

    • 使用这种方式开启，虽然可以撑开父元素，但会导致父元素宽度丢失
    • 会导致下边元素上移，不能解决问题

  2. 设置元素绝对定位

  3. 设置元素为inline-block

    • 可以解决问题，但会导致宽度丢失

  4. 将元素的overflow设置为一个非visiable的值(父元素)

    • 推荐方式，将overflow设置为hidden;
    • ie6以下不支持

  5. hasLayout可解决

    • 元素的zoom设置为1，放大的意思，zoom:1；不放大，只支持ie8以下

总结: 同时写zoom和overflow

1
2


table操作

标准table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<table>
    <thead>
        <th>商品名称</th>
        <th>数量</th>
        <th>价格</th>
        <th>操作</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>
</table>

切记，thead跟tbody要分开，不然的话，取数会出问题
操作

1
2
3
4
5
6
7
8
9

parentElement //这个可以获取父元素，比如td的小弟button，要找到他的tr，就是button.parentElement.parentElement
line.parentNode.parentNode.cells // tableRowElement.cells可以获取tr一行，然后通过数组下标进行操作，tr[0],tr[1]
var table=document.getElementsByTagName('table')[0];//获取table
var Tbody = table.tBodies[0]; //获取tbody
var i = Tbody.rows.length; //获取已有行数
var tr = document.createElement("tr"); //创建一行
Tbody.appendChild(tr); //添加孩子
array[1].setAttribute("contentEditable","true"); //设置属性

本文作者：NoOne
本文地址： https://noonegroup.xyz/posts/909026e/
版权声明：转载请注明出处！