HTML
1.常见浏览器内核
浏览器内核,英文叫做:Rendering Engine,中文翻译很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核。
浏览器内核包括两部分,渲染引擎和js引擎。
-
渲染引擎负责读取网页内容,整理讯息,计算网页的显示方式并显示页面。
-
js引擎是解析执行js,获取网页的动态效果。 后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。
现在的主流行浏览器
:
浏览器 | 内核 | 备注 |
---|---|---|
IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
firefox | Gecko | 这几年已经没落了,打开速度慢、升级频繁、flash |
Safari | webkit | 苹果浏览器内核 |
chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。 大部分国产浏览器最新版都是采用Blink内核进行的二次开发。 |
Opera | blink | 现在跟随chrome用blink内核。 |
移动端的浏览器内核
:
移动端的浏览器内核主要说的是系统内置浏览器的内核。
Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。
iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的。
2.web标准
web标准有三层结构,分别是:
-
结构(html)
-
样式、表现(css)
-
行为(javascript)
遵循web标准的优点:
- 页面更标准、更统一
- 让Web的发展前景更广阔
- 内容能被更广泛的设备访问
- 更容易被搜索引擎搜索
- 降低网站流量费用
- 使网站更易于维护
- 提高页面浏览速度
3.HTML介绍
HTML
:
HTML 指的是超文本标记语言 (Hyper Text Markup Language),是用来描述网页的一种语言。
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
网页是由网页元素组成的,这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户了。
所谓超文本,有2层含义:
- html可以加入图片、声音、动画、多媒体等内容(超越文本限制 )
- html可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本 )
3.1.文档类型<!DOCTYPE>
<!DOCTYPE html>
<html lang="en">
<!--就是告诉浏览器按照HTML5 规范解析页面-->
文档类型声明标签位于文档中最前面的位置,处于 <html>
标签之前。
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范解析页面。
注意:
- HTML文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明,
3.2.页面语言lang
<html lang="en">
<!--指定html 语言种类-->
最常见的2个语言:
- en定义语言为英语
- zh-CN定义语言为中文
<html lang="zh-CN">
<!--指定该html标签内容 所用的语言为中文-->
考虑到浏览器和操作系统的兼容性,目前仍然使用 zh-CN 属性值
它可以告诉浏览器,搜索引擎,一些处理Html的程序,对页面语言内容来做一些对应的处理或者事情:
- 根据lang属性来设定不同语言的css样式,或者字体
- 告诉搜索引擎做精确的识别
- 让语法检查程序做语言识别
- 帮助翻译工具做识别
- 帮助网页阅读程序做识别
3.3. 字符集charset
<meta charset="UTF-8" />
字符集(Character set)是多个字符的集合。
计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。
- gb2312 简单中文,包括6763个汉字,GUO BIAO。
- BIG5 繁体中文,港澳台等用。
- GBK 包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312。
- UTF-8 基本包含全世界所有国家需要用到的字符。
注意:
- 字符集设置非常关键, 是必须要写的代码,否则可能引起乱码的情况。
- 一般情况下统一使用 “UTF-8” 编码, 请尽量统一写成标准的 “UTF-8”,不要写成 “utf-8” 或 “utf8” 或 “UTF8”。
3.4. HTML标签的语义化
根据标签的语义,在合适的地方给一个最为合理的标签,让结构更清晰。
- 方便代码的阅读和维护。
- 同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容 。
- 使用语义化标签会具有更好地搜索引擎优化。
4.排版标签
排版标签主要和css搭配使用,显示网页的结构,是网页布局最常用的标签。
4.1.标题标签h
语义:作为标题使用,并且依据标题重要性递减。
<h1> 标题文本 </h1> <!--1级标题-->
<h2> 标题文本 </h2> <!--2级标题-->
<h3> 标题文本 </h3> <!--3级标题-->
<h4> 标题文本 </h4> <!--4级标题-->
<h5> 标题文本 </h5> <!--5级标题-->
<h6> 标题文本 </h6> <!--6级标题-->
- 加了标题的文字会变的加粗,字号也会依次变大。
- 一行只能放一个标题。
4.2.段落标签p
语义:可以把 HTML 文档分割为若干段落。
在网页中要把文字有条理地显示出来,离不开段落标签。
<p> 文本内容 </p>
p标签是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。
4.3.水平线标签hr
在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。
下面就是创建横跨网页水平线的标签。 ```html
是单标签 ```
4.4.换行标签br
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。
如果希望某段文本强制换行显示,就需要使用换行标签。
<br /> 是单标签
4.5.div 和 span标签
div和span标签是没有实际语义的,是我们网页布局主要的2个盒子 。
语法格式:
<div> 这是头部 </div>
<span>今日价格</span>
div和span标签都是盒子,是用来装网页元素的。
- div标签是用来布局的,是块级元素,一行只能放一个div。
- span标签是用来布局的,是行内元素,一行可以放多个span。
5.常用标签
5.1.文本格式化标签
在网页中,有时需要为文字设置粗体、斜体或下划线效果,需要用文本格式化标签,使文字以特殊的方式显示。
标签 显示效果
<b></b>和<strong></strong> 文字以粗体方式显示(XHTML推荐使用strong)
<i></i>和<em></em> 文字以斜体方式显示(XHTML推荐使用em)
<s></s>和<del></del> 文字以加删除线方式显示(XHTML推荐使用del)
<ins></ins>和<u></u> 文字以加下划线方式显示(XHTML推荐使用u)
区别:
b 只是加粗。
strong 除了可以加粗还有强调的意思,语义更强烈。
5.2.图像标签img
<img src="图像URL" alt='图片' title='图片'/>
src属性用于指定图像文件的路径和文件名,是img标签的必需属性。
<img/>标签属性
:
属性 | 属性值 | 描述 |
---|---|---|
src | URL | 图像的路径 |
alt | 文本 | 图像不能显示时的替换文本 |
title | 文本 | 鼠标悬停时显示的内容 |
width | 像素(XHTML不支持%页面百分比) | 设置图像的宽度 |
height | 像素(XHTML不支持%页面百分比) | 设置图像的高度 |
border | 数字 | 设置图像边框的宽度 |
注意:
- 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
- 采取键值对的格式, key=“value” 的格式。
5.3.超链接标签a
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性),当为标签应用href属性时,它就具有了超链接的功能。 |
target | 用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,__blank为在新窗口中打开方式。 |
注意:
- 外部链接,需要添加 http:// 。
- 内部链接,直接链接内部页面名称即可,比如 < a href=“index.html”> 首页 。
- 在不确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
- 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
5.4. 注释标签
<!-- 注释语句 --> 快捷键是: ctrl + / 或者 ctrl +shift + /
注释是给人看的,目的是为了更好的解释这部分代码是干啥的, 程序是不执行这个代码的。
5.5. base 标签
<base target="_blank" />
- base 可以设置整体链接的打开状态 。
- base 写到
<head></head>
之间。 - 默认给所有的连接都添加 target="_blank"属性。
5.6. 预格式化文本标签pre
<pre>
标签可定义预格式化的文本。
被包围在 <pre>
标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
所谓的预格式化文本就是 ,按照我们预先写好的文字格式来显示页面, 保留空格和换行等。
6.列表标签
6.1. 无序列表 ul
无序列表的各个列表项之间没有顺序级别之分,是并列的,是布局中最常用的列表。
<ul>
<li>列表项1</li>
<li>列表项2</li>
......
</ul>
1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字错误的。
2. <li>与</li>之间相当于一个容器,可以容纳所有元素,包括ul。
3. 无序列表会带有自己样式属性,清除默认样式:list-style: none
6.2. 有序列表 ol
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,使用情况较少。
<ol>
<li>列表项1</li>
<li>列表项2</li>
......
</ol>
去掉列表默认的样式
:
无序和有序列表前面默认的列表样式,在不同浏览器显示效果不一样,而且也比较难看。
li { list-style: none; }
6.3. 自定义列表dl
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
<dl>
<dt>名词</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
...
</dl>
7.路径
7.1. 相对路径
以引用文件相对于网页所在位置为参考基础,而建立出的目录路径。
路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 输入同级文件的名称即可,如 src=‘baidu.gif’ | |
下一级路径 | “/” | 文件位于HTML文件同级文件夹下 ,如 src=“images/baidu.gif” 。 |
上一级路径 | “…/” | 在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推, 如 src="…/baidu.gif" |
相对路径,是从代码所在的这个文件出发, 去寻找的目标文件的。
而所说的 上一级 下一级 同一级 简单说,就是 图片 位于 HTML 页面的位置。
7.2. 绝对路径
绝对路径是以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。
示例: “D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.itcast.cn/images/logo.gif”。
8. 锚点定位
通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:
1. 使用相应的id名标注跳转目标的位置。 (找目标)
<h3 id="two">目标</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的)
<a href="#two">内容</a>
9. 标签属性
使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。
语法格式:
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
10. 特殊字符
一些特殊的符号,我们在html 里面很难或者不方便直接使用, 我们此时可以使用下面的替代代码。
特殊字符 | 描述 | 字符的代码 |
---|---|---|
空格符 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
* | 乘号 | × |
/ | 除号 | ÷ |
11. 表格table
表格作用:常见显示、展示表格式数据。可以让数据显示的非常规整,可读性非常好。
语法格式
:
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
- table用于定义一个表格标签。表格提供了HTML 中定义表格式数据的方法。
- tr标签用于定义表格中的行,必须嵌套在 table标签中,tr指表格行(table row)。tr要在table标签内部才有意义。
- td标签用于定义表格中的单元格,必须嵌套在
<tr></tr>
标签中。td是个容器级元素,可以放任何东西。 - 字母 td 指表格数据(table data),即数据单元格的内容。
- 表格的主要目的是用来显示特殊数据的。
- 一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成,没有列的标签。
<tr></tr>
中只能嵌套<td></td>
类的单元格。<td></td>
标签,他就像一个容器,可以容纳所有的元素。
11.1. 表格属性
属性名 | 含义 | 常用属性值 |
---|---|---|
border | 设置表格的边框(默认border=‘0’,无边框) | 像素值 |
cellspacing | 设置单元格与单元格边框之间的空白间距 | 像素值(默认为2像素) |
cellpadding | 设置单元格内容与单元格边框之间的空白间距 | 像素值(默认为1像素) |
width | 设置表格的宽度 | 像素值 |
height | 设置表格的高度 | 像素值 |
align | 设置表格在网页中的水平对齐方式 | left、center、right |
我们经常有个说法,是三参为0 ,这三个参数 border cellpadding cellspacing 为 0。
11.2. 表头单元格标签th
作用
:
一般表头单元格位于表格的第一行或第一列,并且文本加粗居中。
语法
:
只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
th也是一个单元格,只不过和普通的 td单元格不一样,它会让自己里面的文字居中且加粗。
11.3. 表格标题caption
<table>
<caption>表格标题</caption>
</table>
- caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上。
- caption 标签必须紧随 table 标签之后。
- 这个标签只存在表格里面才有意义。
11.4. 合并单元格
clospan和rowspan合并属性,用来合并单元格的。
合并单元格的2种方式
- 跨行合并:rowspan=“合并单元格的个数” 。
- 跨列合并: colspan=“合并单元格的个数”。
合并单元格顺序
合并的顺序按照先上后下、先左后右 的顺序 。
合并单元格三步曲
-
先确定是跨行还是跨列合并。
-
根据先上后下、先左后右的原则找到目标单元格,然后写上合并方式和要合并的单元格数量
比如 :
<td colspan="3"> </td>
-
删除多余的单元格
11.5. 表格划分结构
对于比较复杂的表格,表格的结构就相对复杂,所以又将表格分割成三个部分:题头、正文和脚注。
这三部分分别用:thead,tbody,tfoot来标注,这样可以更好的分清表格结构。
注意:
<thead></thead>
:用于定义表格的头部。用来放标题之类的东西。<thead>
内部必须拥有<tr>
标签!<tbody></tbody>
:用于定义表格的主体。放数据本体 。<tfoot></tfoot>
放表格的脚注之类。- 以上标签都是放到table标签中。
12. 表单标签
作用:表单目的是为了收集用户信息。
在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。
表单控件
:
包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮 、下拉列表等。
提示信息
:
一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单域
:
相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
12.1.form表单域
在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
12.2.input 控件
<input type="属性值" value="你好"/>
type 属性
:
type 属性通过改变属性值,可以决定属于那种input表单。
比如 type = ‘text’ 就表示文本框,可以做 用户名, 昵称等。
比如 type = ‘password’ 就是表示密码框,用户输入的内容是不可见的。
用户名: <input type="text" />
密 码:<input type="password" />
type属性设置不同的属性值用来指定不同的控件类型
属性 | 属性值 | 描述 |
---|---|---|
type | text | 单行文本输入框 |
type | password | 密码输入框 |
type | radio | 单选按钮 |
type | checkbox | 复选框 |
type | button | 普通按钮 |
type | submit | 提交按钮 |
type | reset | 重置按钮 |
type | image | 图像形式的提交按钮 |
type | file | 文件域 |
value属性
:
用户名:<input type="text" name="username" value="请输入用户名">
value 属性是input控件中的默认文本值。
name属性
:
用户名:<input type="text" name="username" />
name是input控件的名字, 后台可以通过这个name属性找到这个控件。
页面中的input控件很多,name主要作用就是用于区别不同的控件。
name属性的值,是我们自己定义的。
- radio 如果是一组,我们必须给他们命名相同的名字 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="女" />女
input控件的其他属性:
属性 | 属性值 | 描述 |
---|---|---|
size | 正整数 | input控件在页面中的显示宽度 |
maxlength | 正整数 | 控件允许输入的最多字符数 |
12.3. label标签
label标签主要目的是为了提高用户体验。 为用户提供最优秀的服务。
label标签为 input 元素定义标注(标签)。
作用: 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
绑定元素
:
- 用label直接包括input表单。
<label> 用户名: <input type="radio" name="usename" value="请输入用户名"> </label>
适合单个表单选择
- for 属性规定 label 与哪个表单元素绑定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面。
12.4. textarea控件(文本域)
<textarea >
文本内容
</textarea>
作用
:
通过textarea控件可以轻松地创建多行文本输入框。
属性
:
cols=“每行中的字符数”
rows=“显示的行数”
文本框和文本域区别
:
表单 | 名称 | 区别 | 默认值显示 | 用于场景 |
---|---|---|---|---|
input type=“text” | 文本框 | 只能显示一行文本 | 单标签,通过value显示默认值 | 用户名、昵称、密码等 |
textarea | 文本域 | 可以显示多行文本 | 双标签,默认值写到标签中间 | 留言板 |
12.5. select下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
...
</select>
- <select> 中至少包含一对 option 。
- 在option 中定义selected =" selected "时,当前项即为默认选中项。