这是我自己返回网页看了看,总结的一些知识点,应该比较全面了
一、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
今日推荐
周排行