一、浏览器及内核(渲染引擎)
主流浏览器内核
safari 苹果浏览器webkitchrome 谷歌浏览器webkit --> blinkopera 欧朋presto --> webkit --> blinkfirefox 火狐geckoIE 微软IE浏览器trident
国内浏览器
QQ、360、UC、猎豹浏览器...
无自主研发内核，基本都是使用webkit、trident 内核改造
二、网页组成
结构层 -- HTML
表现层 -- CSS
行为层 -- Javascript
W3C组织 ： 万维网联盟，制定web标准web标准（W3C标准）要求网页三层结构应该相分离
三、HTML初识
1、HTML概念
HyperText Markup Language 超文本标记语言
超文本： 不仅可以承载文本、还可以承载图片、动画、音频、视频…用来描述网页的语言不是编程语言，是标记语言
2、HTML基本语法
元素-标签以及标签之间的内容这个整体又称之为元素
3、HTML基本结构
<!DOCTYPE html> -告诉浏览器以html5的标准去解析网页,网页根标签代表网页开始和结束
<head> - 网页头部：通常放页面的元信息
<meta charset="utf-8"> -设置网页的编码方式（字符集）
utf-8: 国际编码（万国码）
gb2312 : 国标，简体中文
gbk : 国标扩，简体+繁体
<title> - 网页标题
四、常用标签
1、标签分类
块级标签行内标签
从上往下、独占一行从左到右 、水平排列在一行默认宽度占满父级,高度由内容撑开默认宽度和高度都是由内容撑开可以设置宽高,可以设置所有的盒模型属性不可以设置宽高，水平方向盒模型属性（padding、border、margin）可以正常设置，垂直方向盒模型不能设置text-align:center 有效text-align:center 无效
占满父级表示 盒子实际内容的宽度 content+ 左右padding + 左右border + 左右的外边距margin= 父级宽度100%
块级标签
hr 分割线
div 区块、盒子
p 段落
h1-h6 标题
ol 有序列表 type="1/A/a/I/i"
ul 无序列表 type="desc/circle/square"
li 无序列表和有序列表的项目
dl 定义列表
dt 放名词或术语
dd 放描述或者说明
form 表单域
行内标签
span 无语义标签，给一段文字中的指定文本设置特殊样式
i 样式斜体
em 斜体，并且强调
b 样式加粗
strong 加粗并且强调
sub 下标
sup 上标
del 删除文本
行内块级标签（img、表单元素input/textarea/select）
从左到右 、多个行内块级标签水平排列在一行可以设置宽高,可以设置所有的盒模型属性text-align:center 无效
居中效果 1、块元素中的行内元素或者行内块居中，给外部的这个块元素设置text-align:center; 2、块元素在父级元素中水平居中，给这个块元素设置margin:0 auto;
2、 图片img标签
<img src="图片路径../ : 返回上一级目录
../../: 返回上两级目录" alt="替换文本" >
3、链接 a 行内元素
本网站中的页面跳转
<a href="相对路径/目标页面的网址" target="_blank在新窗口中打开/_self : 默认值，当前窗口打开" title="提示文字"> 链接文本
</a>
锚点（锚记）链接 ：跳转到当前页面的指定位置
<h3 id="f1"> ...
</h3>
<a href="#f1"> ...
</a>
跳转页面同时指定位置：
<a href="./4、链接.html#floor2"> 跳转到链接页面的第2层
</a>
五、列表
1、有序列表
'1 / A / a / I /i'ol和li属于固定父子标签，ol的直接子标签只能是li
<ol type="A">
<li>张三
</li>
<li>
<h3> ...
</h3>
<p> ...
</p>
</li>
</ol>
2、无序列表
'desc (实心圆点)/cricle(空心圆圈)/square(正方形)'
<ul type="circle">
<li>Tom
</li>
<li>Jack
</li>
<li>Rose
</li>
</ul>
3、定义列表
一般用于解释一些专有名词或者术语说明
<dl>
<dt>放名词或者术语
</dt>
<dd>放解释说明
</dd>
</dl>
列表符换成图像
list-style-type:none;//去掉圆点
list-style-image: url(images/icon.gif);
六、网页特殊符号
空格
> 大于符号 >
< 小于符号 <
& &符本身 &
© 版权符 ©
® 注册商标 ®
七、语义化
什么是语义化？ 用合理的标签去格式化文档内容,比如 标题用h标签，段落用p标签，重要图片添加alt属性添加替换文本-
好处？
没有css也能表现出良好的结构具有良好的可读性，有利于团队开发维护有利于用户体验有利于搜索引擎优化
八、表格
1、表格相关标签
- table 定义整个表格
- tr 定义一行
- td 定义表格的单元格（标准单元格）
- th 定义表头单元格 （加粗居中）
- caption 定义表格标题
- thead 表格的头
- tbody 表格的主体
- tfoot 表格的底部
> thead\tbody\tfoot 这些标签可以增强表格的语义化，对布局没有影响
<table>
<caption>学生成绩表
</caption>
<tr>
<th>编号
</th>
<th>姓名
</th>
<th>分数
</th>
</tr>
<tr>
<td>01
</td>
<td>张三
</td>
<td>90
</td>
</tr>
</table>
2、表格相关属性
<table border="1" cellspacing="0" style="width: 300px;border-collapse:collapse;">
</table>
border 给表格整体添加边框（表格和单元格都有边框）border-collapse:collapse; 去除单元格之间的空白间距，并且把相邻边框合并成一个cellspacing=“0” ：去掉单元格之间的空白间距
3、合并单元格
合并列（横向合并）colspan = “2”
<td colspan="2"> ...
</td>
合并行（纵向合并）rowspan = “2”
<td rowspan="2"> ...
</td>
4、表格特点
不设置表格宽度时，实际宽度由内容撑开如果给表格设置宽度width，表格的列宽会按照每一列当中内容最多的单元格的比例分配列宽，行高也是同理也可以通过给单元格设置 width和height调整整行或整列的宽度和高度
<tr>
<td width="80">4444
</td>
<td width="80">5
</td>
<td width="140">6
</td>
</tr>
<tr>
<td width="33.33%">4444
</td>
<td width="33.33%">5
</td>
<td width="33.33%">6
</td>
</tr>
九、CSS
Cascading Style Sheets 层叠样式表–是用来规定网页样式的语言
1、 css三种引入方式(行内/内嵌/link外部引入)
行内样式 ：
<div style="width:100px;height:100px;background-color:red;"></div>
内嵌式 :
<head>
<style>
p{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
link外部引入：
<link rel="stylesheet" href="./style.css" type="text/css">
- rel : 表示目标文件和当前文件的关系 stylesheet 表示样式表
- href : 目标文件的相对路径
- type : "text/css"标记文件类型为 css
CSS中link和@import导入样式的区别
<style>
<!--该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。-->
@import url("global.css");
@import url(global.css);
@import "global.css";
p{color:red;}
</style>
link@import
link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务属于CSS范畴，只能加载CSSlink引用CSS时，在页面载入时同时加载需要页面网页完全载入以后加载link是XHTML标签，无兼容问题在CSS2.1提出的，低版本的浏览器不支持支持使用Javascript控制DOM去改变样式不支持
2、选择器
用来获取要添加样式的标签，选择器有很多类型（标签名、id、class、*）
div,p{ ... }
#box{ ... }
.red{ ... }
*{
margin: 0;
padding: 0;
}
3、复合选择器 （后代、子代、并集群组、交集选择器）
.box div{ /* 选择.box标签后代当中所有div标签*/
}
.box>div{ /* 选择.box标签直接子代中所有div标签 */
}
#box,.red,h3,#box p{ /*把以下几个选择器匹配的元素同时选中*/
#box
.red
h3
#box p
}
div.red{ ... } /*选择标签名为div并且类名中包含red这个单词的标签，精准定位 */
十、文字相关属性
1、 text系列
text-align : left/right/center--文本对齐方式
text-indent : 2em --首行缩进，em : 代表一个字的大小
text-decoration ：none/underline/overline/lint-through--文字修饰
color : 文本颜色
2、 font 系列
字体简写属性，顺序不能随意更改 可以省略不需要设置的属性, 至少保留font-size和font-family
font 字体简写属性
font: font-style font-weight font-size/line-height font-family;
font: italic bold 20px/2 "宋体";
至少要大小、字体
font 字体属性(size、weight、style、family)
font-size 字体大小 16px
font-weight 字体加粗
100-300 细
400-500 正常
600-900 加粗
normal 正常
bold 加粗
font-style --字体风格
normal 正常
italic 斜体
font-family --字体系列（族类）
可以设置一个字体或多个字体
多个字体用逗号分隔，浏览器会显示第一个能够识别的字体
font-family: Helvetica Neue,Helvetica,Arial,"宋体",Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
font 字体行高
line-height 字体行高-由上间距、文本高度、下间距组成
取值可以为具体的长度 30px
也可以为font-size的倍数 比如2 代表font-size的两倍
单行文本垂直居中可以设置line-height为盒子的高度
3、其他
设置字符间距：英文字母、中文汉字
letter-spacing:10px; "1 2 3 a b c 汉 字"
设置单词的间距
word-spacing:10px; "world hello ujiuye 汉字 "
鼠标变小手cursor:pointer
4、长度单位和颜色表示法
单位
px 像素
em 相对单位，代表的是当前元素的font-size值
% 百分比
rem 1rem 等于页面的根元素的font-size值，也就是html标签的font-size
颜色表示法
red --英文单词
#000000 --十六进制
rgb(0-255,0-255,0-255) --rgb()模式
rgba(0-255,0-255,0-255,0-1); --rgba()模式-alpha 透明度
十一、HTML表单
表单是网站用来收集用户信息的
1、表单域 form （块级）
表示用来规定表单的一片区域，里面用来放各种表单元素
表单域属性
action: 用来规定表单的提交地址(与后台对接)
method:用来规定表单的提交方式
get : 默认提交方式, 会把表单数据以键值对形式，多组用&拼接在一起，通过地址栏进行传递，安全性不好，因为地址栏可容纳的数据大小有限制的，所以可能造成数据丢失
post : 推荐使用的方法，安全性更好，理论上没有大小限制
<form action="" method="" >
...
</form>
2、表单元素(行内块)
input标签（name后台接收，要写噢）
<input type="text" name="username"> 普通文本框
<input type="password" name="psd"> 密码框
<input type="radio" name="gender" value="male">单选按钮(name要设置相同才能互斥单选)
<input type="checkbox" name="hobby" value="coding">复选框
<input type="file" name="file"> 文件域
<input type="submit" value="注册"> 提交按钮
<input type="reset" value="清空表单"> 重置按钮
<input type="button" value="普通按钮"> 普通按钮
<input type="image" src="图片路径"> 图片提交按钮，显示图标，变成小手
<input type="hidden" name="hid" value="传数据"> 隐藏域,页面不显示但是可以携带数据
下拉列表
<select name="city">
<option value="aa">AA
</option>
<option value="bb">BB
</option>
<option value="cc">CC
</option>
</select>
文本域（多行文本）
<textarea name="des" cols="30" rows="20"
style="width:100px; height:200px;">
我就是文本域初始显示的值
</textarea>
- cols ： 规定输入文本列数
- rows ： 规定输入文本的行数
3、表单元素属性说明
1.type用来定义输入框的不同类型
2.name属性用来规定表单字段名，如果不设置这个输入框的内容无法随表单一起提交到后台
- 多个单选按钮想要有互斥效果，name属性值必须相同
3.value用来给表单元素定义值
- 单选按钮(radio)、复选框(checkbox)、下拉列表的选项(option)必须要设置value属性，表示选项所代表的值
- 提交按钮(submit)、重置按钮(reset)、普通按钮(button)设置value属性表示修改按钮上的文字
- 文本框(text)、密码框(password)、隐藏域(hidden)，用value设置默认值
- 文件域flie和textarea不能设置value
4.maxlength="10" 用于规定输入框允许输入的最大字符个数
5.disabled="disabled" 设置表单元素为禁用状态, 不能编辑，也不能被提交
6.readonly="readonly" 设置表单元素为只读状态, 不能编辑，可以被提交
7.checked="checked" 设置单选按钮和复选框默认选中
8.selected="selected" 设置下拉列表的选项默认选中
9.size="2" 规定下拉表默认显示项目的个数
