HTML高级篇 - <input>标签，复选框；如何设置单选或者复选的默认值？checked属性即是解决此问题而生，如下：
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
</
head
>
<
body
>
<
form
method=
"GET"
action=
""
>
Please choose your favourite fruit:
<
P
>
1.apple
<
input
type=
"checkbox"
name=
"fruit"
value=
"apple"
checked=
"checked"
>
<!--复选框默认选择项设置 -->
</
P
>
<
P
>
2.orange
<
input
type=
"checkbox"
name=
"fruit"
value=
"orange"
>
</
P
>
<
P
>
3.banana
<
input
type=
"checkbox"
name=
"fruit"
value=
"banana"
>
</
P
>
<
input
type=
"submit"
value=
"提交"
>
</
form
>
</
body
>
</
html
>
<form>表单组件之<select>标签，下拉菜单；它通常与<option>标签成对组合使用，
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
</
head
>
<
body
>
<
h1
>
Province:
</
h1
>
<
form
method=
"GET"
action=
""
>
<
select
name=
"province"
id=
""
>
<
option
value=
"beijing"
>beijing
</
option
>
<
option
value=
"tianjing"
>tianjing
</
option
>
<
option
value=
"urumuqi"
>urumuqi
</
option
>
<
option
value=
"shanghai"
>shanghai
</
option
>
<
option
value=
"changji"
>changji
</
option
>
</
select
>
<
input
type=
"submit"
value=
"提交"
>
</
form
>
</
body
>
</
html
>
上述内容讲述的是HTML 4.0.1版本，HTML语言的标签大约有250+个，并且每年都在增加，但是实际开发中最常用的即为上述所讲的这些，而其余的基本没有太大的用处。
编程模式，MVC模式，结构，样式，行为相分离；
CSS初级篇的基础知识：
体现专业素养的问题，我们和什么打交道最多吗？浏览器。主流浏览器和内核有哪些？
占有一定的市场份额，其二，必须有自己独立的浏览器内核； 一个浏览器有shell与内核两部分构成；运转效率，识别、操作代码，是内核的功能与作用；
当前主流的浏览器有：IE，Chrome，Safari，Firefox，Opera，对应内核分别为：trident，Webkit/blink，Webkit，Gecko，Presto；
HTML：结构，CSS：样式，JavaScript：行为，三者相分离；
CSS做的事就是装修与涂料的事情；CSS，cascading style sheet，层叠样式表；
引入CSS的方法：1.行间样式；
2.页面级CSS；在<head>标签中添加<style>标签，在<style></style>标签中可以添加CSS代码；
3.外部CSS文件；在<head>标签中添加<link>标签；
HTML文件是如何引入到网页中的？是服务器中的HTML，CSS，JavaScript文件下载到客户端电脑本地存储，然后由本地客户端电脑上的浏览器进行加载与解析，执行；
浏览器是下载一些代码就执行，边下载边执行；浏览器会开启一个新的线程，同时进行异步下载；
CSS选择器：
1.id选择器；标签的id属性，必须是一一对应的，即一个标签只能给其分配一个唯一的id；同时，一个id也只能分配给一个标签，具有排他性；
#only{
background-color:red;
}
2.class选择器；拿特点抓住元素；class属性与元素之间的关系是“多对多”的关系，即一个元素允许有多个class属性，同时一个class名称可以对应多个元素；
HTML代码如下：
<
body
>
<
div
class=
"demo demo1"
>123
</
div
>
<!--同一个元素分配两个class属性，即一个人穿两件衣服的效果 -->
<
div
class=
"demo"
>234
</
div
>
</
body
>
对应外部CSS文件代码如下：
.demo{
background-color:yellow;
}
.demo1{
color:#f40;
}
3.标签选择器，简单直观；可以进行批量选择；HTML代码如下：
<
body
>
<
div
>123
</
div
>
<
div
>234
</
div
>
</
body
>
外部CSS文件的代码如下：
div{
background-color:black;
}
4.通配符选择器；即“*”符号；当时用它进行选择时，将会选择所有的标签元素，所以这里“*”代表的含义是所有的，任意的；如：
*{
background-color:green;
}
重点：考察选择器的优先级（或权重）问题；比如给一个<div>标签，同时给ID属性与class属性，然后分别使用id选择器与class选择其实对该标签进行操作，看谁“更厉害”；
比较之后发现，权重顺序如下：行间样式 > id选择器 > class选择器 > 标签选择器 > 通配符选择器；
5.属性选择器：不管属性值是什么，只要具有所列属性的标签均被选择出来；使用时采用中括号将属性名称包裹起来，或者直接将属性名与属性值一起完整填写进入中括号中，如下：
[
class
]{
background-color:red;
}
/* 或者 */
[
class=
"demo"
]{
background-color:red;
}
更新选择器优先级排序，如下：比较之后发现，优先级顺序如下：行间样式 > id选择器 > class选择器 | 属性选择器 > 标签选择器 > 通配符选择器；
可以通过！important修改上述选择器优先级；
选择器的权重值（是256进制，不是10进制！没几个人知道的知识点）：
！important Infinity
行间样式 1000
id选择器 100
class选择器 | 属性选择器 | 伪类选择器 10
标签选择器 | 伪元素选择器 1
通配符选择器 0
在计算机中，Infinity并不是无穷值，二是有限值，故Infinity+1 > Infinity；