module1_HTML 网页开发、CSS 基础语法
CSS
HTML
一、HTML的基本含义与概念<a name="html1"></a>
1.1 网页的组成<a name="html1_1"></a>
-
前端三层： HTML（结构层）、CSS（样式层）、JavaScript（行为层）
1.2 主流浏览器内核<a name="html1_2"></a>
-
因为不同浏览器使用内核所支持的HTML等网页语言标准不同, 对网页的渲染效果会有差异
| 浏览器 | 渲染引擎 | 说明 |
|---|---|---|
| IE/Edge | Trident | IE内核 |
| FireFox | Gecko | Firefox内核 |
| Safari | Webkit | |
| Chrome | Webkit->Blink | 统称为Chromium内核或Chrome内核 |
| Opera | Presto -> Webkit -> Blink |
1.3 纯文本与富文本<a name="html1_3"></a>
-
纯文本的特点：
-
文件只能保存文本， 不保存其他的格式或非文本内容， 有利于网络传输
-
所有的纯文本格式文件， 可以通过直接更改扩展的方式更改保存格式
-
-
纯文本格式文件可以使用任意的纯文本编辑器进行查看和编辑
而html、css、js文件都是纯文本格式文件
1.4 HTML的语义化<a name="html1_4"></a>
-
HTML文件中，如果没有使用特殊语义的标记，也可以实现网页显示效果，但是利用标记给普通的文字添加了不同的语义，能够让网站的结构划分更加清晰
-
语义化的优势
-
方便代码的跃度和后期维护
-
便于浏览器或是网络爬虫更好地解析网站内容
-
使用语义化标签有利于SEO搜索引擎优化，提高网站的搜索排名
-
二、HTML的规范与语法<a name="html2"></a>
2.1 HTML标签语法<a name="html2_1"></a>
-
标签名必须书写在一堆尖括号<>内部
-
<html></html>
-
-
标签分为单标签和双标签, 双标签必须成对出现.
-
<p></p> 双标签
-
<br /> 单标签
-
-
双标签包含开始标签和结束标签, 结束标签必须书写关闭符号/, 单标签也需要进行自封闭书写.在HTML5中, 但标签可以不写关闭符号.
-
错误写法<div><div>
-
2.2 HTML元素<a name="html2_2"></a>
2.2.1 元素内容
-
元素内容可以为纯文本，也可以为嵌套元素
-
可以嵌套多个元素
-
单标签不可以嵌套
2.2.2 标签级别
-
容器级：标签内可以访任意内容
-
文本级：标签内部只能存放文字或类似内容， 比如存放图片、表单元素等。比如\p
2.2.3 HTML元素的特性
-
元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响。浏览器识别的是元素的开始和结束以及相互之间的嵌套关系。
-
空白折叠现象，元素内容如果是文本， 所有文字之间有空格、换行、缩进等空白字符，在浏览器中加载时，连接在一起的空白会折叠成一个空格显示，这就是空白折叠现象
2.2.4 HTML属性规范
-
书写位置：标签内，用空格分开
-
属性写法：键值对（key，value）属性值必须写在双引号内部
-
一个标签可以设置多个不同的属性
-
值在一堆引号内， 需要用空格分开
2.3 编译器快捷键<a name="html2_3"></a>
三、HTML的基本结构与标题用法与含义<a name="html3"></a>
3.1 HTML的基本骨架<a name="html3_1"></a>
-
html、head、body、title标签
3.2 DTD与命名空间<a name="html3_2"></a>
-
DTD即<!Doctype html>
-
xmls: 命名空间, 浏览器会将此命名空间用于改属性所在元素内的所有内容
-
xml: 可扩展标记语言, 用在传输过程中的规范. 被设计用来传输和存储数据,是html的补充
3.3 字符集<a name="html3.3"></a>
使用建议：
-
如果没有网页加载速度要求，或者制作的是外文网站， 使用utf-8（包含全球绝大多数的字符， 中文一个占3字节）
-
如果含有大量中文汉字的网站，而且要求网页加载速度快， 使用gbk
3.4 标题用法与含义<a name="html3_4"></a>
-
（h1-h6）标题标签不能嵌套（h1-h6）标题标签
3.5 权重 *****<a name="html3_5"></a>
-
标签重要程度由h1到h6递减
-
h1在HTML中的权重非常高， 内部应该放置HTML中最最重要的内容如logo，有利于SEO优化
-
h1多个反而会降低权重， 一个页面一般都只有一个h1
四、HTML常用标签<a name="html4"></a>
4.1 段落和换行<a name="html4_1"></a>
-
<p></p>与<br />
-
用br强制换行的p还是属于同一段落, br作用就是强制换行
4.2 文本格式化<a name="html4_2"></a>
-
常用的有b（加粗）、i（倾斜）、u（下划线 ）
-
强调文字（语义化）em：倾斜；strong：加粗
-
上下标： sub：下标；sup：上标
4.3 图像<a name="html4_3"></a>
-
<img>
-
<img>是一个单标签, 本身是一个特殊的文本, 所以可以插入在如p标签之内
-
img标签的作用是在指定的位置插入一张图片
-
在HTML文件,常用的个插入图片类型有: jpg、png、gif
-
常显示的属性展示：src、width、height、border、title、alt
src属性
-
相对路径(推荐使用)
-
绝对路径(可移植性差, 容易出现中文乱码)
-
尽量使用alt属性对图片进行说明, 有利于SEO搜索引擎优化
4.4 audio/video<a name="html4_4"></a>
-
通过添加controls添加控制组件
4.5 超级连接标签<a name="html4_5"></a>
4.5.1 各属性的作用
-
a标签可以放容器级标签也可以放文本内容， 所以可以认为是一个容器级的标签
-
target属性
-
_self为替换当前页面打开
-
_blank为在新的空白窗口打开
-
-
title:
-
与img的title属性类似也是提示文本
-
4.5.2 锚点跳转与跨页面锚点跳转
-
设置描点
-
id: 在标签加上id属性
-
name: 设置一个空的a标签(不要href)加上name属性
-
-
设施锚点连接
-
设置一个a标签把href设置为
# + id/name
-
-
跨页面锚点跳转
-
如跳转到百度的id描点位置
-
4.6 无序/有序/定义列表<a name="html4_6"></a>
4.6.1 无序列表
-
ul一定要放li， 放其他标签不符合规范
-
li是一个容器级标签，可以嵌套其他标签包括ul
-
li前面的点不是标签自带的而是css中把这类标签添加了样式
-
里面的li排序是无序的
4.6.2 有序列表
-
同上
-
li不能脱离ol写
-
li存在先后之分
4.6.3 定义列表标签
-
dl dt dd
-
dl只能嵌套dt与dd, dt与dd是同级关系 dt与dd不能单独存在
-
dd作为解释dt的存在, 一个dd可以有多个dt, dt只与自己前面最近的一个dd匹配
-
dt和dd也是容器级标签, 内部可以放任意内容
-
定义列表的缩进样式由css负责
-
最好一个dl嵌套一个dd与一组dt
4.7 布局标签<a name="html4_7"></a>
div与span的用途
-
div用来进行大的布局
-
span用于在不改变整体效果的情况下，可以辅助进行局部调整
4.8 表格基础<a name="html4_8"></a>
4.8.1 table tr td th的基本用法
-
为什么会有双重边框：
-
因为td与tr没有重合
-
-
解决方法
-
增加border-collapse：collapse
-
4.8.2 合并单元格
-
rowspan：2；跨列
-
colspan：2；跨行
-
注意span要为2
-
制作技巧
-
先把每行数清楚（td跟th的数量）
-
然后把需要跨行/跨列的单元格分别加上属性就可以了
-
4.8.3 分区标签
-
caption: 表格的标题 放标题文字
-
thead: 表格头部,
-
tbody: 表格主题
-
tfoot: 表格页脚
-
不一定全部都要有, 可以选择性的进行组合
-
在HTML即使颠倒也会按照顺序解析
-
4.9 表单<a name="html4_9"></a>
4.9.1 结构
-
表单域： 所有表单要在表单域， 才可以传送到后台服务器
-
提示信息与表单控件（input、password..）
4.9.2 表单域
-
action(指定提交的url)
-
method: get/post(提交方式)
-
name(自定义名称)
4.9.3 表单控件
-
input与img一样也是一个特殊的文字/文本
-
根据type改变用途
-
-
radio：单选框
-
name相同才会出现单选现象
-
使用checked属性可以默认选中
-
-
checkbox： 复选框
-
name属性用来分组
-
使用checked可以默认选中
-
-
button： 按钮
-
使用type可以使其具备不同的功能
-
button：普通按钮
-
reset：重置按钮， 将所处的form清空， 恢复成默认
-
submit：提交按钮，根据form的action提交给后台
-
image：图片按钮，跟submit功能限售股hi，区别是要设置src设置图片路径
-
-
-
file
-
type为file变为文件上传按钮
-
设置multiple可以变成多个文件上传
-
-
-
textarea
-
row设置列数
-
cols设置行数
-
超过出现滚动条
-
-
一个字符占两个字节？
-
-
下拉菜单select option
-
给option添加selected默认选中
-
optiongroup给option进行分组
-
给optiongroup添加label
-
-
-
label 标签
-
绑定其他内容夸大触发点击的范围
-
绑定方法
-
距离比较远
-
给input设置id然后labl这是for属性
-
-
标签跟元素卸载一起
-
label包括input
-
-
-
4.10 字符实体<a name="html4_10"></a>
-
比如<在浏览器显示不了用<
-
要&开头;结尾
-
解决空白折叠现象就用多个&nb
CSS<a name="css"></a>
一、概念<a name="css1"></a>
-
css全程cascading style sheets
-
作用: 静态修饰网页, 配合各种脚本语言动态地对网页各元素进行格式化
1.1 组成<a name="css1_1"></a>
-
层叠式
-
层叠行
-
继承性
-
优点: 节省代码量 如: 从body继承
-
-
-
样式
1.2 书写方式<a name="css1_2"></a>
-
内联式(行内式): 卸载标签之上
-
\<div style="width: 100px; height: 100px;">\</div> -
缺点:
-
不脱离HTML标签
-
可读性差
-
作用范围单一(只能给一个标签使用)
-
-
-
内嵌式
-
写在head的style里面, style的type为
text/css -
优点
-
标签样式初步分离
-
多标签可以统一设置
-
-
缺点
-
没有彻底分离
-
不可以被多个文件同时利用
-
头重脚轻
-
-
-
外联式
-
优点
-
实现html和css完全分离
-
可以多个html文件复用
-
可以引用多个
-
公共复用,单独可以引用
-
-
缺点
-
-
导入式@import
-
在style开头写入@import (路径)
-
缺点
-
要在加载玩html之后才会执行
-
-
1.3 书写规范<a name="css1_3"></a>
-
不会影响最终结果
-
大小写
-
空格缩进
-
-
规范
-
k-v以分号;结尾
-
1.4 常用样式<a name="css1_4"></a>
-
颜色color
-
英文单词
-
十六进制或者rgb/tgba
-
| 红色 | red | 黑色 | black | 橙色 | orange |
|---|---|---|---|---|---|
| 白色 | white | 黄色 | yellow | 金色 | glod |
| 绿色 | green | 粉色 | pink | 情色 | cyan |
| 浅黄色 | lightyellow | 蓝色 | blue | 黄绿色 | yellowgreen |
| 紫色 | purple | 天蓝色 | skyblue |
-
font-family
-
常用中文字体
-
宋体: SimSun
-
微软雅黑: Microsoft Yahei
-
-
常用英文字体
-
Arial
-
consolas
-
-
不同浏览器有不同的默认字体(微软雅黑)
-
写法
-
用双引号双引号""包裹起来
-
有书写顺序, 先加载第一个, 识别不了加载后面的
-
-
注意事项
-
字体储存是在计算机里面的, 有的用户可能有有的用户可能没有
-
中文字体一般都有英文字体, 所以尽量把英文字体提前
-
-
-
font-size
-
相对长度单位: px:像素 em继承祖先元素设置字号的倍数 %继承祖先元素设置的字号百分比
-
绝对长度单位: in:英寸 cm:厘米 mm:毫米 pt:点
-
默认字号大小: 16px
-
最小支持字号
-
chrome: 8px
-
IE: 1px
-
-
尽量设置最小字号为12px 尽量用12px 14px 16px等偶数
-
二、CSS选择器<a name="css2"></a>
2.1 选择器种类<a name="css2_1"></a>
-
基础选择器: 标签选择器、id选择器、类选择器、通配符选择器（css2.1）
-
高级选择器：后代选择器、交集选择器、并集选择器（css2.1）
2.2 各中选择器的特点<a name="css2_2"></a>
-
标签选择器
-
优点： 可以选择所有同名标签，设置所有同名标签的公共样式
-
只能实现全选
-
-
id选择器
#id-
只能唯一, 严格取分大小写
-
但是如果设置多个相同id会都显示出样式（视浏览器而定？）在选择器中唯一性体现的不明显
-
-
缺点： 只能单选
-
-
类选择器.
class-
可以实现多选, 严格取分大小写, 不区分标签类型, 每个标签可以设置多个class
-
可实现代码分离
-
特殊使用
-
设置带有语义的默认样式(原子类)
-
需要用到的时候直接赋予类名即可
-
-
-
通配符选择器* {}
-
设置margin与padding为0
-
优点
-
实现全选, 简化书写
-
-
缺点
-
通配选择效率低, 因为并不是所有的标签都需要添加该样式,导致浏览器渲染效率低
-
上线的话建议不使用
-
-
-
后代选择器(包含选择器)
-
都用空格分开
-
不一定非要父子关系
-
-
交集选择器
-
标签选择器要放在最前面
-
不用空格分开, 连续书写
-
IE6不兼容
-
-
并集选择器
-
用逗号分开, 每一项都是并列的
-
用途
-
节省代码量
-
代替通配符选择器清除默认样式
-
-
-
类上样式(CSS), id行为(JS)
三、CSS继承性<a name="css3"></a>
3.1 层叠性<a name="css3_1"></a>
-
每个选择器的权重不同
-
!important>行内式>id>class>标签>*
-
其中!important只是单条属性提高权重, 不是所有
-
遇到就近原则失效
-
-
高级选择器则按权重一次比较数量, 高的会层叠掉低的, 相同权重的话, 后者覆盖
-
-
祖先级
-
即就近原则 => 大于权重比较
-
如果是并集选择器, 则看纳提奥选择器最后面的那一个选择器是什么
-
并不是所有的样式都可以被继承的, 可以被继承的都是一些文本类型的样式(font-size, font-family, color)
查看优先级别的技巧:
打开浏览器控制台style栏中靠前的就是权重大的, 被覆盖的会有删除线
-
选择原则
-
①看行内
-
②看就近, 就近相同看权重
-
③最后再看有无important
-
