html相关

来源：互联网发布：nodejs 多个js 编辑：程序博客网时间：2024/06/07 23:48

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

声明位于html标签最前面，定义文档规范

现在都用H5规范标准：<!DOCTYPE html>

<head>标签里面用来存放 title,meta,base,style,script,link,head标签中必须设置的标签是title

----------------------------

SEO：搜索引擎优化

----------------------------

title:作用：让网页拥有一个自己的标题，在seo中占很大权重

----------------------------

GB2312与UTF-8区别：GBK(国标扩)，

UTF-收录了全世界所有语言的文字，范围：UTF-8>GBK，性能GBK>UTF-8,

UTF-8一个字符占3个字节，GBK一个字符占两个字节

----------------------------

没有语义的标签：div span

span特点：

1.一行里面可以放多个span标签

2.span的宽高由内容决定

div标签：

1、单独占一行

2、默认占一行

----------------------------

w3c三层分离标准：

html:结构

css:样式

js:行为

----------------------------

id选择器和类选择器的区别：

id名：相当于身份证号码(可以重复)

一个类名可以设置多个标签
一个标签可以设置多个类名

类名：相当于人的姓名（必须唯一）

id名必须唯一
一个标签只能有一个id

css选择器命名规则：不能以数字开头，由数字和字母组成

通配符：* 匹配所有的标签

并集选择器：

p,div,span{属性：属性值}
p,.class{属性：属性值}

交集选择器：
p.class{属性：属性值}

后代选择器：

div .son{属性：属性值}

子代选择器：

查找直接元素p：

.father>p{属性：属性值}

css三种样式：

行内样式(标签内)，嵌套样式(head内)，外联样式

三种样式的使用范围：

text三个属性：

text-indent:设置首行缩进，ex:text-indent:2em;

text-align:设置文本的位置，取值：center，left，right

text-decoration:设置文本装饰，没有下划线。取值：none,line-through(删除线),underline(下划线)

magin:0 auto;设置容器水平居中

css三大特性：

1、继承性

子元素可以继承父元素的特性，body可以继承给div,div可以继承给p例：p标签样式继承body标签的样式

什么样的属性才可以继承，以text,font,line开头的属性都是可以继承的

写页面之前会通过给body设置一个字体，来将页面上所有标签都能继承这个属性

继承的特殊性：

a标签的颜色不能继承，如果一定要修改a标签的颜色直接作用在a标签上面

h标签的大小不能继承，如果一定要修改h标签的颜色直接作用在h标签上面

div的高度不设置由内容决定(没有内容那么高度为0)，宽度默认由父元素继承过来

2、层叠型

是浏览器处理冲突的一个特性。

作用：如果一个属性通过两个选择器设置到同一个元素上面，那么这个时候一个属性就会将另一个属性层叠到。

如果多个属性通过两个选择器设置到同一元素，那么不会发生层叠

3、优先级

!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承

变数：!important:优先级大于所有

计算组合选择器的优先级(权重)：

后代，子代，并集，交集选择器，多个选择器组合以后的优先级

总结：权重是优先级的算法

优先级是层叠表现

background:

背景的连写形式：

background:background-color background-image background-repeat background-position

元素的显示方式：

块级元素：属性 display:block;

div,p,h1-h6,ul,ol,li,dl,dt,dd

单独占一行
默认宽度等于屏幕的宽度
可以设置宽高

行内元素：属性display:inline;

span，a,b,u,i,s,strong

一行里面可以显示多个
无法设置宽高
大小由内容决定

display:line-block

一行可以显示多个
默认大小由内容决定
可以设置宽高

使用块级元素完成导航：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>document</title><style>.bbg{background: mediumpurple no-repeat center top;height: 1500px;}.sbg{width: 1000px;height: 465px;background-color: #5F9EA0;margin: auto;}a{width: 100px;height: 50px;background-color: #5F9EA0;display: inline-block;text-align:center;text-decoration: none;color: #C71585;line-height: 50px;font-size: 24px;}body{text-align: center;}</style></head><body><a href="#">导航</a><a href="#">导航</a><a href="#">导航</a><a href="#">导航</a><a href="#">导航</a></body></html>

阅读全文

0 0