一、浏览器及内核(渲染引擎)
主流浏览器 | 内核 |
---|---|
safari 苹果浏览器 | webkit |
chrome 谷歌浏览器 | webkit --> blink |
opera 欧朋 | presto --> webkit --> blink |
firefox 火狐 | gecko |
IE 微软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范畴,只能加载CSS |
link引用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" 规定下拉表默认显示项目的个数