1、
Web标准
HTML——结构标准;CSS——表现标准;JS——行为标准。
浏览器内核:也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式。
渲染引擎是兼容性问题出现的根本原因。
HTML基本要素:标记、元素、内容、属性
<p id="p1">第一个web页面</p>
标记名 属性名 属性值 内容 标记名
(起始标记) (结束标记)
HTML单标记元素:不包含内容,没有结束标记,直接闭合。
eg. <meta /> <img /> <link /> <br /> <hr /> <input />
HTML全局属性:指几乎所有的HTML元素都可以添加的属性。
最常用的全局属性有:id、class、style、title。
2、HTML文档类型、注释
HTML5规范对应的文档类型声明只有一种:<!DOCTYPE html>
HTML的注释:<!-- comments --> (快捷键 Ctrl+/ )
3、HTML head及其相关标记
a.定义文档编码方式:
<meta charset="UTF-8" /> UTF-8——通用字符集
b.定义文档的title和icon小图标:
<title>......</title>
<link rel="icon" type="..." href="..." />
c.为SEO(搜索引擎优化)定义keywords和description
<meta name="keywords" content="keyword1, keyword2, keyword3" />
<meta name="description" content="how to describe the document" />
d.定义文档的样式规则(即添加css代码)
<link rel="stylesheet" type="text/css" href=" .css" />
<style type="text/css">put your css rules here</style>
e.定义文档的JavaScript代码
<script type="text/javascript" src=" .js"></script>
<script type="text/javascript">put some js code here</script>
4.HTML标题、段落和文本格式化
标题元素:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
<h1>元素在一个页面里只能出现一次。
段落元素:<p>
<br/>——换行元素;<hr/>——创建水平线
文本格式化标签:
<b>Bold text</b>
<strong>Important text</strong>
——文本加粗尽量使用<strong>,更有语义化。
<i>Italic text</i>
<em>Emphasized text</em>
——文本倾斜尽量使用<em>,更有语义化。
<small>Smaller text</small>
<del>(deleted text)</del> ——删除线标签
<ins>(inserted text)</ins> ——下划线标签
<sup>上标</sup>
<sub>下标</sub>
5.HTML图片image和超链接hyperlink
HTML图片:
<img src="url" width="" height="" alt="这里是加载失败时的替换文字" title="鼠标放到图片上显示的文字" />
要求必须添加alt属性。
alt——替换文本;title——提示文本。
相对路径与绝对路径:...
HTML超链接:
文档外链接:<a href="url" target="_blank">...</a>
target 属性规定在何处打开链接文档,取值为:
_self—— 默认值。在相同的框架中打开被链接文档。
_blank——在新窗口中打开被链接文档。
文档内导航(锚链接):
<a href="#botton-section">去底部</a>
<a href="#">回顶部</a>
<a href="#faq">常见问题</a>
文档内导航的做法:
(1)先定义一个锚点:
如<h2 id="heading2">;
(2)超链接到锚点:
如<a href="#heading2">标题2</a>;
这样,使用超链接就可实现文档内导航。
空链——不知道链接到那个页面的时候,用空链。
<a href="#">空链</a>
超链接的优化写法:
<base target="_blank" />——让所有的超链接都在新窗口打开。
注意:此语句要写在<head>元素中。
6.特殊符号
例如:
空格符——
< ——<
> ——>
tip:一个汉字占两个空格符。
7.HTML列表list和表格table
Unordered list无序列表:
<ul> 效果就是:
<li>Item1</li> .Item
<li>Item2</li> .Item
</ul>
Oredered list有序列表:
<ol> 效果就是:
<li>First<li> 1.First
<li>Second</li> 2.Second
</ol>
type=”1|a|A|i|I”,取值可以为1,a,A,i,I。
<ul>和<ol>元素可用来表示线性数据结构,如一组数据内容,导航栏的各个子项,下拉列表的各个子项等。
<li>元素中除了纯文本plain text还可以放置嵌套的<ul>或<ol>,从而表示树形数据结构。
自定义列表
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>
Table可用来表示二维数据结构。
基本的Table tags:
<table>
<caption>——表格的标题
<tr>table row——每一行
<th>table head——表头;表头的文字自动加粗水平居中对齐
<td>table data——单元格具体的数据
table>tr*5>td*3——即可生成5行3列的表格。
border属性规定表格边框的宽度,如 border="1"。
td的合并属性:
colspan="2"——合并同一行上的单元格;
rowspan="2"——合并同一列上的单元格。
扩展:其他和table相关的HTML Tags
.对多行进行分组<thead>、<tbody>、<tfoot>
.对多列进行分组<colgroup>、<col>
8.HTML的div和span
容器元素:
.<div> 块级容器 block container
.<span> 行内容器 inline container
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>
9.HTML表单Form
a.表单标签
<form> 表单标签元素为用户输入创建HTML表单,用于向服务器提交数据。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
属性解释:
action 属性规定向何处提交表单的地址(URL)(提交页面)。
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)。
Get通过地址栏提交数据,安全性差。
Post通过action属性中指定的表单处理程序来提交数据,安全性高。
name 属性:规定识别表单的名称。
如果要正确地被提交,每个输入字段必须设置一个name属性。
b.文本框
<input> 元素是最重要的表单元素。根据不同的 type 属性,有很多形态。
type属性的一些取值:
text——定义用于文本输入的单行输入字段。
password——定义密码字段;密码字段中的字符会被做掩码处理(显示为星号或圆点)
radio——定义单选按钮输入(选择多个选择之一);
*只有将 name 的值设置相同的时候,才能实现单选效果。
*checked="checked" 设置默认选中项。
checkbox——定义复选框;复选框允许用户选择零个或多个选项。
checked="checked" 设置默认选中项。
file——文件上传控件。
button——定义普通按钮;不能提交信息,配合JS使用。
submit——定义用于向表单处理程序(form-handler)提交表单的按钮(提交表单)
表单处理程序在表单的 action 属性中指定。
image——图片按钮;可实现信息提交功能。
reset——重置按钮;将信息重置到默认状态。
name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;如 name="username" "pwd" 等。
value属性定义文本框的初始值。
size属性定义文本框的宽度,单位是单个字符宽度。
maxlength属性定义最多输入的字符数。
required 属性规定必需在提交之前填写输入字段。
如果使用该属性,则字段是必填(或必选)的。
例: 用户名:<input type="text" name="username">
密 码:<input type="password" name="pwd">
性 别:<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
c.下拉列表
select 元素可创建单选或多选菜单。
<select> 元素中的 <option> 标签用于定义列表中的可用选项。
如:
<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>
属性:
name——规定下拉列表的名称。
select元素设置属性multiple="multiple"——将下拉列表设置为多选项。
option元素设置属性selected="selected"——设置默认选中项目。
<optgroup label=""></optgroup>——对下拉列表进行分组。
label=""——分组名称。
d.文本域
<textarea></textarea>元素定义一个文本区域 (text-area)(一个多行的文本输入区域)。
用户可在此文本区域中写文本。
cols——控制输入字符的长度。
rows——控制输入的行数。
e.表单信息分组
<fieldset></fieldset>——对表单信息分组。
<legend></legend>——表单信息分组名称。
标签语义化:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)。
好的语义化的网站标准就是去掉css文件之后,html结构依然很清晰。
HTML5中常见的语义化分段元素:
.<body>,<section>,<article>,<aside>,and <nav>
.每一个分段元素都可以拥有自己独立的<header>和<footer>
标签语义化注意事项:
.尽可能少的使用无语义的标签<div>和<span>。
.在语义不明显时,既可以使用<div>或者<p>时,尽量用<p>, 因为<p>在默认情况下有上下间距,对兼容特殊终端有利。
.不要使用纯样式标签,如:<b>、<font>、<u>等,改用css设置。
.需要强调的文本,strong是加粗(不要用b),em是斜体(不用i),更有语义化。
11.文档对象模型DOM
DOM模型将整个HTML文档看做是一个节点树。
这个节点树的根节点是document对象,而根元素是<html>元素。
其他几个概念:
.父节点parent、子节点child
.祖先节点ancestor、后代节点descendant
.兄弟节点sibling
。紧邻兄弟节点adjacent sibling
12.HTML实践注意
.根据应用场景和需求,建立合适的HTML标记结构,选择合适的HTML标记元素
.不要忘记文档类型声明,文档开头应有如<!doctype html>
.不要忘记字符编码声明,如<head>元素中应加入<meta charset="UTF-8" />
.不要使用HTML5不再支持的Tag,如:<center>、<font>、<basefont>、<big>等
.不要使用HTML5不再支持的Tag属性,如:table、img等标记的align属性、border属性等
13.HTML中应用CSS的三种常用的方式
a.文档内样式代码,通过在HTML的<head>元素中添加<style>子元素实现;
b.元素的行内样式,通过元素的style属性来实现,代码可复用性非常低;
c.外部样式文件,通过在HTML的<head>元素中<link>元素引入外部css文件,代码可复用性是最高的。
Web标准
HTML——结构标准;CSS——表现标准;JS——行为标准。
浏览器内核:也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式。
渲染引擎是兼容性问题出现的根本原因。
HTML基本要素:标记、元素、内容、属性
<p id="p1">第一个web页面</p>
标记名 属性名 属性值 内容 标记名
(起始标记) (结束标记)
HTML单标记元素:不包含内容,没有结束标记,直接闭合。
eg. <meta /> <img /> <link /> <br /> <hr /> <input />
HTML全局属性:指几乎所有的HTML元素都可以添加的属性。
最常用的全局属性有:id、class、style、title。
2、HTML文档类型、注释
HTML5规范对应的文档类型声明只有一种:<!DOCTYPE html>
HTML的注释:<!-- comments --> (快捷键 Ctrl+/ )
3、HTML head及其相关标记
a.定义文档编码方式:
<meta charset="UTF-8" /> UTF-8——通用字符集
b.定义文档的title和icon小图标:
<title>......</title>
<link rel="icon" type="..." href="..." />
c.为SEO(搜索引擎优化)定义keywords和description
<meta name="keywords" content="keyword1, keyword2, keyword3" />
<meta name="description" content="how to describe the document" />
d.定义文档的样式规则(即添加css代码)
<link rel="stylesheet" type="text/css" href=" .css" />
<style type="text/css">put your css rules here</style>
e.定义文档的JavaScript代码
<script type="text/javascript" src=" .js"></script>
<script type="text/javascript">put some js code here</script>
4.HTML标题、段落和文本格式化
标题元素:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
<h1>元素在一个页面里只能出现一次。
段落元素:<p>
<br/>——换行元素;<hr/>——创建水平线
文本格式化标签:
<b>Bold text</b>
<strong>Important text</strong>
——文本加粗尽量使用<strong>,更有语义化。
<i>Italic text</i>
<em>Emphasized text</em>
——文本倾斜尽量使用<em>,更有语义化。
<small>Smaller text</small>
<del>(deleted text)</del> ——删除线标签
<ins>(inserted text)</ins> ——下划线标签
<sup>上标</sup>
<sub>下标</sub>
5.HTML图片image和超链接hyperlink
HTML图片:
<img src="url" width="" height="" alt="这里是加载失败时的替换文字" title="鼠标放到图片上显示的文字" />
要求必须添加alt属性。
alt——替换文本;title——提示文本。
相对路径与绝对路径:...
HTML超链接:
文档外链接:<a href="url" target="_blank">...</a>
target 属性规定在何处打开链接文档,取值为:
_self—— 默认值。在相同的框架中打开被链接文档。
_blank——在新窗口中打开被链接文档。
文档内导航(锚链接):
<a href="#botton-section">去底部</a>
<a href="#">回顶部</a>
<a href="#faq">常见问题</a>
文档内导航的做法:
(1)先定义一个锚点:
如<h2 id="heading2">;
(2)超链接到锚点:
如<a href="#heading2">标题2</a>;
这样,使用超链接就可实现文档内导航。
空链——不知道链接到那个页面的时候,用空链。
<a href="#">空链</a>
超链接的优化写法:
<base target="_blank" />——让所有的超链接都在新窗口打开。
注意:此语句要写在<head>元素中。
6.特殊符号
例如:
空格符——
< ——<
> ——>
tip:一个汉字占两个空格符。
7.HTML列表list和表格table
Unordered list无序列表:
<ul> 效果就是:
<li>Item1</li> .Item
<li>Item2</li> .Item
</ul>
Oredered list有序列表:
<ol> 效果就是:
<li>First<li> 1.First
<li>Second</li> 2.Second
</ol>
type=”1|a|A|i|I”,取值可以为1,a,A,i,I。
<ul>和<ol>元素可用来表示线性数据结构,如一组数据内容,导航栏的各个子项,下拉列表的各个子项等。
<li>元素中除了纯文本plain text还可以放置嵌套的<ul>或<ol>,从而表示树形数据结构。
自定义列表
<dl>
<dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>
Table可用来表示二维数据结构。
基本的Table tags:
<table>
<caption>——表格的标题
<tr>table row——每一行
<th>table head——表头;表头的文字自动加粗水平居中对齐
<td>table data——单元格具体的数据
table>tr*5>td*3——即可生成5行3列的表格。
border属性规定表格边框的宽度,如 border="1"。
td的合并属性:
colspan="2"——合并同一行上的单元格;
rowspan="2"——合并同一列上的单元格。
扩展:其他和table相关的HTML Tags
.对多行进行分组<thead>、<tbody>、<tfoot>
.对多列进行分组<colgroup>、<col>
8.HTML的div和span
容器元素:
.<div> 块级容器 block container
.<span> 行内容器 inline container
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>
9.HTML表单Form
a.表单标签
<form> 表单标签元素为用户输入创建HTML表单,用于向服务器提交数据。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
属性解释:
action 属性规定向何处提交表单的地址(URL)(提交页面)。
method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST)。
Get通过地址栏提交数据,安全性差。
Post通过action属性中指定的表单处理程序来提交数据,安全性高。
name 属性:规定识别表单的名称。
如果要正确地被提交,每个输入字段必须设置一个name属性。
b.文本框
<input> 元素是最重要的表单元素。根据不同的 type 属性,有很多形态。
type属性的一些取值:
text——定义用于文本输入的单行输入字段。
password——定义密码字段;密码字段中的字符会被做掩码处理(显示为星号或圆点)
radio——定义单选按钮输入(选择多个选择之一);
*只有将 name 的值设置相同的时候,才能实现单选效果。
*checked="checked" 设置默认选中项。
checkbox——定义复选框;复选框允许用户选择零个或多个选项。
checked="checked" 设置默认选中项。
file——文件上传控件。
button——定义普通按钮;不能提交信息,配合JS使用。
submit——定义用于向表单处理程序(form-handler)提交表单的按钮(提交表单)
表单处理程序在表单的 action 属性中指定。
image——图片按钮;可实现信息提交功能。
reset——重置按钮;将信息重置到默认状态。
name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;如 name="username" "pwd" 等。
value属性定义文本框的初始值。
size属性定义文本框的宽度,单位是单个字符宽度。
maxlength属性定义最多输入的字符数。
required 属性规定必需在提交之前填写输入字段。
如果使用该属性,则字段是必填(或必选)的。
例: 用户名:<input type="text" name="username">
密 码:<input type="password" name="pwd">
性 别:<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女
c.下拉列表
select 元素可创建单选或多选菜单。
<select> 元素中的 <option> 标签用于定义列表中的可用选项。
如:
<select>
<option>下拉列表选项</option>
<option>下拉列表选项</option>
</select>
属性:
name——规定下拉列表的名称。
select元素设置属性multiple="multiple"——将下拉列表设置为多选项。
option元素设置属性selected="selected"——设置默认选中项目。
<optgroup label=""></optgroup>——对下拉列表进行分组。
label=""——分组名称。
d.文本域
<textarea></textarea>元素定义一个文本区域 (text-area)(一个多行的文本输入区域)。
用户可在此文本区域中写文本。
cols——控制输入字符的长度。
rows——控制输入的行数。
e.表单信息分组
<fieldset></fieldset>——对表单信息分组。
<legend></legend>——表单信息分组名称。
f.html 5 补充表单控件
如网址、日期、时间、邮件、数字、滑块控件。
type="url""date""time""email""number""range"
g.<label> 标签的 for 属性
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。
如果在 label 元素内点击文本,就会触发对应的表单控件。
就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性规定 label 与哪个表单元素绑定。
for 属性应当与相关元素的 id 属性相同。
例如:<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" /><br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
标签语义化:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)。
好的语义化的网站标准就是去掉css文件之后,html结构依然很清晰。
HTML5中常见的语义化分段元素:
.<body>,<section>,<article>,<aside>,and <nav>
.每一个分段元素都可以拥有自己独立的<header>和<footer>
标签语义化注意事项:
.尽可能少的使用无语义的标签<div>和<span>。
.在语义不明显时,既可以使用<div>或者<p>时,尽量用<p>, 因为<p>在默认情况下有上下间距,对兼容特殊终端有利。
.不要使用纯样式标签,如:<b>、<font>、<u>等,改用css设置。
.需要强调的文本,strong是加粗(不要用b),em是斜体(不用i),更有语义化。
11.文档对象模型DOM
DOM模型将整个HTML文档看做是一个节点树。
这个节点树的根节点是document对象,而根元素是<html>元素。
其他几个概念:
.父节点parent、子节点child
.祖先节点ancestor、后代节点descendant
.兄弟节点sibling
。紧邻兄弟节点adjacent sibling
12.HTML实践注意
.根据应用场景和需求,建立合适的HTML标记结构,选择合适的HTML标记元素
.不要忘记文档类型声明,文档开头应有如<!doctype html>
.不要忘记字符编码声明,如<head>元素中应加入<meta charset="UTF-8" />
.不要使用HTML5不再支持的Tag,如:<center>、<font>、<basefont>、<big>等
.不要使用HTML5不再支持的Tag属性,如:table、img等标记的align属性、border属性等
13.HTML中应用CSS的三种常用的方式
a.文档内样式代码,通过在HTML的<head>元素中添加<style>子元素实现;
b.元素的行内样式,通过元素的style属性来实现,代码可复用性非常低;
c.外部样式文件,通过在HTML的<head>元素中<link>元素引入外部css文件,代码可复用性是最高的。
<link rel="stylesheet" type="text/css" href="***.css" />