HTML与CSS-CSDN博客

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-information），比如针对搜索引擎和更新频度的描述和关键词。

页面编码

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
或
<meta charset="UTF-8">

刷新和跳转

< 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>

文档关键字：它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

<meta name="keywords" content="HTML,ASP,PHP,SQL">

Title

定义网页头部信息

Link

css 引入外部css文件

< link rel="stylesheet" type="text/css" href="css/common.css" >

icon图标

< link rel="shortcut icon" href="image/favicon.ico">

Style

定义css样式

< style type="text/css" > 
.bb{ 
      background-color: red; 
   } 
< /style>

Script

引进外部文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

写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 – 定义变量

各种特殊符号：

特殊符号	命名实体	特殊符号	命名实体	特殊符号	命名实体	特殊符号	命名实体
Α	`Α`	Β	`Β`	↵	`&crarr;`	⇐	`⇐`
Γ	`Γ`	Δ	`Δ`	⇑	`&uArr;`	⇒	`⇒`
Ε	`Ε`	Ζ	`Ζ`	⇓	`&dArr;`	⇔	`⇔`
Η	`Η`	Θ	`Θ`	∀	`∀`	∂	`∂`
Ι	`Ι`	Κ	`Κ`	∃	`∃`	∅	`∅`
Λ	`Λ`	Μ	`Μ`	∇	`∇`	∈	`∈`
Ν	`Ν`	Ξ	`Ξ`	∉	`∉`	∋	`&ni;`
Ο	`Ο`	Π	`Π`	∏	`∏`	∑	`∑`
Ρ	`Ρ`	Σ	`Σ`	−	`−`	∗	`&lowast;`
Τ	`Τ`	Υ	`Υ`	√	`√`	∝	`&prop;`
Φ	`Φ`	Χ	`Χ`	∞	`∞`	∠	`&ang;`
Ψ	`Ψ`	Ω	`Ω`	∧	`&and;`	∨	`&or;`
α	`α`	β	`β`	∩	`∩`	∪	`∪`
γ	`γ`	δ	`δ`	∫	`∫`	∴	`&there4;`
ε	`ε`	ζ	`ζ`	∼	`&sim;`	≅	`&cong;`
η	`η`	θ	`θ`	≈	`≈`	≠	`≠`
ι	`ι`	κ	`κ`	≡	`&equiv;`	≤	`≤`
λ	`λ`	μ	`μ`	≥	`≥`	⊂	`⊂`
ν	`ν`	ξ	`ξ`	⊃	`⊃`	⊄	`&nsub;`
ο	`ο`	π	`π`	⊆	`&sube;`	⊇	`&supe;`
ρ	`ρ`	ς	`&sigmaf;`	⊕	`&oplus;`	⊗	`&otimes;`
σ	`σ`	τ	`τ`	⊥	`&perp;`	⋅	`⋅`
υ	`υ`	φ	`φ`	⌈	`&lceil;`	⌉	`&rceil;`
χ	`χ`	ψ	`ψ`	⌊	`&lfloor;`	⌋	`&rfloor;`
ω	`ω`	ϑ	`&thetasym;`	◊	`&loz;`	♠	`&spades;`
ϒ	`&upsih;`	ϖ	`ϖ`	♣	`&clubs;`	♥	`&hearts;`
•	`•`	…	`…`	♦	`&diams;`		` `
′	`′`	″	`″`	¡	`¡`	¢	`¢`
‾	`&oline;`	⁄	`&frasl;`	£	`£`	¤	`¤`
℘	`&weierp;`	ℑ	`&image;`	¥	`¥`	¦	`¦`
ℜ	`&real;`	™	`™`	§	`§`	¨	`¨`
ℵ	`&alefsym;`	←	`←`	©	`©`	ª	`ª`
↑	`↑`	→	`→`	«	`«`	¬	`¬`
↓	`↓`	↔	`↔`		``	®	`®`
³	`³`	´	`´`	¯	`¯`	°	`°`
µ	`µ`	±	`±`	²	`²`

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>

效果：

Volvo
Saab
Opel
Audi

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-information），比如针对搜索引擎和更新频度的描述和关键词。

