HTML速学
简介
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
基础
标题用<h1> - <h6>表示
段落用<p>，浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
链接用<a>表示，在href属性中指定链接的地址。
图像用<img>
水平线<hr />
注释<!-- This is a comment -->
折行（换行） <br />，注意：所有连续的空格或空行都会被算作一个空格
标签<span>，没有固定样式，需要加上样式
元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
没有内容的 HTML 元素被称为空元素，在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法。
HTML 标签对大小写不敏感，推荐小写。
属性总以键值对的形式出现，总是在开始标签中规定。比如：name=”value”。
始终为属性值加引号
属性值参考https://www.w3school.com.cn/tags/index.asp
样式
不应该用
| 标签 | 描述 |
|---|---|
<center> |
定义居中的内容。 |
<font> 和 <basefont>
|
定义 HTML 字体。 |
<s> 和 <strike>
|
定义删除线文本 |
<u> |
定义下划线文本 |
| 属性 | 描述 |
| align | 定义文本的对齐方式 |
| bgcolor | 定义背景颜色 |
| color | 定义文本颜色 |
背景颜色：background-color
字体系列：font-family
字体颜色：color
字体大小：font-size
文本对齐：text-align 属性：center
| 标签 | 描述 |
|---|---|
<b> |
定义粗体文本。 |
<big> |
定义大号字。 |
<em> |
定义着重文字。 |
<i> |
定义斜体字。 |
<small> |
定义小号字。 |
<strong> |
定义加重语气。 |
<sub> |
定义下标字。 |
<sup> |
定义上标字。 |
<ins> |
定义插入字。 |
<del> |
定义删除字。 |
<s> |
*不赞成使用。*使用 <del> 代替。 |
<strike> |
*不赞成使用。*使用 <del> 代替。 |
<u> |
*不赞成使用。*使用样式（style）代替 |
计算机输出标签
| 标签 | 描述 |
|---|---|
<code> |
定义计算机代码。不保留多余的空格和折行： |
<kbd> |
定义键盘码。 |
<samp> |
定义计算机代码样本。 |
<tt> |
定义打字机代码。 |
<var> |
定义变量。 |
<pre> |
定义预格式文本。这个挺好，能显示空行和空格 |
<listing> |
*不赞成使用。*使用 <pre> 代替。 |
<plaintext> |
*不赞成使用。*使用 <pre> 代替。 |
<xmp> |
*不赞成使用。*使用 <pre> 代替。 |
<p>Coding Example:</p>
<code>
<pre>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</pre>
</code>
引用，这一类大多数是基于内容的标签，给人看其实能够实现，但是浏览器获取到的信息不一样，能够真的视力障碍的人做出不一样的设置。
| 标签 | 描述 |
|---|---|
<blockquote> |
长引用，会加入换行和外边距 |
q |
短引用，会包含引号 |
<abbr> |
缩略词，里面最好加个title，这样子能显示 |
dfn |
定义 |
<address> |
联系信息 |
<cite> |
著作的标题 |
<bdo> |
覆盖当前文本方向，比如<bdo dir="rtl">bala</bdo>
|
颜色
仅有16中颜色被HTML4.0支持
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow
使用CSS
三种插入方式
1、外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2、内部样式表
在head内写
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3、内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
链接
我们通过使用 <a> 标签在 HTML 中创建链接。
有两种使用 <a> 标签的方式：
- 通过使用 href 属性 – 创建指向另一个文档的链接
- 通过使用 name 属性 – 创建文档内的书签
语法
<a href="url">Link text</a>
target属性，例如”_blank”
name属性，规定锚（anchor）的名称
注意：请始终将正斜杠添加到子文件夹，假如这样书写链接：href=”http://www.w3school.com.cn/html“，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”http://www.w3school.com.cn/html/“。
图像
<img> 是空标签，src是源属性，alt是替换的文本，当图像不显示的时候使用替换文本
<img src="boat.gif" alt="Big Boat">
给背景加上图片，如果图像小于页面，图像会进行重复，已经废弃了，不建议用
<body background="/i/eg_background.jpg">
map定义地图图像，area定义图像地图中的可用区域
表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格和边框属性，如果不定义边框属性，表格将不显示边框，但最好还是定义一个
<table border="1">
</table>
表格的表头
使用<th>标签进行定义
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
空单元格，可能不被显示出来，建议加个空格
<td> </td>
跨行，colspan=”2″表示为两列的长度
<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
跨列，rowspan表示占了两行
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
单元格边距，单元格内容与其边框之间的空白
<table border="1"
cellpadding="10">
单元格间距
<h4>带有 cellspacing：</h4>
<table border="1"
cellspacing="10">
加个background可以显示图片
align可以排列位置
frame可以显示框的样式，例如”box”, “above” ,”below” ,”hsides” ,”vsides”
表格标签
| 表格 | 描述 |
|---|---|
<table> |
定义表格 |
<caption> |
定义表格标题，在table块内里面定义<table><caption>
|
<th> |
定义表格的表头。 |
<tr> |
定义表格的行。 |
<td> |
定义表格单元。 |
<thead> |
定义表格的页眉。感觉没什么用处？应该也是基于内容的 |
<tbody> |
定义表格的主体。 |
<tfoot> |
定义表格的页脚。 |
<col> |
定义用于表格列的属性。 |
<colgroup> |
定义表格列的组。 |
列表
无序列表，无序列表始于 <ul> 标签（unorder）。每个列表项始于 <li>。
ul属性有type， 分别有”disc” ,”circle” ,”square”，代表圆实心，圆空心，正实心
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表，有序列表始于 <ol> 标签（order）。每个列表项始于 <li> 标签。
有序的type有”A” ,”a” ,”I” ,”i”，默认没有是数字，其他代表字母大小写，罗马字大小写
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
定义列表，自定义列表以 <dl> 标签开始（definition list）。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。（这个有点抽象）
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
块
可以通过 <div> 和 <span> 将 HTML 元素组合起来。
块级元素在浏览器显示时，通常会以新行来开始（和结束），例子：<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。例子：<b>, <td>, <a>, <img>
<div>是块级元素，<span>是内联元素
id
id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。
id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。
id 的语法是：写一个井号 (#)，后跟一个 id 名称。然后，在花括号 {} 中定义 CSS 属性。
id 名称对大小写敏感！
内联框架
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
删除边距
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
使用js
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
noscript
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>抱歉，您的浏览器不支持 JavaScript！</noscript>
必选的属性
type MIME-type 指示脚本的 MIME 类型。
| 属性 | 值 | 描述 |
|---|---|---|
| async | async | 规定异步执行脚本（仅适用于外部脚本）。 |
| charset | charset | 规定在外部脚本文件中使用的字符编码。 |
| defer | defer | 规定是否对脚本执行进行延迟，直到页面加载为止。 |
| language | script | 不赞成使用。规定脚本语言。请使用 type 属性代替它。 |
| src | URL | 规定外部脚本文件的 URL。 |
| xml:space | preserve | 规定是否保留代码中的空白。 |
头部
<head> 元素是所有头部元素的容器。 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
title 元素能够：
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时显示的标题
- 显示在搜索引擎结果中的页面标题
base`标签为页面上的所有链接规定默认地址或默认目标（target）：
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
link标签定义文档与外部资源之间的关系，最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
meta标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据
尤其是针对搜索引擎
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
<meta name="keywords" content="HTML, CSS, XML" />
<meta charset="UTF-8">
响应式设计
什么是响应式 Web 设计？
- RWD 指的是响应式 Web 设计（Responsive Web Design）
- RWD 能够以可变尺寸传递网页
- RWD 对于平板和移动设备是必需的
另一个创建响应式设计的方法，是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
语义元素
<article> |
定义文章。 |
|---|---|
<aside> |
定义页面内容以外的内容。 |
<details> |
定义用户能够查看或隐藏的额外细节。 |
<figcaption> |
定义 <figure> 元素的标题。 |
<figure> |
规定自包含内容，比如图示、图表、照片、代码清单等。 |
<footer> |
定义文档或节的页脚。 |
<header> |
规定文档或节的页眉。 |
<main> |
规定文档的主内容。 |
<mark> |
定义重要的或强调的文本。 |
<nav> |
定义导航链接。 |
<section> |
定义文档中的节。 |
<summary> |
定义 <details> 元素的可见标题。 |
<time> |
定义日期/时间。 |
代码规定
请始终在文档的首行声明文档类型：
<!DOCTYPE html>
请使用小写元素名
关闭所有 HTML 元素
关闭空的 HTML 元素
使用小写属性名
属性值加引号
必需的属性，比如图像加上 alt
空格和等号，等号两边的空格是合法的，但是精简空格更易阅读
避免长代码行
空行和缩进
HTML 注释，短注释应该在单行中书写，并在 <!-- 之后增加一个空格，在 --> 之前增加一个空格：
长注释应该通过 <!-- 和 --> 在独立的行中书写
样式表请使用简单的语法来链接样式表（type 属性不是必需的）
在 HTML 中加载 JavaScript，请使用简单的语法来加载外部脚本（type 属性不是必需的）
实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
空格 |
|
  |
|
< |
小于号 |
< |
< |
> |
大于号 |
> |
> |
& |
和号 |
& |
& |
" |
引号 |
" |
" |
' |
撇号 |
' (IE不支持) |
' |
￠ |
分（cent） |
¢ |
¢ |
£ |
镑（pound） |
£ |
£ |
¥ |
元（yen） |
¥ |
¥ |
€ |
欧元（euro） |
€ |
€ |
§ |
小节 |
§ |
§ |
© |
版权（copyright） |
© |
© |
® |
注册商标 |
® |
® |
™ |
商标 |
™ |
™ |
× |
乘号 |
× |
× |
÷ |
除号 |
÷ |
÷ |
URL
URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。
scheme://host.domain:port/path/filename
- scheme – 定义因特网服务的类型。最常见的类型是 http
- host – 定义域主机（http 的默认主机是 www）
- domain – 定义因特网域名，比如 w3school.com.cn
- :port – 定义主机上的端口号（http 的默认端口号是 80）
- path – 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename – 定义文档/资源的名称
表单
<form>定义表单
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
<input>是最重要的表单元素，type 要text、radio、submit等等
注意：表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。
用 <fieldset> 组合表单数据
<fieldset>元素组合表单中的相关数据
<legend> 元素为 <fieldset> 元素定义标题。
下面是 form 属性的列表：
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。_blank
|
action 属性定义在提交表单时执行的动作。
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
name 属性 如果要正确地被提交，每个输入字段必须设置一个 name 属性。
表单元素
<input> 元素
<select>元素，下拉列表，option表示带选择的选项，selected预定义
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea> 元素，定义多行输入字段（文本域），rows cols属性表示占的行列数
<button>元素定义可点击的按钮：
<datalist> H5元素， 元素为 <input> 元素规定预定义选项列表，用户会在他们输入数据时看到预定义选项的下拉列表。
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
input的输入类型
文本：<input type="text">
密码：<input type="password" name="psw">
提交表单：<input type="submit">
单选框：<input type="radio" name="sex">，name需要一致
复选框：<input type="checkbox">，name需要一致
按钮：<input type="button>
H5多了一打新的输入类型
数字类型：<input type="number" name="quantity" min="1" max="5">还有其他限制属性
日期：<input type="date" name="bday" max="1979-12-31">
颜色： <input type="color" name="favcolor">
范围： <input type="range" name="points" min="0" max="10">
月份：<input type="month" name="bdaymonth">
周和年：<input type="week" name="week_year">
时间：<input type="time" name="usr_time"> 无时区
日期和时间（有时区）： <input type="datetime" name="bdaytime">
日期和时间（无时区）：<input type="datetime-local">
电子邮件：<input type="email">
搜索字段：<input type="search">
url：<input type="url">
input属性
value 属性规定输入字段的初始值：
readonly 只读，不需要值
disabled 禁用，不可用和不可点击
size 属性，统计尺寸（以字符计）
maxlength属性，允许的最大长度
H5还有一长串
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 和 width
- list
- min 和 max
- multiple
- pattern (regexp)
- placeholder
- required
- step
