html-css-dom 学习
[TOC]
HTML 和 CSS 是前端解耦的产物。HTML 负责展示的内容(文本和标签),CSS 负责展示的效果。
网上各种花里胡哨的网页,其本质上还是 HTML 标签加上 CSS 样式做出来的。HTML 是网页显示基础,花里胡哨是 CSS 的功劳。

HTML

Introduction

  1. 1.
    HTML 代码由标记组成,代码不区分大小写
  2. 2.
    HTML 代码的标准格式
    1
    <html>
    2
    <head></head> <!--head部分中放一些初始化和配置信息,head 中的内容会先加载-->
    3
    <body></body>
    4
    </html>
    Copied!
  3. 3.
    HTML 标签就是一个容器,对容器中的内容进行操作,实际上就是在改变容器的属性值。
  4. 4.
    特殊字符的格式: &name;

Common Markup

mark
Explanation
<li> </li>
无序列表
<br/>
换行
<h1> </h1>1,2,3,4,5,6
标题
&nbsp;
空格
<!-- -->
注释
<a href=""></a>
超链接标签,用来链接资源,href 的值的不同,解析方式也不同,可以解析 url, Email, file 资源(文本,图片),
<iframe src="http://www.xxx.xx.com/1.js"> </iframe>
画中画标签
<form></form>
用于创建供用户输入的 HTML 表单。实际上是一个表单容器form 标签包含一个或多个如下的表单: <input>, textarea,button,select, option, optgroup, fieldset, label
<textarea>
一个大的 input
<select>
下拉选项
<div>
用来封装整行区域(换行)
<span>
用来封装行内区域(不换行)
<p>
段落标签

标签的分类

  1. 1.
    块级标签(元素)
    标签结束后都有换行
  2. 2.
    行内标签(元素)
    标签结束后无换行

超链接标签详解

超链接标签的作用:链接资源(注意其并不只是用来链接到其他网页)
超链接标签当有了 href 属性,才会有点击效果;
href 属性中协议的不同,其解析方式也不同
href 协议
1
<!--http协议,表示链接到网址-->
2
<a href="http://www.sohu.com.cn" target="_blank">新浪网站</a>
3
4
<!--图片协议,表示链接到图片-->
5
<a href="imgs/1.jpg">美女图片</a>
6
7
<!--邮箱协议,表示链接到邮箱-->
8
<a href="mailto:[email protected]">联系我们</a>
9
10
<!--迅雷协议,表示链接到迅雷-->
11
<a href="thunder://wertyuioasdfghjklwertyuio==">复仇者联盟</a>
12
13
<!--自定义超链接点击效果-->
14
<a href="javascript:void(0)" onclick="alert('我弹')">这是一个超链接</a>
Copied!
取消超链接效果
1
<a href="javascript:void(0)">这是一个超链接</a>
Copied!
利用超链接实现锚
1
<a name=top>顶部位置</a>
2
<hr/>
3
<img src="111.jpg" height=900 width=400 border=10/>
4
<hr/>
5
<a name=center>中间位置</a>
6
<hr/>
7
<img src="111.jpg" height=900 width=400 border=10/>
8
<a href="#top">回到顶部位置</a>
9
<a href="#center">回到中间位置</a>
Copied!
表单详解
1
<!--
2
如果要给服务端提交数据,表单中的组件必须有name和value属性。
3
否则服务器不知道这些标签中的值究竟是什么
4
-->
5
<form>
6
输入名称: <input type="text" name="user" value="" /><br/>
7
输入密码: <input type="password" name="psw" /><br/>
8
选择性别: <!--单选,必须放在一个组里,name 是一样的-->
9
<input type="radio" name="sex" value="nan" />
10
<input type="radio" name="sex" value="nv" checked="checked" />
11
<br/>
12
选择技术: <!--复选-->
13
<input type="checkbox" name="tech" value="java"/>JAVA
14
<input type="checkbox" name="tech" value="html"/>HTML
15
<input type="checkbox" name="tech" value="css"/>CSS
16
<BR/>
17
选择文件:
18
<input type="file" name="file"/>
19
<br/>
20
一个图片: <!--图片具备 submit button 的功能,可以替代 submit-->
21
<input type="image" src="11.jpg"/>
22
<br/>
23
隐藏组件: <!--数据不需要客户端知道,但是可以将其提交服务端。 -->
24
<input type="hidden" name="myke" value="myvalue"/><br/>
25
一个按钮:
26
<input type="button" value="有个按钮" onclick="alert('有个阿牛')"/>
27
<br/>
28
<select name="country">
29
<option value="none">--选择国家--</option>
30
<option value="usa">美国</option>
31
<option value="en">英国</option>
32
<option value="cn" selected="selected">中国</option>
33
</select>
34
<textarea name="text"></textarea>
35
<br/>
36
<!--重置表单-->
37
<input type="reset" value="清除数据"/>
38
<!--提交数据-->
39
<input type="submit" value="提交数据"/>
40
</form>
Copied!

