这是我自己返回网页看了看，总结的一些知识点，应该比较全面了
一、HTML
1、历史特性：
（1） HyperText Markup Language超文本标记语言，是一门标记语言。2010年正式推出HTML5，HTML是制作网页的基础语言，主要用于描述超文本中内容的显示方式。
（2）XHTML:可扩展超文本标记语言，优点：可扩展性和可移植性
XML :可扩展标记语言
（3）超文本：使用超链接的方法把不同空间的文字信息组织在一起的网状文本。
2、网站站点建立：
（1）网页文件夹和文件的命名规范：字母数字下划线组成且不以数字开头。
（2）站点建立：站点文件夹：web-01；
站点文件夹下的文件夹：css , html , images(Flash,js这两个目前还不用)
文件夹下的文件：style.css , index.html ,img
（网页扩展名可以为：.html，.htm都可以）
（3）网站：用于展示相关内容的网页的集合
3、网页分类：
网页：网站中的任一页面。
静态网页：html/htm 动态网页：.asp，.jsp，.php
4、w3c标准：结构（Structure）、表现（Presentation）、行为（Behavior）
w3c:World Wide Web Consortium
结构：用于结构化的Web标准化技术主要由：Html、Xhtml、Xml。
表现：主要指CSS。
行为：表现行为的标准技术主要有：DOM和Javascript。Dom是一种让浏览器和Web内容结构沟通的接口，javascript主要是用来操作DOM的。
表现和内容分离是Web标准的核心。
5、html标签
（1）是HTML最基本的单位。
（2）注意事项：
标签可以嵌套使用，但不可以交错使用
在设置标签属性值时一般使用引号（单引号或双引号都可以），但引号也可以省略。不过按照w3c的的规范，最好为每一个属性值加上引号。
HTML中标签名称，属性名，属性值大小写不敏感，但从视觉上的体验来说，一般用小写。属性不能在结束标签中。
在css中:
- id名和class名是区分大小写的
- 选择器中，只有标签选择器不区分大小写
- 属性名和属性值是不区分大小写的
属性和属性值
属性：标签的特征；
属性值：属性的值。
（3）分类：双标签和单标签
（4）网页布局
二、标签
1、标题标签 <h1-6></h1-6>
<h1>最大</h1>
<h2>啊啊</h2>
<h3>啊啊</h3>
<h4>啊啊</h4>
<h5>啊啊</h5>
<h6>最小</h6>
2、文本标签
段落标签：<p></p>
加粗：<b></b>
加粗强调：<strong></strong>
倾斜：<i></i>
倾斜强调：<em></em>
下划线：<u></u>
中线/删除线：<s></s>
双引号英文：<q></q>
换行：<br/>
水平线：<hr/>
属性：
width:20px;
size:1px;
color:red;
align:(left,center,right)
2、特殊符号
空格： 是在网页中添加一个半角空格。
小于<：<
大于>：>:
版权：© copyright
注册：® register
引号“ " ”:"
& :&
• ：&bull
3、图片 <img/>
属性： 路径src=""
宽度width=""
高度height=""
路径错误提示alt=""
鼠标光标提示内容title=""
4、列表
有序列表ol>li
type= "disc(默认),circle,square"
无序列表ul>li
type="1(默认) ,a ,A ,i ,I" * 不可以为其他的值
start=""
reversed *不需要属性值
自定义列表dl>dt(定义列表中的项目) dd（描述列表中的项目）
5、a标签<a></a>
属性：
href=”#” 链接路径
target="_blank,_self,_parent,_top " *打开方式
*注意：
（1）超链接是一对一的关系。
（2）链接网址必须要有http。
（3）特点：a.可链接的对象可以是行内元素，也可以是行内块元素，也可以是块元素
常用：href=""(邮件：mailto:[email protected]; )参考：http://note.youdao.com/noteshare?id=d083baf89b7bdc700e749eb5a24fbd20&sub=567AE89724904F6187EE98852567D186
6、表格<table></table>
（1）<table> </table>
属性：width=""
height=""
bgcolor=""
border=""
bordercolor=""
background=""
align=""
border-collapse=”collapse”; （CSS）单元格间隙合并
cellspacing="" 单元格间距，默认值是2px;
cellpadding="" 单元格内容与单元格边框的距离
（2）<tr> </tr>
属性：align="";
valign="";
bgcolor="";
（3）<th> </th>（和 td 属性一样）
（4）<td></td>
属性：align="left,center,right,justify";
valign="top,middle,bottom,baseline";
colspan="";
rowspan="";
*注意：
（1）表格特性:
数据展示。
更直观清晰的告知用户对应数据信息。
7、表单<form> </form>
（1）<form> </form>
action=”提交的地址，网址” 提交地址
method="get/post" 提交方法
target="_blank,_self（默认）" 打开方式
（2）<intput> </input>
属性：
type="text文本框，
password密码框， *password中的value显示影藏，place holder显示正常
radio单选，
checkbox复选/多选，
submit提交，
reset重置，
button按钮，
image图片，
file文件域，
hidden隐藏
disabled禁用input元素"
checked="checked" 预选定
disabled="disabled" 应该禁用的元素
readonly 规定输入字段是只读的
name 元素的名称
placeholder 提示信息（虚）
src 插入图片的路径
step 元素的合法数字间隔
max 最大值
min 最小值
value 元素的value值（实，文字就存在了文本框或者按钮内）
width height只针对插入图片的宽高
placeholder 提示（虚，鼠标点进文本框，提示信息不消失，输入文字时，提示信息消失）
默认值：获取焦点和失去焦点默认值，以下图片
（3）下拉列表select>option
<select></select>
name=""
id=""
multiple=”multiple” 多选
size="" 多选的数量
<option></option>
selected=”selected” 默认选项选择
<textarea></textraea>
cols="" 文本宽度
rows="" 文本高度
* 注意：
（1）表单特性：
数据交互。
定义属性表现。
（2）按钮的type类型：button，reset，submit，image
三、CSS样式：Cascading style sheets
1、功能：用于控制网页的外观。用于将格式与结构内容分离（html控制结构内容，css控制格式）。
2、选择器：
（1）全局选择器（通配符选择器）:
（2）标签选择器：
（3）类选择器：
（4）ID选择器：
（5）伪类选择器：
（6）层级选择器：
（7）群组选择器：
3、样式：
（1）行内样式：
（2）内嵌样式：
（3）外部链接样式；
（4）导入样式：
* 样式表的分类：行内样式表 >内部样式表>外部样式表 (优先级)
行内 内嵌 外链和导入
4、文字属性：
color： 颜色
font-size： 字体大小
font-family： 应用字体
font-weight:bold | bolder | 100-599 | 600-900 | normal; 字体加粗
5、段落属性：
text-decoration:underline | overline | line-through | none;文字修饰
text-align: 水平对齐方式
text-indent:24px | 2em | 50% | 负值 ； 文本缩进
line-height: 25px | 50% | 2 (size的正数倍); 文本行高
6、背景属性
background-color: 背景颜色
background-image:（默认属性值为none）|url()|inheit 背景图片
background-repeat:repeat（默认值） | no-repeat | repeat-x | repeat-y。背景重复
background-position:x,y; 背景图片位置
x:left,center,right | 100px | 50%
y:top,center,bottom | 100px | 50%
background-attachment: scroll(随滚轮动) | fixed 滚动图片|固定图片
background-size:length | percentage | cover | contain;背景图片大小（宽，高），一般独立于复合属性单写。
*注意：
（1）可以这样写：50% center;不可以这样写：top ，right
（2）注：先写x方向，再写y方向，不能反着来。取值可以是：关键字（上面就是）、数值、百分比。）
（3）background-attachment: scroll(随滚轮动) | fixed（不随滚轮动）;定义背景图片随滚动轴的移动方式.fixed是背景图的固定。
（4）注：百分比是相对父级;cover是长宽等比覆盖背景就是父级最长边被覆盖,contain是长宽等比父级最小边被覆盖。
7、列表属性
ul,ol,li{ list-style:none; 清除列表前面的默认type；
list-style-image:url() | none(默认) | inherit; 列表前面放图片
list-style-type:square|none |disc |circle | decimal | none ; 列表类型
list-style-position:inside | outside | inherit； 列表的类型放置在了padding中为40px;
}
*注意：
（1）如果设定了一个li的list-style-type:none;那么后边的li还是原来的顺序数，前后不会改变。
8、边框属性border
width:默认3px; 宽度
style: dotted 点线| dashed 虚线| solid 实线| double 双线| none 取消线 样式
color:name | RGB | hex (16进制值) | transparent 颜色
*注意：
（1）这三个属性只有width不写时有默认值，其余两style ，color必须写才会出现不可。也可以border-top | border-top-color 等。
（2）所以border线消失的方法：a.border-width:0;
b.border-width:0px;
c.border-style:none;
9、内边距
padding: 12px;
padding-top,right,bottom,left: auto | 12px;
10、外边距
margin: 12px;
margin-top,right,bottom,left: auto | length | percentage;
11、overflow
值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
四、盒子模型属性：
一共就四个：margin、padding、border、content（width，height）（宽高是盒子的宽高，不是文本的宽高；只会考这四个，不会出margin-right这样的）
五、浮动
float: left(元素顺序显示) | right（元素倒序显示） | none;
清除浮动：
clear:both | left | right | none | inherit .
*注意：清除浮动只是指clear;
六、行内元素、行内块元素、块元素
转换：display:inline | inline-block | block | none(消失，不占空间);
行内元素有：heda meat title label span(用于文本字节) br a style em b i strong
块级元素有：body from select textarea h1-h6 html table button hr p ol ul dl cnter div
行内块元素常见的有： img input td （img input 也属于行内元素）
七、定位
position：属性：
默认定位：static（默认）
绝对定位：absolute 相对于具有定位属性的父级元素的定位
相对定位：relative 相对于本身原来的位置进行定位
固定定位：fixed 相对于网页窗口进行定位
left:(比right优先) 50% | 14px ;
top:（比bottom优先） 50% | 14px ;
right: ；
bottom: ；
z-index:; z轴上的相对位置，用整数。值越大越靠上。
*注意：
（1）fixed固定定位和absolute绝对定位都会脱离原来的位置进行定位，到了不同的层面。
（2）absolute绝对定位会追溯有定位属性的父级，如果没有，会相对于文档定位。
（3）如果让一张图片fixed在网页正中间，用
left:50%；
top:50% ;
margin-left:-1/2width ;
margin-top:-1/2height;
八、DIV
<div></div>
（1）两个div的margin-bottom和margin-top可以共用空间,两者间距为最大值。
两个行内（包括行内块）元素的左右margin-right ，margin-left不可以共用空间，所以两者间距离=margin-right + margin-left;
（2）补充属性：
opacity:[0,1]; 透明度
vertical-align:top | middle |bottom |baseline | 数值;（middle和数值常用）
color:rgba(_,_ ,_,0.5); 设置字体颜色透明度
line-height=div.height; 设置文字垂直方向对齐
font-size:20px; 设置的四字体的高度
letter-spacing 文本文字间距
border-radius:;
transition: opacity 2s;
word-break: normal|break-all|keep-all; 自动换行
word-wrap: normal|break-word;
九、优先级
下列是一份优先级逐级增加的选择器列表：
通类选择器 0
元素（类型）选择器 1 | 伪元素span::before span::after
类选择器 10
属性选择器
伪类
ID 选择器 100
内联样式 1000
!important
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如 .content，权值为10。
第四等：代表标签选择器和伪元素选择器，如 div、p，权值为1。
第五等：通用选择器（*），子选择器（>），相邻选择器（+）和后代选择器权重值为0。
权值叠加使用。
*CSS之派生选择器（上下文选择器）：后代选择器(p a 层级选择器)，子选择器（p>a），相邻兄弟选择器（h2+h）
全局：
*{ padding:0; margin:0 auto; font-size:15px; font-family:"宋体"; }
body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,input,select,textarea,span,img,a,em,strong{ margin:0; padding:0; }
ul,ol,li{ list-style:none; }
h1,h2,h3,h4,h5,h6{ font-size:14px; }
input,select,textarea{ vertical-align:middle; }
img{ border:none; vertical-align:middle; }
a{ text-decoration: none; color:black; }
a:hover{ text-decoration: underline; color:blue; }
.clear{ clear:both; }
box-shadow: 100px 50px 200px #foo ;
( 1、水平偏移距离
2、垂直偏移距离
3、辐射半径
4、阴影颜色
5、inset 内阴影，)
HTML标签和知识点总结
猜你喜欢
转载自blog.csdn.net/feifeiyechuan/article/details/82013916
今日推荐
周排行