H5的小知识点

/* */ 屏蔽; <br> 换行; 一些值可以用百分比 比如 width:50%;标签:p 段落;h1 大标题; style 可多写;

1:html 也是一种文档格式,网页也是一种文档。
2:html 发展历史。 html4.01 html1.0 html5(最新)
3:DOCTYPE 是 document type 的简写,用来说明你用的 xhtml 或者 html 是什么版本。

Head 这部分主要是给机器看,boby 是人眼看到的部分(文字;图片等)主战场。4:做布局:div 是 division 的缩写 是区域、块的意思。 任何 id 都不能以数字开头

Css 控制宽高背景 width 宽度 height 高度 background 背景; 没有声明宽就最宽。<style> </style>

5:div 浮动

float:left/right; 浮动到左边或右边
清除浮动:clear:left/right; 清除左边或右边浮动 clear:both;全部清除Both 二者,两者,都

6:margin 外边距 margin-top/right/bottom/left:**px(具体化设置)

margin:**px **px **px **px(一体化设置)从上顺时针分配,

没分配,取对边。
利用 margin 实现水平居中 margin:0px auto; auto 自动

Border 边框 三要素:width;style;color;
border:**px solid red; solid 实线;dashed 虚线;dotted 点线;inset 3D 立体;transparent 透明;(查手册)

Padding 内边距 padding-top/right/bottom/left:**px(具体化设置)
padding:**px **px **px **px(一体化设置)从上顺时针分配,

没分配,取对边。

7:更改背景颜色平铺的范围

Background-clip 指定对象的背景图像向外裁剪的区域Border-box (默认)背景被裁剪到边框盒Padding-box 背景被裁剪到内边距框
Content-box 背景被裁剪到内容框

Background-clip:padding-box/content-box;

8:W3C 标准盒子模型

一旦定义宽高,实际写文字的地方就固定,加上 padding;border;margin;盒子的实际占地面积变大。

CSS3 新属性:box-sizing 设置或检索对象的盒模型组成模式
content-box(内容盒)默认值 W3C 的盒子,盒子的尺寸,宽高是写内容的地方。border-box(边框盒)盒子的尺寸,宽高是包含边框在内的,那写内容的地方变

小。

box-sizing:border-box/padding-box 边框盒/内边距盒

9:内联元素又叫行内元素(inline)

div 特点:它要独占一行,div 这种元素叫块状元素。
Span:典型的行内元素。内联元素特点:就像一个橡皮筋,文字到哪,行内元素就包到哪。不能设置宽高。

10:行转块(行内元素转块状元素)

display:block; 转换块 可以设置高度也就是行高
display:inline; 转换行 让其内容在一行 display:none;可令 div 隐藏

11:设置文本
text-indent:30px 段落首行缩进 30px

文本对齐 text-align(水平对齐方式);left(默认左边);right(右边);center(文本排列到中间)。

文本装饰线 text-decoration:underline(文本下划线);overlinn(文本上的一条线);line-through(文本穿越线)。

text-decoration-style:css3 新属性,各浏览器还不兼容一些新的 css3 属性,各浏览器

的私有试验性质的属性,会在前面加上:-moz 火狐;-ms和 safar。

文字阴影 text-shadow:详见手册!12:文字控制

LE 浏览器;-webkit

chrome

font-style 正斜;
font-weighe 粗细:中文只有正常和加粗;
font-size 大小;
line-height 行高:行高变大,两行字之间的距离就变大;font-family 字体。
Css 简写:{font:style weighe size/height family};

{font:italic bold 20px/30px ‘黑体’}必须要有 size 和 family 并按顺序来简写。

13:font-family 字体

字体大类:中文 2 大类:无衬线 sans-serif(黑体,雅黑,文泉驿正黑体)有衬线 serif(宋体,新宋)

英文字体:花体 segor script(像手写的,中文没有,做花体的代价高)等宽字体 monaco,courier,monospace

