HTML与CSS

HTML 是用来描述网页的一种语言。

HTML 标记标签通常被称为 HTML 标签:

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
Doctype
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>

<body>
文档的内容......
</body>

</html>
Meta
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
  1. 页面编码
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
或
<meta charset="UTF-8">
  1. 刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

实例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>

<body>
<p>
对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a>
</p>

<p>您将在 5 秒内被重定向到新的地址。</p>

<p>如果超过 5 秒后您仍然看到本消息，请点击上面的链接。</p>

</body>
</html>
  1. 文档关键字 ：它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
<meta name="keywords" content="HTML,ASP,PHP,SQL">
Title
定义网页头部信息
  1. css 引入外部css文件
< link rel="stylesheet" type="text/css" href="css/common.css" >
  1. icon图标
< link rel="shortcut icon" href="image/favicon.ico">
Style
定义css样式
< style type="text/css" > 
.bb{ 
      background-color: red; 
   } 
< /style>
Script
  1. 引进外部文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
  1. 写js代码
< script type="text/javascript" > ... </script >

常用HTML标签

标签一般分为两种：块级标签和行内标签

  • 块元素
◎ address – 地址

◎ blockquote – 块引用

◎ center – 举中对齐块

◎ dir – 目录列表

◎ div – 常用块级容易，也是css layout的主要标签

◎ dl – 定义列表

◎ fieldset – form控制组

◎ form – 交互表单

◎ h1 – 大标题

◎ h2 – 副标题

◎ h3 – 3级标题

◎ h4 – 4级标题

◎ h5 – 5级标题

◎ h6 – 6级标题

◎ hr – 水平分隔线

◎ isindex – input prompt

◎ menu – 菜单列表

◎ noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容

◎ noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）

◎ ol – 排序表单

◎ p – 段落

◎ pre – 格式化文本

◎ table – 表格

◎ ul – 非排序列表
  • 内联元素
◎ a – 锚点◎ abbr – 缩写

◎ acronym – 首字

◎ b – 粗体(不推荐)

◎ bdo – bidi override

◎ big – 大字体

◎ br – 换行

◎ cite – 引用

◎ code – 计算机代码(在引用源码的时候需要)

◎ dfn – 定义字段

◎ em – 强调

◎ font – 字体设定(不推荐)

◎ i – 斜体

◎ img – 图片

◎ input – 输入框

◎ kbd – 定义键盘文

◎ label – 表格标签

◎ q – 短引用

◎ s – 中划线(不推荐)

◎ samp – 定义范例计算机代码

◎ select – 项目选择

◎ small – 小字体文本

◎ span – 常用内联容器，定义文本内区块

◎ strike – 中划线

◎ strong – 粗体强调

◎ sub – 下标

◎ sup – 上标

◎ textarea – 多行文本输入框

◎ tt – 电传文本

◎ u – 下划线

◎ var – 定义变量

各种特殊符号：

