HTML

谷歌架构师

2019-06-29

关注关注

W3school 最全HTML参考手册

WWW初级概念

什么是WWW

WWW 指万维网（World Wide Web），万维网常被称为Web
Web 是由遍布全球的计算机所组成的网络，所有 Web 中的计算机都可以彼此通信
所有这些计算机都使用名为 HTTP 的通信标准

WWW 如何工作

web项目存储于服务器里面
用户通过浏览器来查看web程序
浏览器通过一个已知请求来访问服务器的网页
请求是一个包含页面地址的标准 HTTP 请求，如：http://ip或域名/xxx

浏览器如何显示页面

所有的网页都含有其如何被显示的结构
浏览器通过阅读这些结构来显示页面

谁制定 web 标准

web 的规则制定主体是 W3C，万维网联盟（World Wide Web Consortium）
最核心的 web 标准是 HTML、CSS、XML

HTML 初级概念

HTML 指的是超文本标记语言，并非编程语言
HTML 使用标记标签来描述网页
HTML 文档描述网页，所以 HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

XHTML 初级概念

XHTML 指可扩展超文本标签语言
XHTML 的目标是取代 HTML
XHTML 是更严格更纯净的 HTML 版本

CSS 初级概念

CSS 指层叠样式表
为了解决内容与表现分离的问题（外部样式表通常存储在 CSS 文件中）
多个样式定义可层叠为一
当同一个HTML元素被不止一个样式所定义时，会使用哪个样式呢？
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
外部样式表可以极大提高工作效率（控制.css文件，控制多个页面的样式）

JavaScript 初级概念

JavaScript 被设计用来向 HTML 页面添加交互行为,通常被直接嵌入 HTML 页面
JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）

什么是 XML

XML 被设计用来描述数据，HTML 被设计用来显示数据
XML 指可扩展标记语言，很类似 HTML
XML 标签没有被预定义。您需要自行定义标签
XML 使用文件类型声明（DTD）或者 XML Schema 来描述数据
XML 不会做任何事情。XML 被设计用来结构化、存储以及传输信息
下面是 John 写给 George 的便签，存储为 XML：

<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

Web 构件

HTML 4.01
CSS 的使用（样式表）
XHTML
XML 和 XSLT
客户端脚本
服务器端脚本
通过 SQL 管理数据
Web 的未来

标签（按功能分类）

基础

<br>换行符，它是一个空标签（意味着它没有结束标签）。<br> 标签会告诉浏览器立即停止当前的文本流，并在下一行显示。
<br>标签的 clear 属性只对这些左对齐或右对齐的图像或表格起作用。它可以具有三个值：left、right 或者 all，每个值都代表一个边界或两边的边界。当指定的边界没有图像时，浏览器才会继续输出文本。

格式

<abbr>标记缩写。在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本。
```
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
```

<mark>突出显示部分文本。默认是黄色背景，可以通过定义style切换mark的背景色
HTML
HTML

<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>Do not forget to buy <mark style="background: #0288d1;">milk</mark> today.</p>

表单

<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
```
<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>
```

图像

<map>和<area>带有可点击区域的图像映射（点击图片区域跳转）。

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

音频/视频

<audio>定义声音，比如音乐或其他音频流(具体属性：audio标签)。
```
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
```

<video>定义视频，比如电影片段或其他视频流(具体属性：vedio标签)。

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
   </video>

<source>允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>

链接

<a>定义锚，超链接，用于从一张页面链接到另一张页面。target 属性规定在何处打开页面上的所有链接。
```
<a href="http://www.w3school.com.cn" target="_parent">W3School</a>
```

<link>链接一个外部样式样式样式表。

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

列表

<ul>无序列表，点开头

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>有序列表，数字开头（默认1开始累加）

<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

属性

里面有很多神奇的功能，但是多数不常用！！！

accesskey属性 规定激活（使元素获得焦点）元素的快捷键。

<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML 教程</a><br />
<p><b>注释：</b>请使用Alt + <i>accessKey</i> (或者 Shift + Alt + <i>accessKey</i>) 来访问带有指定快捷键的元素。</p>

data-* 属性 嵌入自定义数据。
这个属性用于存储页面或应用程序的私有自定义数据，可以应用在所有 HTML 元素上。存储的（自定义）数据能够被页面的 JavaScript 中获取。
data-* 属性包括两部分：
1.属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
2.属性值可以是任意字符串

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
    alert(animal.innerHTML + "是一种" + animalType + "。");
}
</script>
</head>
<body>
<h1>物种</h1>
<p>点击某个物种来查看其类别：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>  
</ul>
</body>
</html>

事件属性

Window 事件属性(应用到 <body> 标签!!!)

onload 事件属性,页面加载之后立即调用脚本
```
<body onload="load()">
```
onresize 事件属性，当浏览器窗口被调整大小时调用
```
<body onresize="showMsg()">
```

Form 事件(应用到几乎所有 HTML 元素)

onblur 事件属性,元素失去焦点时触发

<input type="text" name="fname" id="fname" onblur="upperCase()">

onchange 事件属性,元素值改变时触发。非即时触发,失去焦点时触发
```
<input type="text" name="txt" value="Hello" onchange="checkField(this.value)">
```

onfocus 事件属性，元素获得焦点时触发

<input type="text" id="fname" onfocus="setStyle(this.id)">

Keyboard 事件

onkeydown 事件属性，用户（在键盘上）按键时触发
```
<input type="text" onkeydown="displayResult()">
```
onkeypress 事件属性，用户（在键盘上）按键时触发
```
<input type="text" onkeypress="displayResult()">
```
onkeyup 事件属性，用户（在键盘上）释放按键时触发
```
<input type="text" onkeyup="displayResult()">
```
注：三个事件的调用顺序：onkeydown - onkeypress - onkeyup

Mouse 事件

ondblclick 事件属性，鼠标双击元素时触发
```
<button ondblclick="copyText()">Copy Text</button>
```
onmousedown 鼠标按下时触发，onmouseup 松开鼠标按钮时触发。事件顺序：onmousedown - onmouseup - onclick
```
<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">请点击文本！</p>
```
onmousemove 鼠标指针移动到元素上时触发，onmouseout 鼠标指针移动到元素外时触发，onmouseover 鼠标指针移动到元素上时触发
```
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="/i/eg_smile.gif" alt="Smiley" >
```
onmousewheel 当鼠标滚轮正在被滚动时运行的脚本
onscroll 当元素滚动条被滚动时运行的脚本