HTML
一、定义
HTML:Hyper Text Mark-up Language超文本标记语言,通过元素标签的形式建立Web站点,通过浏览器进行解析。
二、<body>中的标签
1、换行符 <br/>
2、水平<hr/>
3、段落 <p></p> 特点:上下自动生成空白行。
4、标题<h1></h1>。标题有六种,h1最大,一个页面只能出现一次。
5、文本标签<font></font>
文本格式化,一些常用于设置文本字体的元素:
<big>大号文字</big>
<small>小号文字</small>
<strong>加粗</strong> (尽量用strong)<b>加粗</b>
<em>倾斜</em>(尽量用em) <i>倾斜</i>
<del>删除线</del>(尽量用del)<s>删除线</s>
<sub>下标文字</sub>
<sup>上标文字</sup>
<ins>插入文字</ins>
6、图像<img />
属性 | 属性值 | 说明 |
Src(必写) | url | 图像资源的地址 |
width | 像素(px) | 图像宽度 |
height | 像素(px) | 图像高度 |
alt | 替代文字 | 不能显示图像信息时候的替换文字 |
title | 替代文字 | 鼠标放在图片上显示的文字 |
图片没有定义宽高的时候,图片按照百分之百比例显示,如果只更改图片的宽度或者高度,图片等比例缩放。
路径:
./ 当前目录
../ 回到上一层目录
7、定义超链接 <a href=“URL”></a>
属性:href属性必须有,href的作用是指明超链接要链接到的网址。
title属性表示链接的提示信息,鼠标放到链接上显示的文字。
target属性表示链接的打开方式,属性值包括_blank(新的空白页)、_self(当前页),_top(当前页)、_parent针对于框架页面中的跳转
<a href="#"> </a> #但表当前页 空链
href也可以链接到别的地址,如邮箱、电话、sms。
<a href=“1233456.qqcom”>邮件链接</a>
<a href=“tel:电话号码”>拨打电话</a>
<a href="sms:139xxxxxxx">发送短信</a>
8、锚点;点击使用户跳到文档的某个部分。
例:<a href="#位置名">跳转</a>
<p id="位置名">代码代码</p>
从a跳转到p
9、 HTML 实体字符。
* 实体名是大小写敏感的。后面的分号必须有。
空格
小于号< <
大于号> >
和号& &
人民币¥ ¥
版权©️ ©
注册商标®️ ®
摄氏度 °
正负号 ±
乘号 ×
除号 ÷
平方2 ²
立方3 ³
10、列表
(1)、无序列表
无序列表用<ul><li></li></ul>表示。
属性:Type(用css中的list-style也可以)
属性值: 列表前的符号
disc 实心原点
circle 符号为空心圆
square 符号为方形
2)、有序列表
有序列表用<ol><li></li></ol>。
有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。
属性 属性值 说明
type 1、 a 、 A、i、I 用来设置项目前面的标记
start 数值 排序的起点数值
(3)、定义列表
定义列表用<dl><dt>标题</dt><dd></dd></dl>
11、表格(用div)
表格由 <table> 标签以及一个或多个 tr、th或td 元素组成。
注意:*colspan =”2”合并同一行上的单元格 , rowspan =”2”合并同一列上的单元格; *cellpadding 单元格边距(字与内边框的距离) cellspacing 单元格间距(内外边框的间距);
12、form 表单<form></form>
表单主要负责获取用户填写的数据,并通过浏览器向服务器传送数据。
属性 说明
name 表单的名称
action 表单提交地址
method 表单数据提交的方式 (get:在url地址上面传送参数到服务器,post:在后台传送参数到服务器)
enctype MIME类型
target 打开方式(_blank:在一个新的窗口打开 _self:在相同的框架中调入文档 _top:把文档调入原来的最顶部的浏览器窗口中)
1)文本域:文本域通过<input type="text"> 标签来设定
maxlength="" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态(不能编辑)
disabled="disabled" 输入框未激活状态
name="username" 输入框的名称
value=" " 将输入框的内容传给处理文件
2)密码字段:密码字段通过标签<input type="password"> 来定义;
文本输入框的所有属性对密码输入框都有效。
3)单选按钮:单选按钮通过标签<input type="radio"> 来定义:
*name属性:只有将name的值设置相同的时候,才能实现单选效果。
checked=”checked” 设置默认选择项。
例:<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
4)复选框:复选框通过标签<input type="checkbox"> 来定义:
默认选中:checked=”checked”
<input checked="checked" type="checkbox" id="r1">
<label for="r1">复选框</label>
5)下拉列表:<select ></select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
属性 说明
size 下拉列表框的显示行数
multiple 是否多选
disabled 是否禁用
selected 设置默认选中的选项
value 选项值
<optgroup></optgroup> 对下拉列表进行分组。
Label=”” 分组名称。
<select name="city" multiple>
<optgroup label="广东">
<option value="1">广州</option>
<option value="2">深圳</option> </optgroup>
<optgroup label="其他">
<option value="3">长沙</option>
<option value="4">香港</option> </optgroup>
</select>
6)textarea(表单元素:多行文本域)
属性 说明
rows 指定文本框的高度
cols 指定文本框的宽度
例:<textarea name="content" rows="5" cols="50"> </textarea>
注:此处的文本框宽高是由字符个数组成的。
7)上传文件
<input type=“file” name=“photo” />
利用这项功能时,在 form 标签中要指定method属性。要把enctype属性指定为 multipart/form-data。
说明:multiple 控制是否上传多文件
<input type="file" name="photo" multiple />
8) 提交按钮: 提交按钮通过标签<input type=submit"> 来定义:
9)普通按钮:<input type=button">
不能提交信息,配合JS使用。
10)图片按钮:<input type=image">
图片按钮可实现信息提交功能
11)重置按钮:<input type=”reset”>
12)隐藏域:隐藏域用于在程序发送没有必要让用户看到特定值的时候使用。
<input type="hidden" name="uid" value="10"/>
13)<label>: label标签的作用是将输入项或选项及其标签文字关联起来。
<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女</label>
14)HTML5补充表单控件
网址:<input type=“url”>
日期:<input type=“time”>
时间:<input type=“time”>
邮件:<input type=“email”>
数字:<input type=“number” step=“5”>
滑块:<input type=“range”>
13、<span></span>用于块级元素中的行内元素
三、<head>中的标签
1、<meta>标签
name属性,后面接content
1)、name='viewport'视口
说明:在移动设备浏览器上,user-scalable=no可以禁用其缩放功能。这样禁用缩放功能后,用户只能滚动屏幕。
<meta name="viewport" content="width=device-width",initial-scale=1,maximmum-scale=1,user-scakable=no''>
2)、name='description' 网页描述
3)、name='author' 作者
4)、name="keywords"' 关键字
5)、name="copyright"版权信息
6)、name="robots"
robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引,content的参数有:all,none,index,noindex,follow,nofllow.默认是all.
http-equiv属性,后面接content
1)Refresh自动刷新并转到新页面。
<meta http-equiv="Refresh" content="5;URL">(URL可为空)
2)content-Type(显示字符集的设定)
<meta charset="utf-8">
常用的是utf-8和gb2312。utf-8为多国语言编码,gb2312为中文简体编码。
3)Window-target(显示窗口的设定)
强制页面在当前窗口以独立页面显示。
<meta http-equiv="window-target" content="_top">
4)Set-Cookie
说明:如果网页过期,那么存盘的cookie将被删除。
<meta http-equiv="Set-Cookie"> content="cookievalue=xxx;expires=Friday,12-Jan-2001 18:18:18 GMT;path=/"(必须用GMT时间)
5)Pragma
说明:禁止浏览器从本地计算机的缓存中访问页面内容。
<meta http-equiv="Pragma" content="no-cache">
这样设定,访问者将无法脱机浏览。
6)Expires(期限)
说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
<meta http-equiv=Expires Content=0>
<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18GMT">
1、X-UA-Compatible
X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。
<meta http-equiv="X-UA-Compatible" content="IE=7">
#以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
#以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.
2、 content = "IE=Edge,chrome=1"
这里的chrome=1不是说IE的技术增强了可以模拟Chrome浏览器,而是与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。这个插件可以让用户的IE浏览器外观不变,但用户在浏览网页时实际上使用的是Chrome的内核,并且支持Windows XP及以上系统的IE6/7/8。
而上文提到的那个meta标记,则是在是安装了GCF后,用来指定页面使用chrome内核来渲染。
GCF下载地址: http://code.google.com/intl/zh-CN/chrome/chromeframe/ (ie打开)
安装完成后,如果你想对某个页面使用GCF进行渲染,只需要在该页面的地址前加上 gcf: 即可,例如: gcf:http://cooleep.com
但是如果想要在开发时指定页面默认首先使用GCF进行渲染,如果未安装GCF再使用IE内核进行渲染,该如何进行呢?
就是使用这个标记。
2、<link>标签
1)链接外部样式表
<link rel="stylesheet" href="">
2)设置icon图标
<link rel="icon" href="">
四、文档声明(Doctype)的作用
声明位于文档的最前面,处于标签之前,告知浏览器的解析器用什么文档类型来规范解析这个文档。Doctype不存在或者格式不正确会导致文档以混杂模式呈现。
例如:<!DOCTYPE html>等于开启了标准模式,那么浏览器就按照w3c的标准解析渲染页面
五、语义化
概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)
好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。
意义:1、网页结构合理
2、有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取。
3、方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)
4、便于团队的开发和维护
如何语义化:
1:尽可能少的使用无语义的标签div和span;
2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
3:不要使用纯样式标签,如:b、font、u等,改用css设置。
4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i)。
六、常见的浏览器及其内核
Trident(IE内核)
360安全浏览器(1.0-5.0为Trident,6.0为Trident+Webkit,7.0为Trident+Blank);
360极速浏览器(7.5之前为Trident+Webkit,7.5为Trident+Bkink);
遨游浏览器(遨游1.x/2.x为ie内核,3.x为ie与Webkit双核);
猎豹安全浏览器(1.0-4.2为Trident+Webkit,4.3及以后的版本Trident+Blink);
搜狗高速浏览器(1.x为Trident,2.0及以后版本为Trident+Webkit);
uc浏览器(Blink内核+Trident内核);
Gecko(Firefox内核)
Webkit(Safari内核,Chrome内核)
Presto内核(Opera内核)
七、严格模式和混杂模式
严格模式:浏览器根据规范呈现页面
混杂模式:页面以一种比较宽松的向后兼容的方式显示。通常模拟老式浏览器的行为以防止老站点无法工作。
差异:最显著的例子是:ie6出现的时候,在严格模式使用正确的盒模式,在混杂模式中则使用老式专有的盒模型。