特殊符号 命名实体 特殊符号 命名实体 特殊符号 命名实体 特殊符号 命名实体
Α &Alpha; Β &Beta; ↵ &crarr; ⇐ &lArr;
Γ &Gamma; Δ &Delta; ⇑ &uArr; ⇒ &rArr;
Ε &Epsilon; Ζ &Zeta; ⇓ &dArr; ⇔ &hArr;
Η &Eta; Θ &Theta; ∀ &forall; ∂ &part;
Ι &Iota; Κ &Kappa; ∃ &exist; ∅ &empty;
Λ &Lambda; Μ &Mu; ∇ &nabla; ∈ &isin;
Ν &Nu; Ξ &Xi; ∉ &notin; ∋ &ni;
Ο &Omicron; Π &Pi; ∏ &prod; ∑ &sum;
Ρ &Rho; Σ &Sigma; − &minus; ∗ &lowast;
Τ &Tau; Υ &Upsilon; √ &radic; ∝ &prop;
Φ &Phi; Χ &Chi; ∞ &infin; ∠ &ang;
Ψ &Psi; Ω &Omega; ∧ &and; ∨ &or;
α &alpha; β &beta; ∩ &cap; ∪ &cup;
γ &gamma; δ &delta; ∫ &int; ∴ &there4;
ε &epsilon; ζ &zeta; ∼ &sim; ≅ &cong;
η &eta; θ &theta; ≈ &asymp; ≠ &ne;
ι &iota; κ &kappa; ≡ &equiv; ≤ &le;
λ &lambda; μ &mu; ≥ &ge; ⊂ &sub;
ν &nu; ξ &xi; ⊃ &sup; ⊄ &nsub;
ο &omicron; π &pi; ⊆ &sube; ⊇ &supe;
ρ &rho; ς &sigmaf; ⊕ &oplus; ⊗ &otimes;
σ &sigma; τ &tau; ⊥ &perp; ⋅ &sdot;
υ &upsilon; φ &phi; ⌈ &lceil; ⌉ &rceil;
χ &chi; ψ &psi; ⌊ &lfloor; ⌋ &rfloor;
ω &omega; ϑ &thetasym; ◊ &loz; ♠ &spades;
ϒ &upsih; ϖ &piv; ♣ &clubs; ♥ &hearts;
• &bull; … &hellip; ♦ &diams; &nbsp;
′ &prime; ″ &Prime; ¡ &iexcl; ¢ &cent;
‾ &oline; ⁄ &frasl; £ &pound; ¤ &curren;
℘ &weierp; ℑ &image; ¥ &yen; ¦ &brvbar;
ℜ &real; ™ &trade; § &sect; ¨ &uml;
ℵ &alefsym; ← &larr; © &copy; ª &ordf;
↑ &uarr; → &rarr; « &laquo; ¬ &not;
↓ &darr; ↔ &harr; &shy; ® &reg;
³ &sup3; ´ &acute; ¯ &macr; ° &deg;
µ &micro; ± &plusmn; ² &sup2;
  • HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
  • HTML 段落是通过

    标签进行定义的

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
  • HTML 链接是通过<a> 标签进行定义的
<t hf="http://www.w3school.com.cn">This is a link</t>
  • select 标签

select 元素可创建单选或多选菜单。<select&> 元素中的 <option> 标签用于定义列表中的可用选项。

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

效果：

HTML 是用来描述网页的一种语言。

HTML 标记标签通常被称为 HTML 标签:

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
Doctype
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>

<body>
文档的内容......
</body>

</html>
Meta
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
  1. 页面编码
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
或
<meta charset="UTF-8">
  1. 刷新和跳转
< meta http-equiv=“Refresh” Content=“30″>

< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />

实例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>

<body>
<p>
对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a>
</p>

<p>您将在 5 秒内被重定向到新的地址。</p>

<p>如果超过 5 秒后您仍然看到本消息，请点击上面的链接。</p>

</body>
</html>
  1. 文档关键字 ：它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
<meta name="keywords" content="HTML,ASP,PHP,SQL">
Title
定义网页头部信息
  1. css 引入外部css文件
< link rel="stylesheet" type="text/css" href="css/common.css" >
  1. icon图标
< link rel="shortcut icon" href="image/favicon.ico">
Style
定义css样式
< style type="text/css" > 
.bb{ 
      background-color: red; 
   } 
< /style>
Script
  1. 引进外部文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
  1. 写js代码
< script type="text/javascript" > ... </script >

常用HTML标签

标签一般分为两种：块级标签和行内标签

  • 块元素
◎ address – 地址

◎ blockquote – 块引用

◎ center – 举中对齐块

◎ dir – 目录列表

◎ div – 常用块级容易，也是css layout的主要标签

◎ dl – 定义列表

◎ fieldset – form控制组

◎ form – 交互表单

◎ h1 – 大标题

◎ h2 – 副标题

◎ h3 – 3级标题

◎ h4 – 4级标题

◎ h5 – 5级标题

◎ h6 – 6级标题

◎ hr – 水平分隔线

◎ isindex – input prompt

◎ menu – 菜单列表

◎ noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容

◎ noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）

◎ ol – 排序表单

◎ p – 段落

◎ pre – 格式化文本

◎ table – 表格

◎ ul – 非排序列表
  • 内联元素
◎ a – 锚点◎ abbr – 缩写

◎ acronym – 首字

◎ b – 粗体(不推荐)

◎ bdo – bidi override

◎ big – 大字体

◎ br – 换行

◎ cite – 引用

