html和css的较量

web结构的组成

• html：超文本标记语言

• css： 层叠样式表 美化页面

• javascript：轻量级的脚本编程语言（行为和动态）

html标签规则

• 关键字由 尖括号包裹

• 成对出现，由开始标签和结束标签组成（结束标签多一个反斜杠/） 
  例：

基本上都是双标签，但是还有一类比较特殊，叫“单标签”、“自闭和标签”、“空标签”

快速生成一个html

• 新建一个xx.html的文件

• 输入法 调到英文状态下

• 在编辑区输入感叹号 ！+enter

html的基本结构

标签的关系

• 包含

• 并列

标签

标题标签

标题标签可以分为六级，从h1-h6，从表象上看：粗细相同，都是加粗的，字号逐次递减；从优化程度上来说，重要程度也是逐次递减，h1一般用在logo的部分

段落

图片

• src：图片地址

• alt：图片加载失败 出现代替文字

• title：鼠标滑上，会出现跟随文字

超链接 a

• target：

  • _self ：当前窗口打开

  • _blank：在新窗口打开

属性

描述一定的特征和功能的就是属性，属性可以分为内置属性和自定义属性，

• 一个标签的属性是可以有多个的

• 属性与属性之间需要有 空格

• 没有顺序关系

a标签里面的值

• 普通的网址

• 可以回到顶部 href=“#”

• 刷新 href=“ ”；

• href=”javascript:;“禁止跳转

• 锚点跳转 
  点击某个链接文字，想跳转到对应的模块，可以给每个模块设置一个id名字，让相应的a标签的href值等于这个id的名字（别忘了加#）

字符实体

字符实体有字符编号和字符名称

新增的标签

1）iframe

内嵌网页

2）div

大盒子标签，用来划分区域（块级元素）

3）spam

小盒子标签，用来划分小区域（行内元素）

4）格式化标签

标签自带一定的样式

• 斜体： i、em

• 加粗 ：b、strong

• 删除线：s、del

• 下划线：ins 、u

  i/em都表示斜体，b、strong表象上都是加粗，从优化程度上，em和strong(语义化更强烈一些)要比i、b更重要

5)预格式化标签 pre

会安装编辑区里面预先设置好的格式显示在页面上

音频 audio/视频video

三大列表

注意：三大列表都是固定样式，ul 和ol里面紧邻着一定式li，如果需要其他标签，可以放到li里面。dl里面紧邻着一定式dt和dd，如果需要其他标签，可以放到dt dd里面

无序列表

ul li 都是固定样式

有序列表

无序列表