不熟悉的内容备注:
1. 浏览器内核
2. 文本标签文本标签
3. 超链接标签的target
属性
4. 锚点
5.base
标签
6. 表格的结构
7. 表格的属性
浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
JS 引擎 则是解析 Javascript 语言,执行 javascript语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有10多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。
Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。
Gecko(firefox)
Gecko(Firefox 内核): Mozilla FireFox(火狐浏览器) 采用该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。 可惜这几年已经没落了, 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
webkit(Safari)
Safari 是苹果公司开发的浏览器,所用浏览器内核的名称是大名鼎鼎的 WebKit。
现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了),苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。
代表浏览器:傲游浏览器3、 Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器,
Chromium/Blink(chrome)
在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。
大部分国产浏览器最新版都采用Blink内核。二次开发
Presto(Opera)
Presto(已经废弃) 是挪威产浏览器 opera 的 “前任” 内核,为何说是 “前任”,因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。
移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。
iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的
标签位于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范,必需在开头处使用标签为所有的XHTML文档指定XHTML版本和类型,只有这样浏览器才能按指定的文档类型进行解析。
<meta charset="UTF-8">
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312:
标签 | 含义 |
---|---|
|
HTML文档头部信息 |
|
HTML文档标题 |
|
文本标题 |
|
段落 |
|
水平线horizontal |
|
换行符 |
|
块状布局 |
|
跨度布局 |
注意: h1 标签因为重要,尽量少用,不要动不动就向你扔了一个h1。 一般h1 都是给logo使用,或者页面中最重要标题信息。
标签 | 显示效果 |
---|---|
|
文本以粗体方式显示 |
|
文本以斜体方式显示 |
|
文本以 |
|
文本以下划线方式显示 |
b i s u
只有使用 没有 强调的意思 ,但网页中常用它们做一些小点缀strong em del ins
语义更强烈<img src="" alt="" title="" />
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图像路径 |
alt | 文本 | 图像无法展示时显示的文本 |
title | 文本 | 鼠标悬停时的内容 |
width | 像素 | 图象宽度 |
height | 像素 | 图象高度 |
border | 数字 | 图像边框宽度 |
width
和height
只要设置一个就行了,图片会按比例缩放;都设置容易让图像变形
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像a>
href
:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用target
:用于指定链接页面的打开方式,其取值有_self
和_blank
两种,其中_self
为默认值,_blank为在新窗口中打开方式。http://
,比如: http:// www.baidu.com
#
”(即href="#"),表示该链接暂时为一个空链接。
<a href="#two">
<h3 id="two">第2集h3>
base 可以设置整体链接的打开状态
<head>
<base target="_blank" />
head>
D:\web\img\logo.gif
http://www.sina.com.cn/images/logo.gif
<ul>
<li>列表项1li>
<li>列表项2li>
<li>列表项3li>
......
ul>
中只能嵌套
,直接在
标签中输入其他标签或者文字的做法是不被允许的。
与
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
<dl>
<dt>名词1dt>
<dd>名词1解释1dd>
<dd>名词1解释2dd>
...
<dt>名词2dt>
<dd>名词2解释1dd>
<dd>名词2解释2dd>
...
dl>
结构:
<table>
<caption>表格标题caption>
<thead>
<tr>
<th>列名th>
<th>列名th>
tr>
thead>
<tbody>
<tr>
<td>数据td>
<td>数据td>
tr>
<tr>
<td>数据td>
<td>数据td>
tr>
tbody>
table>
table
标签本身只是一个表格的框,几行几列是由tr和td决定的tr
必须在table
标签中,td
必须在tr
中,tr中只能包含td属性名 | 含义 | 常用值 |
---|---|---|
border | 表格边框 | 像素 |
cellspacing | 单元格与单元格/表格边框之间的距离,类似于单元格的margin | 像素(默认为2像素) |
cellpadding | 单元格内容和单元格的距离,类似于单元格的padding | 像素(默认为1像素) |
width | 表格宽度 | 像素 |
height | 表格高度 | 像素 |
align | 表格在页面中的水平对齐方式 | left, center, right |
tr
和td
也可以设置align
,作用是内容水平局中;它们也有宽高
td
或者th
设置属性:
表单通常由 表单控件(也称为表单元素)、提示信息 和表单域3个部分构成。
<input type="text" />
<input type="password" maxlength="12"/>
<input type="radio" checked=“checked ” name="male" />
<input type="checkbox" checked=“checked ”name="hobby" />
<input type="button" name="btn1" value="按钮" />
<input type="submit" name="btn1" value="提交" />
<input type="reset" name="btn1" value="重置" />
<input type="image" src="PATH/TO/IMAGE" />
<input type="file" />
<label for="male">Malelabel>
<input type="radio" name="sex" id="male" value="male">
作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
<textarea cols="每行中的字符数" rows="显示的行数" style="resize:none;">
文本内容
textarea>
<select name="" >
<option value="1" selected="selected">选项1option>
<option value="2">选项2option>
<option value="3">选项3option>
...
select>
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
form>
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/