浏览器内核
Trident(IE内核)
代表:
IE、遨游、世界之窗、avant、腾讯TT、猎豹、360、百度
win10发布后,IE将其内置浏览器命名为edge,edge最显著的特点是新内核EdgeHtml
Gecko(firefox)
代表:
火狐
是开源的浏览器
webkit(Safari)
代表:
苹果浏览器
Chromium/Blink(chrom)
代表:
谷歌
Presto(Opera)
代表:
Opera
WEB标准
结构标准:结构用于对网页元素进行整理和分类,主要包括XML和XHML两个部分
样式标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是css
行为标准:只网页模型的定义及交互的编写,主要包括DOM和ES两个部分
路径
相对路径
1. 两个文件在同一个文件夹下,只需要输入文件的名称即可
2. 要查找的文件在本文件的下一级文件,输入文件夹名和文件名,用“/”隔开
3. 要查找的文件在本文件的上一级文件,唉文件名之前输入“../”,如果是上两级“../../”
字符集
utf-8:目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312
gb2312:简体中文,包括6763个汉字
BIG5:繁体中文,港澳台等
GBK:全部中文字符,是gb2312的扩展,加入对繁体字的支持,兼容GB2312
UTF-8:包含全世界所有国家需要用到的字符
HTML标签
双标签<></>
单标签</>(也称为空标签)
排版标签
标题标签
<h1>~<h6>依次递减,最小到6级,<h1>尽量少用,有加粗功能
段落标签
<p></p>
水平线标签
<hr />
换行标签
<br />
div和span标签
主要用来布局
文本格式化标签
加粗:<b></b> <strong></strong>
斜体:<i></i> <em></em>
删除线:<s></s> <del></del>
下划线:<u></u> <ins></ins>
strong em del ins语意更强烈
标签属性
1. 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面
2. 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开
3. 任何标签的属性都有默认值,省略该属性则取默认值
4. 采用键值对的格式定义“key=’value’”
img
<img />
- 基本图像插入方式
<img src=’ ….’/>
2.带有alt方式的插入
<img src=’…’ alt=”这是头像”/>
图像不能显示时的替换文本
3. 带有title的方式插入
<img src=’…’ title=”这是我的头像”/>
鼠标悬停时显示的内容
4. width height border
<img src=’…’ width= ‘33’ height=’22’ border=’10’/>
链接标签
<a href=’…’></a>
属性:
href:跳转的页面url
target:指定链接页面的打开方式,_self为默认值表示在自己的当前页面上打开,会覆盖当前页面;_blank为在新窗口中打开。
锚点定位
<a href=”#live”>生活</a>
<h3 id=”live”>个人生活</h3>
base标签
在head标签中,使用<base/>标签,可以试用于所有的子标签
特殊字符标签
空格符  
小于号 <
大于号 >
和号 &
人民币 ¥
版权 ©
注册商标 ®
摄氏度 °
正负号 ±
乘号 ×
除号 ÷
平方 ²
立方 ³
注释标签
<! ……!>
列表标签
无序列表
两个标签组成
<ul>
<li></li>
<li></li>
<li></li>
</ul>
注意事项:
1.<ul>标签里边只能放<li>标签
2.<li>标签相当一个容器,里面是可以放置其他标签的
3.无序列表会带有自己的样式属性,不用那个样式,让css来设置
有序列表
<ol>
<li></li>
<li></li>
</ol>
自定义列表
<dl>
<dt>名词</dt>
<dd>对名词进行描述</dd>
<dd>对名词进行描述</dd>
<dd>对名词进行描述</dd>
</dl>
表格
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
注意事项:
<table>标签里面只能放<tr>标签
<tr>标签里面只能放<td>标签
<td>标签里面可以放其他标签
<th>表头标签,自动居中对齐,加粗
<thead>只是用来划分表格,头部
<tbody>主体部分
<caption>表格标题
表格属性:
cellspacing:单元格和边框的距离
cellpadding:单元格内容和边框的距离
align:表格在网页中的水平对齐的方式,left,right,center
合并单元格
跨行合并
从上往下合并,所以合并时删掉下面一行对应的单元格,在上面的一行对应的单元格上添加属性rowspan=’行数’,表示合并几行。
跨列合并
从左往右合并,合并时删掉多余的单元格,在要合并的单元格上添加属性colspan=’列数’,表示合并几列。
表单
表单控件:
包含了具体的表单功能项,如单行文本输入、输入框、复选框、提交按钮、重置按钮等。
提示信息:
一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单域:
相当一个容器,用来容纳所有的表单控件和提示信息,可以通过它定义处理表达数据所用程序的url地址,以及数据提交到服务器的方法,如果不定义表单域,表单中的数据就无法传送到后台服务器。
input
<input>单标签
属性:
type: text 文本框
password 密码输入框
radio 单选按钮 添加name属性,将radio的name属性设置为同一个,实现单选;添加checked属性为“checked”,设置默认选中项
checkbox 复选框
button 普通按钮 添加value属性,设置文本框的值
submit 提交按钮 默认文本框
reset 重置按钮
image 图像形式的提交按钮
file 文件按钮
HTML5新增属性
email 输入邮箱格式
tel 输入手机号码格式
url 输入url格式
number 输入数字格式
search 搜索框
range 自由拖动滑块
time 小时分钟
date 年月日
datetime 时间
month 月年
week 星期年
maxlength:可以输入的最大字符数
HTML5新增属性
placeholder:占位符
autofocus:页面加载时input自动获取焦点
multiple:多文件上传
autocomplete:自动记录
有两个值’on’ ‘off’表示开启或者关掉自动提示
1.首先在表单中需要有提交按钮
2.input标签需要有name值
<form>
<input type="text" autocomplete name="username">
<input type="submit">
</form>
required:表示input内容不能为空
accesskey:规定激活元素(使元素获得焦点)的快捷键,采用alt+字母的形式
label标签
用于绑定一个表单元素,当点击label时,被绑定的表单元素就会获得输入焦点。for属性规定label与哪个表单元素绑定。
textarea控件
需要输入大量的数据时,可以在文本域内进行换行
<textarea></textarea>双标签
select下拉菜单
<select>
<option>北京</option>
<option>北京</option>
<option>北京</option>
</select>
selected=”selected”属性设置默认选择哪一个
fieldset标签
将表单内的元素进行分组,会在相关表单元素的周围绘制边框,<legend>标签为<fieldset>元素定义标题。
表单域
<form></form>负责包裹控件
属性:
action:表示提交到某个url地址
method:表示提交方式,post,get
name:表示表单域的名字
HTML5新标签与特性
文档类型设定
document
HTML:sublime输入html:4s
XHML:sublime输入html:xt
HTML5:sublime输入html:5
字符设定
<meta http-equlv=”charset” content=”utf-8”> HTML和XHTML中建议这样去写
<meta charset=”utf-8”> HTML5的标签中建议这样去写
常用新标签
header:定义文档的页眉,头部
nav:定义导航链接的部分
footer:定义文档或节的页脚,底部
article:定义文章
section:定义文档中的节,段落
aside:定义其所处内容之外的内容,侧边
datalist:标签定义选项列表,与input元素一起使用(实现联想输入的效果)
<input type=’text’ value=’请输入名字’ list=’star’>
<datalist>
<option>刘德华</option>
<option>刘若英</option>
<option>刘晓庆</option>
</datalist>
多媒体标签
embed
定义嵌入的内容,格式可以是Midi,Wav,AIFF,AU,MP3等,url为音频或视频文件及其路径,可以是相对路径或绝对路径。
audio
插入音频
属性:
autoplay:自动播放
controls:是否显示播放控件
loop:是否循环播放 loop=’2’ 循环两次 loop=’-1’ 表示无限循环
为了浏览器兼容,一般放置三种格式的文件(一般放置两个就够了,mp3和ogg)
<audio>
<source src=hhh.mp3’/>
<source src=hhh.ogg’/>
<source src=hhh.wav’/>
</audio>
video
插入视频
autoplay controls width height
兼容性写法和audio相同
网友评论