不等宽字体 kodchiang UPC安全字体:大家电脑上几乎都有的字体。

字体顺序: 独特字体->安全字体->字体大类

14:设置背景

background-image:url(./**.png); ./ 当前目录,../ 上级目录。不能写 D:/或者 E://

我们的服务器基本是 linux 的;没有 D E 盘,即时是 windows 也不保证一定有 D 盘,而且还要将图片再放在你写的 D 盘 E 盘中才能发挥作用。

一行达到几行效果:background:背景色 图片地址 图像如何填充 图像滚动/固定 图片位置;

background-repeat 背景图像如何铺排填充。background-attachment 背景图像是随对象内容滚动还是固定。background-position 背景图片的位置默认在最上侧,更换图片位置。

大图片背景

利用:background-position 完成。好处:减少服务器压力,访问次数。

16:css 选择器与优先级

通过 id 选中元素
类选中某个或某几个元素:class 用点来选中如标签选择器:直接 div{ },p{ },h1{ }。层级选择器也叫派生:可以精确的选择儿子或孙子群组选择器:就是一起选中用 , 号来隔开几个元素。

优先级:id>类>标签 选择器命中的越精准优先级越高。

17:css 引入方式

使用 HTML 标签的 STYLE 属性。
使用 link 标签,引入外部 css 文件。 Link 标签通常放在一个网页的 head 标签内
< link rel=“stylesheet”href=“./**.css> 在 css 文件中不用写 style 标签,直接写代码

<div class="a"></div>

.a{ }

使用@import 可以在 css 文件中导入 css 文件。 @import url( );在除 css 文件中引入

其他的 css 文件,一定要放在第一行,不然没效果。内联样式:直接写在标签的 style 属性里,用于临时测试!!

18:css 初始化

一些浏览器它们对某些标签都有一定的初始值,但是这些初始值有可能不一样,如果初始值不一样,有可能导致,在不同的浏览器访问下,有可能页面是变形的。

将各种标签的初始值都变为 0,大家都在同一起跑线上,这个过程称为 css 的初始化,它非常的有实际意义,在多浏览器兼容的时候,首先初始化就可以避开个浏览器初始值不一样,所带来的干扰。

Css 初始化代码要放在最前方!! 可用 link 标签引入。

19:有序列表和无序列表

ul 无序 ol 有序 li 行列 例: <ul> <li></li> <li></li> </ul>20:整齐的表格

Table 表格; tr 行; td 单元格; th 表头的声明;
跨列合并:colspan 水平方向;rpwspan 竖直方向; 例:<td colspan=”2”> </td>因为表格是个体需让相邻表合并:table{border-collapse:collapse;}

21:有语义标签

Heder 头部;footer 版权;nav 导航;article 文章; aside 侧边栏; time 时间;与 div 没啥区别,就是方便蜘蛛更快的了解网页。

22:img 图片标签

url 地址可以指向其他站点(称绝对 url)
alt :规定图像的替代文本,当图片失效时,显示文字。Title:鼠标放上去,显示此文字。

可以从其他网站引入图片,但有的图片有防盗链,就不能使用。

例:<img src=”地址” alt=“ 文字说明“ title=” “>Img 是内联替换元素,替换元素可以设置宽高。

23:超链接标签

A 标签的 href target:在何处打开目标 url
<a href=”地址” target=”-blank” title=”注释跳到哪里”>Target=”-blank”:在新标签打开链接。

24:锚点

锚点可以具体定位到网页的某个位置例:<a href=”#p3”> 锚点 </a><h2 id=”p3”>锚点 </p>

25:css 伪类(选中的元素的某个状态)

顺序:L>V>H>A

以 a 标签示例 浏览器通过历史纪录来判断是否访问过网页(visited 点击后)

a:linka:visiteda:hovera:active

正常的 a 标签的状态(可简写 a)选中的是鼠标点击后 a 标签的状态

选中的是鼠标经过 a 标签时的状态鼠标点击的瞬间的状态(未松鼠标)

26:字符实体

http://w3school.com.cn/tags/html_ref_entities.html

27:css3 的强大选择器

&amp; 和号&quot; 引号 &copy; 版权 &reg; 注册商标

&yen; 人民币

&nbsp; 空格 &lt; 小于号 &gt; 大于号

层次选择器:后代选择器 div ul;儿子选择器 div>ul;相邻元素选择器 div+p;(必须相邻)

兄弟选择器 div~p,div~p~h1;
属性选择器(用在表单里比较多):例:<input type=”text” name=”属性”>

选:input{ };input [name] { };input [name=属性]{ }详细选定是为了区别不同的属性

伪类选择器: div:first-child{ }

first-childlast-childnth-child(N)

匹配作为第一个子元素的元素
匹配作为最后一个子元素的元素

匹配作为第 N 个子元素的元素 N

伪对象选择器: (人为伪造出来的对象,本身没有这个对象)before 设置元素前面的内容, after 设置元素后面的内容。例: p: : before{content:“# ” }

Min 最小值 max 最大值
min-height:400px; 最小是 400px,但随着内容的增大也会增大max-height:400px; 最大是 400px,没有内容就是 0px,内容在多也是 400px

28:图标字体

见网页:http://fortawesome.github.io/Font-Awesome/cheatsheet/29:色彩表示(用程序员计算机替换)

Hex 十六进制, DEC 十进制, OCT 八进制, BIN 二进制;rgb(20, 100,200) 十进制; #1464c8 十六进制
rgb(red, green, blue) red[0-255], green[0-255], blue[0-255]

30:尺寸的表示

px 像素(绝对表示法) **%(百分比,相对表示法)

em:父元素中,字体的大小,就是 1em,所以 1em 是不固定大小的,它取决于父元素字体的大小。

31:css 画圆角 border-radius

给 div 的四个角分别指定圆角:border-radius:10px 20px 30px 40px;顺时针方向 取得是半径的值

32:相对定位于绝对定位
相对定位:position : relative; 告诉元素相对于自己的位置移动,只改变元素自己的

位置,其他元素的位置不受到干扰。

绝对定位:position:absolute; 绝对定位是在浏览器渲染完其他的元素后,在把绝对定位的元素直接从半空中投射到他的父元素的位置上。

如果一个元素需要用绝对定位,需要它的父亲要有 position 属性,可以加一个相对定位,不给 top 等,让父元素相对自己位置变化,实际又没有变化

例:{position:relative; top: px; left: px;}

y

0

x 让下面的元素到上面来

Z 轴表示屏幕到我们视觉方向的距离;数值越大,则理我们越近,则会覆盖在最上放。

z-index : 2;>z-index:1;

Z

33:overflow 溢出处理

Hidden:隐藏溢出容器的内容,且不出现滚动条。Scroll:始终预留滚动条
Auto:溢出时才有滚动条

例:overflow:hidden;

34:注册表单 form input声明表单: form

<form action=”提交到哪里“ method=”提交方式 post/get“> </form>默认是 get 传参,参数显示在 url 地址栏上,信息会暴露,而 post 就不会。

文本框:text; 密码框:password; 单选框:radio; 多选框:checkbox;文本域:textarea; 文件域:file; 隐藏域:hidden;
下拉框:<select name=”” id=””>

<option value=””> 下来内容 </option>恢复原状:reset 提交:submit

例:< input type=“submit“ value=”提交“>

速写法:input:submit 按 tab

</select>

Name:每一个表单都有一个 name 属性值,这 name 所对应的属性值,就是在提交的时候,等号前面的那个参数。

Value:有一些我们无法输入的值,比如说“选择框“”下拉框“等它获取的就是 value,代表的是一个默认值的参数提交上去的。