CSS

Cascading Style Sheets (层叠样式表)
https://www.runoob.com/cssref/css-reference.htmlasp

Common Style

style
Explanation
Demo
Reference
padding
内边距
padding: 20px 20px;
margin
外边距
margin:2cm 4cm 3cm 4cm;
reference 上右下左(顺时针)

CSS 资源

CSS 开发技巧

  • CSS 可以在 Chrome 浏览器中进行编辑,所见即所得,特别好用!
  • GitHub 上有大量的 CSS 库,当我们需要什么特效时,直接去 Github 搜索即可,然后导入即可用
  • 正常开发时,通常是需要什么特效,就去 Github 上找相应的 CSS 类库,然后加载进来直接使用即可

CSS 代码格式

1
div /*选择器名称*/
2
{
3
属性名: 属性值;
4
属性名: 属性值;
5
属性名: 属性值;
6
}
Copied!

选择器

选择器用于指定 css 要作用的标签,标签的名称就是选择器,意为:选择哪个容器。
选择器有三大类:
  1. 1.
    html 标签名选择器,即选择器名称为 html 的标签名
    1
    div /*选择所有 <div> 元素。*/
    2
    {
    3
    属性名: 属性值;
    4
    }
    Copied!
  2. 2.
    class 选择器,即选择器名称为标签中的 class 属性值
    1
    .intro{ /*选择 class="intro" 的所有元素。*/
    2
    3
    }
    Copied!
  3. 3.
    id 选择器,即选择器名称为标签中的 id 属性
    1
    #firstname{ /*选择 id="firstname" 的所有元素。*/
    2
    3
    }
    Copied!
每一个标签都可以定义 class 和 id 属性,用于对标签进行标识,方便对标签进行同意管理,多个标签的 class 属性值可以相同,而 id 要唯一。

HTML 和 CSS 的两种结合方式

  1. 1.
    同一个文件中的样式复用 ——> 将样式抽取到 head 标签中
    每个 html 标签都可以定义 style 属性,该属性的值就是 css 代码;通常用 style 标签的方式对通用的 css 进行抽取,然后定义在 head标签中(head 最先加载)
    1
    <head>
    2
    <style type="text/css"> <!-- text/css 表示内容是 css 代码 -->
    3
    <!-- css 代码 -->
    4
    div{ <!-- div 表示下列 css 样式只对 div 生效 -->
    5
    background-color: #000;
    6
    color: #F00;
    7
    }
    8
    9
    div.body{ /* 为 div 标签定义一个名叫 body 的 css样式,用于类加载 */
    10
    background-color: #000;
    11
    color: #FFF;
    12
    }
    13
    14
    .body{ /* 定义一个名叫 body 的 css样式,用于类加载 */
    15
    background-color: #000;
    16
    color: #FFF;
    17
    }
    18
    19
    /*关联选择器,选择器中的选择器;空格隔开*/
    20
    span b{ /* 定义 span 中的 b 标签的样式,选择器嵌套 */
    21
    22
    }
    23
    24
    /*组合选择器,多个标签使用同一种样式, 逗号隔开*/
    25
    .body, span b{ /* 定义 span 中的 b 标签的样式 */
    26
    27
    }
    28
    29
    30
    </style>
    31
    </head>
    32
    33
    <body>
    34
    35
    <div style="background-color: #000; color: #F00;"> <!-- 最直接的 css -->
    36
    </div>
    37
    38
    <div class="div.body"> <!-- 使用 div标签的类选择器来指定 css -->
    39
    </div>
    40
    41
    <span class="body"> <!-- 使用类选择器来指定 css -->
    42
    <b></b>
    43
    </span>
    44
    45
    </body>
    Copied!
  2. 2.
    多个文件中的样式复用 ——> 将样式抽取到一个单独的 css 文件中
    创建 div.css
    1
    @charset "utf-8";
    2
    3
    div{ /* 为 div 标签定义css样式,用于css加载 */
    4
    background-color: #000;
    5
    color: #FFF;
    6
    }
    Copied!
    在 head 标签中通过 css 代码导入该样式
    1
    <head>
    2
    <style type="text/css"> /* text/css 表示内容是 css 代码 */
    3
    @import url(div.css) /* 通过 css 代码导入*/
    4
    </style>
    5
    </head>
    Copied!
    或者在 head 标签中通过 html 标签导入该样式
    1
    <head>
    2
    <link rel="stylesheet" href="div.css" type="text/css" />
    3
    </head>
    Copied!

CSS 样式优先级

css 样式可以覆盖,其优先级为:
由上到下,由外到内,优先级由低到高。
标签选择器 < 类选择器 < ID 选择器 < style 属性

伪元素选择器

预定义好的选择器,常用于定义超链接的样式
1
a:link{ /*超链接没点击之前的状态*/
2
text-decoration: none; /*取消下划线*/
3
color: #BABABA;
4
}
5
6
a:hover{ /*鼠标悬停*/
7
}
8
9
a:active{ /*鼠标点击*/
10
}
11
12
a:visited{ /*访问后*/
13
}
14
15
p:first-letter{ /*定义段落首字母的样式*/
16
}
17
18
p:first-letter{ /*定义段落首字母的样式*/
19
}
20
21
input:focus{ /*定义段落首字母的样式*/
22
23
}
24
25
/*注意,link, hover, first-letter 这些伪元素,对其他常用标签也起作用*/
Copied!

盒子模型

盒子模型:div + css,一个 div 就是一个盒子
1
.post {
2
margin: 1em auto; /*外边距*/
3
padding: 10px 10px; /*内边距*/
4
background-color: #fff;
5
border: 1px solid #ddd; /*盒子边框*/
6
box-shadow: 0 0 2px #ddd;
7
}
8
9
.posts {
10
.post:first-child {
11
margin-top: 0;
12
}
13
.post-title {
14
font-size: 1.2em;
15
16
.post-title-link {
17
color: #368CCB;
18
text-decoration: none;
19
}
20
}
21
22
.post-sub-info {
23
color: #BABABA;
24
font-size: 0.7em;
25
a {
26
color: #BABABA;
27
text-decoration: none;
28
&:hover {
29
color: #368CCB;
30
}
31
}
32
}
33
}
Copied!

GET & POST

get 提交 和 post 提交 的区别
1
表单向服务器提交数据有两种方式:get 提交 和 post 提交
2
1,
3
get提交,提交的信息都显示在地址栏中。
4
post提交,提交的信息不显示地址栏中。
5
2,
6
get提交,对于敏感的数据信息不安全。
7
post提交,对于敏感信息安全。
8
3,
9
get提交,对于大数据不行,因为地址栏存储体积有限。
10
post提交,可以提交大体积数据。
11
4,
12
get提交,将信息封装到了请求消息的请求行中。
13
post提交,将信息封装到了请求体中。
Copied!
综上,表单提交数据到服务器应该采用 post提交
Demo
1
<!--action 为服务器地址,method 定义提交方式-->
2
<form action="http://10.1.31.69:9090" method="post">
3
<!--将所有的表单放入 table 中进行格式化-->
4
<table border="1" bordercolor="#0000ff" cellpadding=10 cellspacing=0 width=600>
5
<tr>
6
<th colspan="2">注册表单</th>
7
</tr>
8
<tr>
9
<td>用户名称: </td>
10
<td>
11
<input type="text" name="user" />
12
</td>
13
</tr>
14
<tr>
15
<td>输入密码: </td>
16
<td>
17
<input type="password" name="psw" />
18
</td>
19
</tr>
20
<tr>
21
<td>确认密码: </td>
22
<td>
23
<input type="password" name="repsw" />
24
</td>
25
</tr>
26
<tr>
27
<td>选择性别: </td>
28
<td>
29
<input type="radio" name="sex" value="nan" />
30
<input type="radio" name="sex" value="nv" />
31
</td>
32
</tr>
33
<tr>
34
<td>选择技术: </td>
35
<td>
36
<input type="checkbox" name="tech" value="java" />JAVA
37
<input type="checkbox" name="tech" value="html" />HTML
38
<input type="checkbox" name="tech" value="css" />CSS
39
</td>
40
</tr>
41
<tr>
42
<td>选择国家: </td>
43
<td>
44
<select name="country">
45
<option value="none">--选择国家--</option>
46
<option value="usa">--美国--</option>
47
<option value="en">--英国--</option>
48
<option value="cn">--中国--</option>
49
</select>
50
</td>
51
</tr>
52
<tr>
53
<th colspan="2">
54
<input type="reset" value="清除数据" />
55
<input type="submit" value="提交数据" />
56
</th>
57
</tr>
58
</table>
59
</form>
Copied!

和服务端交互的三种方式

  1. 1.
    地址栏输入 url 访问 get
  2. 2.
    超链接 get
  3. 3.
    表单 get, post

DOM

Document Object Model
HTML DOM 定义了所有 HTML 元素的对象属性,以及访问它们的方法
换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
Last modified 12d ago