网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。
浏览器的内核
负责读取网页内容, 整理讯息, 计算网页的显示方式并显示页面。
浏览器 | 内核 | 备注 |
---|---|---|
IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
firefox | Gecko | 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了)。苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。 |
chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
Opera | Presto | Presto(已经废弃) 是挪威产浏览器 opera 的 "前任" 内核,为何说是 "前任",因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。 现在用blink内核。 |
注意
移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。
iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的
Web标准
由W3C组织和其他标准化组织制定的一系列标准的集合。
Web标准的好处:
1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、更容易被搜寻引擎搜索
4、降低网站流量费用
5、使网站更易于维护
6、提高页面浏览速度
Web标准构成
HTML指的是超文本标记语言(Hyper Text Markup Lanugage)是用来描述网页的一种语言。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
标签名 | 定义 | 说明 |
---|---|---|
<html></html> |
HTML标签 | 页面中最大的标签,根标签 |
<head></head> |
文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<titile></title> |
文档的标题 | 网页标题 |
<body></body> |
文档的主体 | 元素包含文档的所有内容,页面内容 基本都是放到body里面的 |
常规元素(双标签)
<标签名> 内容 </标签名>
空元素(单标签)
<标签名/>
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
标题标签 h
标题标签语义: 作为标题使用, 并且依据重要性递减
基本语法
<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>
段落标签 p
作用语义: 把文档分割为若干段落
<p> 文本内容 </p>
水平线标签 hr
作用语义: 默认样式的水平线
<hr />
table 标签
table 表格基本语法*
<table>
<tr>
<th>表头内容</th>
</tr>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
<tr>
代表一行 内只能嵌套<td>
<td>
代表单元格标签可以容纳所有的元素<th>
表头元素表格属性
属性名 | 含义 | 常用属性值 |
---|---|---|
border | 设置表格的边框 | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为2px) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1px) |
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
alian | 设置表格再网页钟的水平对齐方式 | left, center,right |
表格标题 caption
定义和用法
<table>
<caption>表格标题</caption>
</table>
合并单元格
跨行合并: rowspan="合并单元格的个数"
跨列合并: colspan="合并单元格的个数"
合并的顺序按照 先上 后下 先左 后右 的顺序
例如: <td colspan = "3"> </td>
总结表格
标签名 | 定义 | 说明 |
---|---|---|
<table></table> |
表格标签 | 就是一个四方的盒子 |
<tr></tr> |
表格行标签 | 行标签要再table标签内部才有意义 |
<td></td> |
单元格标签 | 单元格标签是个容器级元素,可以放任何东西 |
<th></th> |
表头单元格标签 | 它还是一个单元格,但是里面的文字会居中且加粗 |
<caption></caption> |
表格标题标签 | 表格的标题,跟着表格一起走,和表格居中对齐 |
clospan 和 rowspan |
合并属性 | 用来合并单元格的 |
列表标签
容器里面装载着结构, 样式一致的文字或图标的一种形式, 叫列表
无序列表 <ul>
无序列表的各个列表项之间没有顺序级别之分, 是并列的。其基本语法格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
······
</ul>
注意:
<ul></ul>
中只能嵌套<li></li>
, 直接再<ul></ul>
标签中输入其他标签或者文字得做法是不被允许.<li>
与</li>
之间相当于一个容器,可以容纳所有元素。
有序列表 <ol>
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
······
</ol>
自定义列表<dl>
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
例如:
页面底下的帮助页面
列表总结
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> |
无序标签 | 里面只能包含li 没有顺序,布局中最常用的列表 |
<ol></ol> |
有序标签 | 里面只能包含li 有顺序, 使用情况较少 |
<dl></dl> |
自定义列表 | dt 和 dd, 创建网页下帮助信息 |
跟用户进行交互,收集用户资料,此时也需要表单。包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
input 控件
属性 | 属性值 | 描述 |
---|---|---|
type | text | 单行文本输入框 |
password | 密码输入框 | |
radio | 单选按钮 | |
checkbox | 复选框 | |
button | 普通按钮 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图像形式的提交按钮 | |
file | 文件域 | |
name | 由用户自定义 | 控件向后台提交的名称 |
value | 由用户自定义 | input空间中的默认文本值 |
size | 正整数 | input空间在页面中的显示宽度 |
checked | checked | 定义在选择空间默认被选中的项 |
maxlength | 正整数 | 空间允许输入的最多字符数 |
type属性
用户名:<input type="text" />
密 码:<input type="password" />
value属性
value 默认的文本值, 默认写入的文字。
用户名:<input type="text" name="username" value="请输入用户名">
name属性
name表单的名字, 这样,后台可以通过这个name属性找到这个表单。 页面中的表单很多,name主要作用就是用于区别不同的表单。
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
checked属性
表示默认选中状态。 较常见于 单选按钮和复选按钮。
下面表示男被默认选中
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
label标签
label标签主要目的是为了提高用户体验。 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
<label> 用户名: <input type="radio" name="usename" value="请输入用户名"> </label>
适合单个表单选择
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
textarea空间(文本域)
通过textarea控件可以轻松地创建多行文本输入框.
cols="每行中的字符数" rows="显示的行数"
<textarea >
文本内容
</textarea>
表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
---|---|---|---|---|
input type="text" | 文本框 | 只能显示一行文本 | 单标签,通过value显示默认值 | 用户名、昵称、密码等 |
textarea | 文本域 | 可以显示多行文本 | 双标签,默认值写到标签中间 | 留言板 |
select 下拉列表
有多个选项让用户选择, 为了节约空间,我们可以使用select空间定义下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<select>
中至少包含一对 optionform表单域
在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
联系客服