目录:
一、HTML
1、概述
2、HTML
二、CSS
一、HTML
1、概述
HTML是英文Hyper Text Mark-up Lang(超文本标记语言)的缩写,他是一种制作万维网页面的标准语言,相当于定义统一的一套规则,大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它
浏览器负责将标记翻译成用户看得懂的格式呈现给用户
2、HTML文档
文档树
Doctype
Doctype告诉浏览器使用什么样的html或者xhtml规范来解析html文档
有与无的区别:
1、BackCompat:标准兼容模式未开启(或叫怪异模式、混杂模式)
2、CSS1Compat:标准兼容模式已开启(或叫严格模式)
这个属性会被浏览器识别并使用,但是如果你的页面没有DOCTYPE的声明,那么compatMode默认就是BackCompat,这也就是恶魔的开始---浏览器按照自己的方式来解析渲染页面,那么在不同的浏览器就会显示不同的样式,如果你的页面添加了DOCTYPE那么就等同于开启了标准模式,浏览器就按照W3C的标准解析渲染页面,这样一来,你的页面在所有浏览器里显示的就都是一样了
用处:
DOCTYPE告诉浏览器使用什么样的html或者xhtml规范来解析html文档,dtd文件则包含了标记、attri、proprties、约束规则
Meta(metadata information)
提供有关的页面元信息,例如:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键字
1、页面编码(告诉浏览器是什么编码)
1 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
2、刷新和跳转
1 <meta http-equiv="refresh" content="30"/> 2 <meta http-equiv="refresh" CONTENT="5;Url=http://www.baidu.com"/>
3、关键字
1 <meta name="keywords" content="星际2,专访"/>
4、X-UA-Compatible
微软IE6是通过XP、WIN2003等操作系统发布出来的,作为占统治地位的桌面操作系统,也使得IE占据了统治地位,许多网站开发的时候,按照IE6标准去开发,而IE6自身的标准也是微软公司内部定义的,到了IE7的时候,采用微软公司内部标准以及部分W3C标准,这个时候许多网站升级到了IE7就比较痛苦,很多代码调整后,才能正常运行,而到了IE8以后,基本微软内部定义标准就废弃了,而全面支持W3C标准,由于基于对标准彻底变化使得原先在早期IE8上能够访问的网站,在IE8上没法正常访问,会出现一些排版错误、文字重叠、显示不全等各种兼容性错误。
与任何早期浏览器相比,IE8 对行业标准提供了更加紧密的支持,因此针对旧版本的浏览器设计的站点可能不会按照预期显示,为了帮助减轻问题,IE8引入了文档兼容性概念,从而允许指定站点所支持的Internet Explo版本,文档兼容性在IE8上添加了新的模式,这些模式告诉浏览器如何解释和呈现网站,如果站点在IE8中没法正确显示,则可以更新该该站点以支持最新的WEB标准,也可以强制IE8按照旧的浏览器中查看站点方式来显示内容,通过使用meta元素将X-UA-Compatible标头添加到网页中,可以实现这点。
当IE8遇到未包含X-UA-Compatible网页时,将使用指令来确定如何显示该网页,如果该指令丢失或者未指定基于标准的文档模型,则IE8以IE5模式来显示
1 <meta http-equiv="X-UA-COMPATIBLE" content="IE=IE7"/>
Title
网页头部
Link
1、css
1 < link rel="stylesheet" type="text/css" href="css/common.css" >
2、icon(表示在网页顶部小标签上可以添加图片)
1 < link rel="shortcut icon" href="image/favicon.ico">
Style
在页面中写样式
例如:
1 < style type="text/css" > 2 .bb{ 3 background-color: red; 4 } 5 < /style>
Script
1、引进文件
1 < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
2、写JS代码
1 < script type="text/javascript" > ... </script >
常用标签
标签一般分为两种:
1、块级标签
2、内联标签(行内标签)
各种符号
http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
例如: ; >; <;
p和br
p表示段落,默认的段落之间是有间隔的
br表示换行
a标签
< a href="http://www.autohome.com.cn"> </a>
1、target属性,_blank表示在新的页面打开
2、锚 href=‘#ID’ ID不能重复
例子:
1 <a href="#1">第一章</a> <!-- 通过id来锚定某一章节 --> 2 <a href="#2">第二章</a> 3 <a href="#3">第三章</a> 4 <a href="#4">第四章</a> 5 <p id='1' style="height: 900px;">第一章内容</p> 6 <p id='2' style="height: 900px;">第二章内容</p> 7 <p id='3' style="height: 900px;">第三章内容</p> 8 <p id='4' style="height: 900px;">第四章内容</p>
H标签
H1~H6 均属于块级标签,字体大小依次减小,单位px或者%
span标签
span属于内联标签,表示白板
b标签:
<b>给字体加粗</b>
em标签:
<em>变成斜体</em>
strike标签:不建议使用
<strike>去除</strike>
<del>替代strike标签</del> #代替strike标签
input标签与form标签(表单)
备注:所有的input标签单纯出现没有任何意义,它不知道将数据提交到哪个位置,需要将input标签嵌套在form标签中才能完成提交动作,同时form中需要涉及到<div> <p> <span>标签内容都不会提交,form中只会提交input的内容
form属性:
1、action 表示提交到哪个位置
2、method表示用何种方式提交,最常用的两种方式为get与post
1 <form action="localhost:8888" method="get"> 2 用户名:<input type="text" name="username"/>
3 密码:<input type="password"/ name="password">
4 <input type="button" value="登录"/>
5 <input type="submit" value="上传"/> 6 </form>
在点击上传后,会提交一个字典给后台
例子:
通过搜狗搜索内容:
1 <form action="https://www.sogou.com/web" target="_blank"> 2 <input type="text" name="query" /> 3 <input type="submit" value="搜索"/> 4 </form>
input属性类型:
1、text
-name属性 value=XXX 表示可以通过value表示默认值
用户名:<input type="text"/>
2、password
-name属性
密码:<input type="password"/><!--显示密文-->
3、submit
-value=提交,提交按钮,表单
<input type="submit" value="上传"/>
4、button
-value=登录,单纯的按钮
<input type="button" value="登录"/>
5、radio
-value,name属性(name相同会互斥) checked=checked表示默认值选择该值
1 男<input type="radio" name="gender" value="1"/> 2 女<input type="radio" name="gender" value="2"/>
备注:name相同就互斥
6、checkbox
-value,name属性(批量获取数据) checked=checked表示默认值
1 篮球<input type="checkbox" checked="checked" name="a" value="1"/> 2 排球<input type="checkbox" name="a" value="2"/> 3 足球<input type="checkbox" name="a" value="3"/> 4 网球<input type="checkbox" name="a" value="4"/>
7、file
-依赖form表单的一个属性,enctype=multipart/form-data 会把本地文件一点一点上传到服务器
<input type="file" name="filename"/>
8、reset
-重置
<input type="reset" value="重置"/>
textarea属性
非自闭合标签,默认在两个标签中间,有name属性
<textarea name="demo">aaaaa</textarea>
select标签
有name属性,内部option,value提交后台,size表示多个,multiple会变为多选,optgroup变为分组,selected=“selected”表示默认值
<select name="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> <option value="4" selected="selected">南京</option> </select>
<select name="mcity" multiple="multiple" size="3"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> <option value="4" selected="selected">南京</option> </select> <!-- 多选-->
1 <select name="ch-city"> 2 <optgroup label="河北省"> 3 <option value="1">邯郸</option> 4 <option value="2">唐山</option> 5 </optgroup> 6 <optgroup label="山东省"> 7 <option value="3">济南</option> 8 <option value="4">青岛</option> 9 </optgroup> 10 </select>
img标签
属性:
alt:图片不存在时显示的注释
title:图片的名称注释
src:图片出处
1 <a href="https://www.baidu.com"> 2 <img src="a.jpg" style="height: 60px; 60px;" alt="QQ" title="QQ"> 3 </a>
列表(不常用,了解即可)
ul(非顺序)
li
ol(顺序)
li
dl(分层)
dt
dd
1 <ul> 2 <li>a</li> 3 <li>b</li> 4 <li>c</li> 5 <li>d</li> 6 </ul> 7 <ol> 8 <li>a</li> 9 <li>b</li> 10 <li>c</li> 11 <li>d</li> 12 </ol> 13 <dl> <!-- 表示分层 ,dt第一层,dd第二层--> 14 <dt>ttt</dt> 15 <dd>ddd</dd> 16 <dd>ddd</dd> 17 <dd>ddd</dd> 18 <dd>ddd</dd> 19 </dl>
表格
table
thead(表格头部)
tr
th
tbody(表格内容部分)
tr
td
1 <table border="1"> 2 <thead> 3 <tr> 4 <th>1</th> 5 <th>2</th> 6 <th>3</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td>一</td> 12 <td colspan="2">二</td> <!--合并单元格--> 13 14 </tr> 15 <tr> 16 <td rowspan="2">一</td><!--合并列--> 17 <td>二</td> 18 <td>三</td> 19 </tr> 20 <tr> 21 22 <td>二</td> 23 <td>三</td> 24 </tr> 25 <tr> 26 <td>一</td> 27 <td>二</td> 28 <td>三</td> 29 </tr> 30 </tbody> 31 </table>
label标签
用于点击文字,使得关联的标签获取光标
1 <form> 2 <label for="username">用户名</label><!--和input合并,点击label直接进入输入框中--> 3 <input type="text" name="user" id="username" /> 4 <input type="submit" value="提交"/> 5 </form>
fildset标签
1 <fieldset> 2 <legend>登录</legend> 3 <form> 4 <label for="username1">用户名</label> 5 <input type="text" name="user1" id="username1" /> 6 <br/> 7 <label for="pass">密码</label> 8 <input type="password" name="password" id="pass" /><br/> 9 <input type="submit" value="提交"/> 10 </form> 11 </fieldset>
二、CSS
1、概述
CSS是英文Cascading Style Sheets缩写,称为层叠样式表,用于对页面进行美化
存在三种方式:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
语法:style='key1:value1;key2:value2;'
- 在标签中使用style=‘xx:xxx’
- 在页面中嵌入<style type='text/css'></style>块
- 引入外部CSS文件
必要性:美工会对页面颜色搭配和图片美化负责,开发人员必须要知道如何实现
备注:style的ID和CLASS均不能以数字开头,但是极少使用ID来标记CSS,CLASS选择器是最常用的
注释:/* */表示注释
CSS样式:
1、id 选择器
1 #a1{ 2 background-color: blueviolet; 3 }
2、class选择器(着重推荐)
1 .b1{ 2 background-color: red; 3 }
3、标签选择器(推荐使用)
1 div { 2 background-color:black; 3 color: white 4 }
满足div下面的所有样式均改为此类型
4、层级选择器(空格)(推荐使用)
1 span div{ 2 background-color:black; 3 color: white; 4 }
.c1 div{ background-color:blue; color: white; } <div class="c1">dd <span class="c1"> <div>daaaaddaaa</div> </span>
5、组合选择器(逗号)(推荐使用)
1 <style> 2 #i1,#i2,#i3{ 3 background-color:blueviolet; 4 color: white; 5 } 6 </style> 7 8 <div id="i1">f1</div> 9 <div id="i2">f2</div> 10 <div id="i3">f3</div>
6、属性选择器(着重推荐)
对选择到的标签再通过属性进行一次筛选
1 <style> 2 input[type='text']{ 3 width: 100px; 4 height:200px; 5 } 6 </style> 7 8 9 10 <form> 11 用户<input type="text"/> 12 密码<input type="password"/> 13 </form>
7、height/width/border/font-size/font-weight/line-height/font-weight/text-align
height:表示高度,可以使用px,一般不能用% 因为会产生进度条
width:表示宽度,可以使用px也可以使用%
border:边框
font-size:字体大小
font-weight:字体是否加粗,bold表示加粗
line-height:表示垂直居中,如果height为48px,line-height也填写为48px,表示垂直居中
text-align:表示水平居中
1 <div style="height: 48px ; 200px;border: 1px solid black;font-size:16px;text-align:center;line-height: 48px;font-weight: bold;"> 2 bbbbbbb 3 </div>
8、float
让标签浪起来,块级别的标签也可以堆叠
父div控制子div:
<div style='clear: both'></div>
<div style=" 20%;background-color: red;float: left;">a</div> <div style=" 80%;background-color:blue;float: right;">b</div>
9、display
display:none;让标签显示消失
display: inline; 块级标签变为内联标签
display:block;内联标签变为块级标签
display:inline-block;具有inine:默认自己有多少占多少;block:可以设置高度、边框等属性
内联标签:无法设置高度、边距
块级标签:可以设置高度、边框
1 <div style="background-color: red;display: inline;">a1</div> 2 <span style="background-color: red;display: block;">b</span>
10、padding margin(0,auto)
margin:外边距
padding:内边距