页面编码

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
或
<meta charset="UTF-8">

刷新和跳转

< 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>

文档关键字：它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

<meta name="keywords" content="HTML,ASP,PHP,SQL">

Title

定义网页头部信息

Link

css 引入外部css文件

< link rel="stylesheet" type="text/css" href="css/common.css" >

icon图标

< link rel="shortcut icon" href="image/favicon.ico">

Style

定义css样式

< style type="text/css" > 
.bb{ 
      background-color: red; 
   } 
< /style>

Script

引进外部文件

< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

写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 – 定义变量

各种特殊符号：

特殊符号	命名实体	特殊符号	命名实体	特殊符号	命名实体	特殊符号	命名实体
Α	`Α`	Β	`Β`	↵	`&crarr;`	⇐	`⇐`
Γ	`Γ`	Δ	`Δ`	⇑	`&uArr;`	⇒	`⇒`
Ε	`Ε`	Ζ	`Ζ`	⇓	`&dArr;`	⇔	`⇔`
Η	`Η`	Θ	`Θ`	∀	`∀`	∂	`∂`
Ι	`Ι`	Κ	`Κ`	∃	`∃`	∅	`∅`
Λ	`Λ`	Μ	`Μ`	∇	`∇`	∈	`∈`
Ν	`Ν`	Ξ	`Ξ`	∉	`∉`	∋	`&ni;`
Ο	`Ο`	Π	`Π`	∏	`∏`	∑	`∑`
Ρ	`Ρ`	Σ	`Σ`	−	`−`	∗	`&lowast;`
Τ	`Τ`	Υ	`Υ`	√	`√`	∝	`&prop;`
Φ	`Φ`	Χ	`Χ`	∞	`∞`	∠	`&ang;`
Ψ	`Ψ`	Ω	`Ω`	∧	`&and;`	∨	`&or;`
α	`α`	β	`β`	∩	`∩`	∪	`∪`
γ	`γ`	δ	`δ`	∫	`∫`	∴	`&there4;`
ε	`ε`	ζ	`ζ`	∼	`&sim;`	≅	`&cong;`
η	`η`	θ	`θ`	≈	`≈`	≠	`≠`
ι	`ι`	κ	`κ`	≡	`&equiv;`	≤	`≤`
λ	`λ`	μ	`μ`	≥	`≥`	⊂	`⊂`
ν	`ν`	ξ	`ξ`	⊃	`⊃`	⊄	`&nsub;`
ο	`ο`	π	`π`	⊆	`&sube;`	⊇	`&supe;`
ρ	`ρ`	ς	`&sigmaf;`	⊕	`&oplus;`	⊗	`&otimes;`
σ	`σ`	τ	`τ`	⊥	`&perp;`	⋅	`⋅`
υ	`υ`	φ	`φ`	⌈	`&lceil;`	⌉	`&rceil;`
χ	`χ`	ψ	`ψ`	⌊	`&lfloor;`	⌋	`&rfloor;`
ω	`ω`	ϑ	`&thetasym;`	◊	`&loz;`	♠	`&spades;`
ϒ	`&upsih;`	ϖ	`ϖ`	♣	`&clubs;`	♥	`&hearts;`
•	`•`	…	`…`	♦	`&diams;`		` `
′	`′`	″	`″`	¡	`¡`	¢	`¢`
‾	`&oline;`	⁄	`&frasl;`	£	`£`	¤	`¤`
℘	`&weierp;`	ℑ	`&image;`	¥	`¥`	¦	`¦`
ℜ	`&real;`	™	`™`	§	`§`	¨	`¨`
ℵ	`&alefsym;`	←	`←`	©	`©`	ª	`ª`
↑	`↑`	→	`→`	«	`«`	¬	`¬`
↓	`↓`	↔	`↔`		``	®	`®`
³	`³`	´	`´`	¯	`¯`	°	`°`
µ	`µ`	±	`±`	²	`²`

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>

效果：

Volvo
Saab
Opel
Audi

转载于:https://www.cnblogs.com/postgres/p/5760452.html