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;