◎ code – 计算机代码(在引用源码的时候需要)

◎ dfn – 定义字段

◎ em – 强调

◎ font – 字体设定(不推荐)

◎ i – 斜体

◎ img – 图片

◎ input – 输入框

◎ kbd – 定义键盘文

◎ label – 表格标签

◎ q – 短引用

◎ s – 中划线(不推荐)

◎ samp – 定义范例计算机代码

◎ select – 项目选择

◎ small – 小字体文本

◎ span – 常用内联容器，定义文本内区块

◎ strike – 中划线

◎ strong – 粗体强调

◎ sub – 下标

◎ sup – 上标

◎ textarea – 多行文本输入框

◎ tt – 电传文本

◎ u – 下划线

◎ var – 定义变量

各种特殊符号：

特殊符号 命名实体 特殊符号 命名实体 特殊符号 命名实体 特殊符号 命名实体
Α &Alpha; Β &Beta; ↵ &crarr; ⇐ &lArr;
Γ &Gamma; Δ &Delta; ⇑ &uArr; ⇒ &rArr;
Ε &Epsilon; Ζ &Zeta; ⇓ &dArr; ⇔ &hArr;
Η &Eta; Θ &Theta; ∀ &forall; ∂ &part;
Ι &Iota; Κ &Kappa; ∃ &exist; ∅ &empty;
Λ &Lambda; Μ &Mu; ∇ &nabla; ∈ &isin;
Ν &Nu; Ξ &Xi; ∉ &notin; ∋ &ni;
Ο &Omicron; Π &Pi; ∏ &prod; ∑ &sum;
Ρ &Rho; Σ &Sigma; − &minus; ∗ &lowast;
Τ &Tau; Υ &Upsilon; √ &radic; ∝ &prop;
Φ &Phi; Χ &Chi; ∞ &infin; ∠ &ang;
Ψ &Psi; Ω &Omega; ∧ &and; ∨ &or;
α &alpha; β &beta; ∩ &cap; ∪ &cup;
γ &gamma; δ &delta; ∫ &int; ∴ &there4;
ε &epsilon; ζ &zeta; ∼ &sim; ≅ &cong;
η &eta; θ &theta; ≈ &asymp; ≠ &ne;
ι &iota; κ &kappa; ≡ &equiv; ≤ &le;
λ &lambda; μ &mu; ≥ &ge; ⊂ &sub;
ν &nu; ξ &xi; ⊃ &sup; ⊄ &nsub;
ο &omicron; π &pi; ⊆ &sube; ⊇ &supe;
ρ &rho; ς &sigmaf; ⊕ &oplus; ⊗ &otimes;
σ &sigma; τ &tau; ⊥ &perp; ⋅ &sdot;
υ &upsilon; φ &phi; ⌈ &lceil; ⌉ &rceil;
χ &chi; ψ &psi; ⌊ &lfloor; ⌋ &rfloor;
ω &omega; ϑ &thetasym; ◊ &loz; ♠ &spades;
ϒ &upsih; ϖ &piv; ♣ &clubs; ♥ &hearts;
• &bull; … &hellip; ♦ &diams; &nbsp;
′ &prime; ″ &Prime; ¡ &iexcl; ¢ &cent;
‾ &oline; ⁄ &frasl; £ &pound; ¤ &curren;
℘ &weierp; ℑ &image; ¥ &yen; ¦ &brvbar;
ℜ &real; ™ &trade; § &sect; ¨ &uml;
ℵ &alefsym; ← &larr; © &copy; ª &ordf;
↑ &uarr; → &rarr; « &laquo; ¬ &not;
↓ &darr; ↔ &harr; &shy; ® &reg;
³ &sup3; ´ &acute; ¯ &macr; ° &deg;
µ &micro; ± &plusmn; ² &sup2;
  • HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
  • HTML 段落是通过 <p> 标签进行定义的
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
  • HTML 链接是通过<a> 标签进行定义的
<t hf="http://www.w3school.com.cn">This is a link</t>
  • select 标签

select 元素可创建单选或多选菜单。<select&> 元素中的 <option> 标签用于定义列表中的可用选项。

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

效果：

posted @ 2016-08-11 12:00  yangyang1234.com  阅读(225)  评论(0)  编辑  收藏  举报