1 |
1.前端组成 2.语义化理解 3.html标准语法 4.html注意的问题 5.字符实体 |
13 |
1.注释的写法 2.注释的作用 |
25 |
颜色的设置方法 |
37 |
浏览器内核 |
2 |
单、双标签的划分 |
14 |
1.css文件的引入方式 2.两种外部引入的比较 3.引入方式的权重 |
26 |
XHTML: 1.文档结构 2.元素语法 3.属性语法 |
38 |
兼容 |
3 |
html与body的说明 |
15 |
链接: 1.鼠标的变化 2.语法 3.锚点 4.伪类选择器 |
27 |
表单: 1.原有表单格式 2.现有表单格式 3.表单的属性列表 4.新增的标签 5.datalist与select的区别 6.get与post的区别 7.常见的输入类型和兼容情况 |
39 |
BFC |
4 |
单标签(空元素) |
16 |
图片: 1.语法 2.路径 3.路径的解释 4.取消默认边框和空隙 |
28 |
1.html5新增的标签 2.对html5的理解 |
40 |
|
5 |
html的元素类型 |
17 |
1.表格的说明 2.注意情况 3.表格合并 |
29 |
媒体: 1.视频格式 2.声音格式 3.使用方法 |
41 |
|
6 |
块级元素的空行 |
18 |
表格新增的属性和标签 |
30 |
css选择器的权重 |
42 |
|
7 |
行内元素的属性 |
19 |
布局的方法 |
31 |
css属性大纲 |
43 |
|
8 |
改变文本的方向 |
20 |
padding |
32 |
单行文本溢出的方法 |
44 |
|
9 |
heading 标签 |
21 |
margin |
33 |
浮动float |
45 |
|
10 |
p标签 |
22 |
背景图: 1.基本语法 2.gif,png,jpg区别 3.精灵图 4.图片整合 5.滑动门技术 |
34 |
定位position |
46 |
|
11 |
平时的引用标签 |
23 |
边框 |
35 |
宽高自适应 |
47 |
|
12 |
计算的代码元素 |
24 |
1.地址属性 2.url的加载过程 |
36 |
隐藏元素的方法 |
48 |
ss样式:
@charset "utf-8";
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img,input,figure,table,tr,td,th{margin:0;padding:0}
*{ box-sizing:border-box;}
ul,ol,li{list-style:none;}
b,strong{font-weight:100;}
em,i{font-style:normal;}
h1,h2,h3,h4,h5,h6{font-weight:100;font-size:16px;}
a,u{text-decoration: none;}
input{outline:none;}
img{display:block;border:0;}
html,body{height:100%;}
body{font-family: "微软雅黑";}
.clear_fix:after{content:".";height:0;clear:both;display:block;visibility:hidden;overflow: hidden;zoom:1;}
1. HTML 指的是超文本标记语言 (Hyper Text Markup Language),不是一种编程语言
(1)前端页面由三部分组成:
(2)语义化的理解:
(3)html文件的语法:(hyper text markup language)
doctype作用:不是标签,只是声明文档类型,说明一下html文档是用哪个版本编写的。
混杂模式:doctype不存在或格式不正确,在doctype前加入XML声明。
严格、标准模式:申明正确的DTD(文档类型语法规则)
文档的编码格式,元数据
外部引入css文件
或
页面内容
外部引入js文件
或
(4)在html文件中应注意的问题:
显示结果 |
描述 |
实体名称 |
空格 |
||
< |
小于号 |
< |
> |
大于号 |
> |
& |
和号 |
& |
" |
引号 |
" |
' |
撇号 |
' (IE不支持) |
¢ |
分(cent) |
¢ |
£ |
镑(pound) |
£ |
¥ |
元(yen) |
¥ |
€ |
欧元(euro) |
€ |
§ |
小节 |
§ |
© |
版权(copyright) |
© |
® |
注册商标 |
® |
™ |
商标 |
™ |
× |
乘号 |
× |
÷ |
除号 |
÷ |
2. 标签分为单标签和双标签,其中双标签又分为开放标签和闭合标签
单标记:<标记 属性=“属性值”/>
双标记:<标记 属性=“属性值”,属性=“属性值”>标记>
>单标签(空元素):br、hr、img、link、meta、input
>双标签:a,heading,div,span……
3. html与 /html 之间的文本描述网页,
与 之间的文本是可见的页面内容4. 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。——单标签
5.html的元素类型:
html元素类型 |
行内元素 |
块状元素 |
行内块元素 |
特征 1 |
一行显示 |
换行显示 |
一行显示 |
特征 2 |
宽高无效 |
可设宽高 |
可设宽高 |
特征 3 |
margin上下无效,padding有效 |
margin、padding都可设 |
margin、padding都可设 |
>行内元素:br,sup,sub,strong,b,i,a,span,em,u
>块状元素:hr,div,heading,ul,ol,li,dl,dt,dd,p,table,form,pre,address
pre:预格式文本保留了空格和换行,用来输出代码
address:用于编写地址内容,默认字体为斜体字
>行内块元素:button,img,input,textarea,bdo
6. 在html中,自动地在块级元素前后添加一个额外的空行,此时margin:0;padding:0来取消
7.在行内标签中可以设置哪些属性:style、title(显示额外信息)、id、class
8.改变文本的方向(将两个属性都写在dbo这个标签中):
9.heading标签:
10.p标签:
11.平时的引用标签:
12.计算机的代码元素
13.注释的作用:
14.css样式表的四种引用方式:
(1)内部样式:在head标签中添加style标签,在里面来编写css样式代码
(2)外部样式 :(两种并比较优缺点)
一. 设置连接的css文件中的编码:@charset "utf-8"; 二. (3)内联样式:
(4)内部样式和外部样式组合使用:
两种外部引用方式的比较: (1)为标签,除了加载css之外还能定义其他事务;import为css范畴,只能加载css (2)在引用css时,html文件与css文件同时加载;import需将html文件加载完之后,才会加载css文件。如果网速慢时,import方式,会只有元素内容而没有相关的样式。 (3)是标签,没有兼容问题;import是css2.1提出的,低版本的浏览器不支持 (4)支持JavaScript对DOM进行操作;import不支持。
三种引用css的方式的权重:
(1) 外部和内部样式的权重和写的顺序有关,后写的覆盖先写的(覆盖相同的内容,不相同的内容保留下来)
(2)内联样式的权重最高
15. 链接:
(1)鼠标移动到该链接时,鼠标的变化(设置cursor属性),添加属性值:
(2)语法:
名称 内部可设属性 target(规定此链接在何处显示) target="_blank"新窗口打开 "_self"在当前框架内打开,为默认值 "_top"在顶层或跟框架中打开 "_parent"当前框架上一层打开
(3)锚点:被连接的内容可为name或id
lalla
离开的时间发了家第三方
sdjfljdsfklkdsf
啦啦 ——此时地址中必须有#(4)
16. 图片:
(1)取消默认边框border:0
(2)解决下边界有空隙display:block
(3)路径:(主要是HTML文件调用图片文件)
(4)解释路径:./ 当前目录 ../ 父级目录 / 根目录(如abc/123/1.txt,根目录是相对于子目录而言的,这里的abc相当于根目录)
17. 表格:
(1)表格默认:在直接写table的时候,无论有没有内容,都是没有边框的。给table加边框时,只是给表格的外面加边框
(2)表格中常见的标签:caption标题,th表头(加粗)
(3)单元格边距:cellpadding,指定单元格内容与单元格边界之间的空白距离的大小
(4)单元格间距:cellspacing,每个单元格之间的距离
(5)注意:
18. 新增(表格):
(1) :将包含标题的 写入进来,仅一个
19. 布局方法:
(1)固定布局,每一个元素都是固定的尺寸,内容区域居中在浏览器中间
内容区域的尺寸:980,1000,1100,1200
(2)响应式布局,利用媒体查询来实现不同尺寸的浏览器显示结构不一样
一般会有三张设计图,PC,平板,手机
(3)自适应布局,属于响应式里的一种,利用rem、百分比、vwvh等布局单位来实现,设计图一般只有一张,640、750居多
20.padding:
Padding值的编写主要是确定子集在父集内的位置,编写时代码写在父集内
分开写:Padding-top/bottom/right/left:value;
组合写:padding:top right bottom left(上、右、下、左)
Padding:(上下、左右)
Padding:(上、左右、下)
21.margin:
Margin针对的是同级之间的关系
分开写:margin-top/bottom/right/left:value;
组合写:margin:top right bottom left(上、右、下、左)
margin:(上下、左右)
margin:(上、左右、下)
22.背景图:
(1)缩写:background: color url(背景路径) no-repeat position
(2)颜色background-color:
添加背景图background-image:url(图片路径)
平铺background-repeat:no-repeat/repeat/repeat-x/repeat-y
固定性:background-attachment:scroll(滚动)/fixed(固定)
位置:background-position:left/center/right/数值 top/center/bottom/数值
向左向上为负值。
(3)精灵图(雪碧图):将很多的图片集中在一张图片上
(4)图片整合:
原理:背景图的添加和上下左右的移动
要求:
优点:
(5)滑动门技术:
原理:两个背景图的叠加,来回滑动
比如:在li中设a,在a中设span。a与span同时设置背景图。调整位置。
(6)jpg,png,gif的区别:
1.不支持透明
2.不支持动画
3.除了编辑图片的的原数据(旋转、裁切)外,其他操作都会是图片的质量产生损失。
4.支持隔行渐进显示(但ie浏览器不支持这个属性,但它会在整个图像信息完全到达的时候显示)。
5.适合于web上的摄影图片和数字照相机
1.透明,是布尔透明类型,只能全透明或全部透明,没有半透明
2.动画,gif支持动画
3.无损耗性,对gif做任何操作,都不会对图像质量产生损耗
4.水平扫描:gif采用LZW进行压缩,有上到下水平压缩。说明横向的比纵向的小
5.gif为可选择行的隔行渐进显示
6.只有256中颜色的gif不适合照片,但是和做图形
1.三种类型:png8 256色png别名
png24 全色png别名
png32 全色png别名
2.png32 比 png24多了alpha通道,即透明度。photoshop中png24的透明效果实际上是png32。
3.半透明的png8在ie6以下的浏览器中显示为全透明,说明在ie中如果要设置全透明度时,使用全透明的png8。
4.photoshop中只能导出布尔类型的png8,
fireworks既能导出布尔类型的png8,也能导出alpha的png8
23.边框属性:
对元素设置边框时,显示出的页面效果
宽=元素原宽+边框的宽*2;
长=元素原长+边框的长*2
(1)border:边框大小 边框类型 边框颜色
border:10px solid #f00;
(2)边框大小:border-size(px单位)
(3)边框类型:border-style:solid实线/dashed虚线/dotted点线/double双实线
(4)border-width:上右下左(使用时要先写border)
border-left/right/top/botom
24.地址URL(统一资源定位符):
浏览器宿主环境中,有一个location对象,同时这个对象也是window对象和document对象的属性。
比如地址:https://www.baidu.com/api/sousu?search=baidu&id=123#2
(1)location.href:完整的地址URL
(2)location.protocol:协议 “https:”
(3)location.host:服务器名称和端口号 “www.baidu.com”
(4)location.hostname:返回服务器名称 “www.baidu.com”
(5)location.port:返回服务器端口号
(6)location.pathname:返回URL中的目录和文件名 “api/sousu”
(7)location.search返回查询字符串 “?search=baidu&id=123#2”
(8)location.hash:返回hash值 “#2”
在浏览器中输入url地址之后的加载过程:
(1)利用DNS域名解析系统进行域名解析,将域名解析成IP(域名只是个别名,计算机只认识IP,所以需要DNS进行解析)
(2)查找IP对应的主机服务器(如果第一次访问服务器,会向网络(JSP)供应商请求)
(3)TCP的三次握手,经过三次在客户端和服务器之间传递报文来建立连接
(4)发起http请求,请求入口文件,后端接受到请求相关信息,返回入口文件
(5)解析入口文件,同时如果有资源请求继续发送http请求
(6)入口文件渲染完成(TCP的四次挥手,断开、连接)
25.设置颜色:
26.XHTML文档说明:(可扩展标记语言)
文档结构
元素语法
属性语法
27.表单:
(1)格式1: