HTML入门

HTML基础的基础

什么是HTML

1.1.1 什么是HTML

超文本标记语言

通过链接将页面连接

排版语言

结构化信息

1.1.2 HTML的标准

W3C组织

不同浏览器有差异

1.1.3 HTML 编辑软件

文本编辑器

sublime text

中文支持 – 使用插件 convertToUTF8

1.1.4 浏览器的调试功能
  1. Chrome
  2. Firefox
  3. safari
  4. IE/Edge

HTML文件框架

1.2.1 HTML 文件框架
1
2
3
4
5
6
7
8
<html>
<head>
	<title>The title</title>
</head>
<body>
	The content
</body>
</html>
1.2.2 HTML字符编码问题

UTF-8包含最广泛的字符（也包括汉字）。

1
2
3
4
<head>
  <title>The title</title>
  <meta charset="UTF-8">
</head>
1.2.3 声明HTML5

现代浏览器已经可以全面使用HTML5，如果是比较旧浏览器或者比较旧网页，使用HTML4.01，版本声明会不同。

1
2
<!DOCTYPE html>
<html></html>

HTML段落标记

1.3.1 段落
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  </body>
</html>
1.3.2 HTML与CSS关系

HTML – 表达内容，是什么

CSS – 表达格式，怎么样

1.3.3 断行

HTML5 使用
，在上一个标准使用

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <p>Lorem ipsum dolor sit amet, <br />consectetur adipisicing elit. </p>
  </body>
</html>
1.3.4 标题

HTML5 新增

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    <hgroup>
    	<h1>h1</h1>
        <h2>h2</h2>
        <h3>h3</h3>
        <h4>h4</h4>
        <h5>h5</h5>
        <h6>h6</h6>
    </hgroup>
  </body>
</html>

基础格式

2.1.1 文字格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
   <b>定义粗体文本</b>
   <big>定义大号字</big>
   <i>定义斜体字</i>
   <tt>定义打字机代码</tt>
   <sub>定义下标字</sub>
   <sup>定义上标字</sup>
   <p>x<sup>2</sup>+y<sub>2</sub></p>
   <ins>定义插入字</ins>
   <del>定义删除字</del>
   <mark>定义有记号的文本</mark>
  </body>
</html>
2.1.2 段语格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <em>em强调</em>
    <strong>strong着重</strong>
    <dfn>dfn定义</dfn>
    <code>code代码</code>
    <samp>samp例子代码</samp>
    <kbd>kbd用户输入</kbd>
    <var>variable变量</var>
    <cite>cite引用</cite>
  </body>
</html>
2.1.3 其它格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
   <address>
   	<blockquote>BeiJing,China</blockquote><br>
   	<q>XiongAn,HeBei</q>
   </address>
   <pre>
   		int main() {
   			printf('Hello\n');
   			return 0;
   		}
   </pre>
  </body>
</html>

深入格式

HTML标记的属性

3.1.1 HTML属性

HTML5中属性可以不用引号包裹

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
	<hr width="50%" align="left" size="10">
	<abbr title="肯德基">KFC</abbr>
	<abbr title="">指示简称或缩写</abbr>
  	Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  	<bdo dir="rtl">Lorem ipsum dolor <bdi>sit</bdi> amet, consectetur adipisicing elit.</bdo>
  </body>
</html>
3.1.2 HTML转义字符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
	a&lt;2
	b&gt;2
	&amp;&nbsp;&nbsp;&amp;
	L&uuml;
	L&Uuml;
	&copy;
  </body>
</html>

列表与图片

3.2.1 列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
	<ul>
		<li>tea</li>
		<li>coffee</li>
		<li>coke</li>
	</ul>
	<ol start="4">
		<li>tea</li>
		<li>
			coffee
			<ul>
				<li>with sugar</li>
				<li>with milk</li>
			</ul>
		</li>
		<li>coke</li>
	</ol>
	<dl>
		<dt>tea</dt>
		<dd>red color</dd>
	</dl>
  </body>
</html>
3.2.2 图片

一张图片如同一个字符

定义宽高属性，浏览器先加载图片框

图片格式：JPG，PNG，GIF

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
	<img src="http://i1.hexunimg.cn/2015-03-20/174222493.jpg" width="30%" height="30%" alt="phone">
  </body>
</html>
3.2.3 iframe

占据一个字符

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
	<iframe src="http://www.baidu.com" frameborder="0"></iframe>
  </body>
</html>

超链接

3.3.1 超链接
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
	<a href="http://www.baidu.com" target="_blank">百度</a>
	<a href="index.html" target="_blank">主页</a>
  </body>
</html>
3.3.2 页面内链接
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
	<div id="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, hic.</div>
	<div>Soluta, excepturi! Veritatis molestiae iste, recusandae reiciendis, ullam quidem maxime?</div>
	<div>Porro, molestiae, magni! Minus dolorem error, beatae culpa, excepturi itaque?</div>
	<div>Commodi et assumenda sit asperiores quia aliquid vero iusto ea.</div>
	<div>Quod totam dicta at, voluptate iusto ullam pariatur cum animi.</div>
	<div>Delectus totam eaque dolores enim iure quis recusandae ea aut!</div>
	<div>Fugiat, pariatur. Provident sunt, iusto voluptas perferendis reprehenderit deleniti velit?</div>
	<div>Iste, ipsum. Aliquam, animi delectus mollitia quod consequatur debitis nostrum.</div>
	<div>Delectus ullam maxime, expedita a excepturi vitae atque natus quis.</div>
	<div>Ipsum odio, saepe autem? Veritatis ex voluptatibus quibusdam quam inventore.</div>
	<a href="#first">To first</a>
</html>
3.3.3 图片定位链接
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
	<img src="http://i1.hexunimg.cn/2015-03-20/174222493.jpg" width="20%" height="20%" alt="phone" usemap="#phone">
	<map name="phone">
		<area shape="rect" coords="0,0,50,50" href="http://www.taobao.com" alt="taobao" target="_blank">
		<area shape="circle" coords="75,75,25" href="http://www.jd.com" alt="jindong" target="_blank">
	</map>
</html>

表格

3.4 表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
	<table border="1">
		<caption>number list</caption>
		<thead>
			<tr>
				<th>1</th>
				<th>2</th>
				<th>3</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>one</td>
				<td>two</td>
				<td rowspan="2">three</td>
			</tr>
			<tr>
				<td colspan="2">一</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
		</tfoot>
	</table>
</html>

表单

3.5 表单

HTML5 增加了多个新的输入类型：

  1. color
  2. date
  3. datetime
  4. datetime-local
  5. email
  6. month
  7. number
  8. range
  9. search
  10. tel
  11. time
  12. url
  13. week
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="">
		<label for="user-name">User's name</label>
		<input type="text" id="user-name">
		<label for="user-password">User's password</label>
		<input type="password" id="user-password">
		<label for="user-address">User's address</label>
		<select name="address-list" id="user-address">
			<option value="beijing">Beijing</option>
			<option value="shanghai">Shanghai</option>
			<option value="guangzhou">Guangzhou</option>
		</select>
		<span>User's sex:</span>
		<input type="radio" name="sex" value="male">Male
		<input type="radio" name="sex" value="Female">Female
		<label for="user-msg">User message</label>
		<textarea name="message" rows="10" cols="30" id="user-msg"></textarea>
		<span>User's thing:</span>
		<input type="checkbox" name="vehicle" value="Bike">I have a bike
		<input type="checkbox" name="vehicle" value="Car">I have a car
		<button type="submit">Submit</button>
	</form>
</body>
</html>