第1章 HTML介绍
1.1 HTML是什么
HTML表示超文本标记语言(Hyper Text Markup Language)。
HTML文件是一个包含标记的文本文件。
这些标记保速浏览器怎样显示这个页面。
HTML文件必须有htm或者html扩展名。
HTML文件可以用一个简单的文本编辑器创建。
1.2 HTML标签解释
HTML文档中,第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>,这个标签告诉浏览器这是HTML文档的终止。
在<head>和</head>标签之间文本的是头信息。在浏览器窗口中,头信息是不被显示的。
在<title>和</title>标签之间的文本是文档标题,它被显示在浏览器窗口的标题栏。
在<body>和</body>标签之间的文本是正文,会被显示在浏览器中。
在<b>和</b>标签之间的文本会以加粗字体显示。
第2章 HTML标签
2.1 什么是HTML标签
HTML使用不同的标签来实现不同的功能。
2.2 HTML标签书写格式
1.成对出现<>,例如<b>和</b>。
2.第一个表示开始,第二个表示结束。
3.开始标签和结束标签之间的文本是内容。
4.标签大小写无所谓,<b>和<B>表示的意思一样。
2.3 HTML标签的属性
1.标签可以拥有属性。属性能够为页面上的HTML元素提供附加属性。
2.4 举例说明
正常的主体标签是:
<body>
但是我现在想让页面的背景变成红色,那么可以这么样写:
<body bgcolor="red">
再举个例子,我想创建一个表格,但是这个表格不希望他有边框,可以这样写:
<table border="0">
第3章 HTML基本标签
3.1 HTML基本标签组成
HTML中最重要的标签是定义标题元素,段落和换行的标签。
下面的例子一个简单的HTML组成:
<html>
<body>
我的第一个HTML网页
</body>
</html>
3.2 标题元素
解释:
1.标题元素由标签<h1>到<h6>定义。
2.<h1>定义了最大的标题元素
3.<h6>定义了最小的标题元素
举例:显示6个标签
<html>
<body>
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
</body>
</html>
3.3 段落
解释:
1.段落是用<p>标签定义的。
2.HTML自动在一个段落前后各添加一个空行。
举例:
<html>
<body>
<p>这是第1段话</p>
<p>这是第2段话</p>
<p>这是第3段话</p>
<p>这是第4段话</p>
</body>
</html>
3.4 换行
解释:
当需要结束一行,并且不想开始新段落时,使用<br>标签。
<br>标签不管放在什么位置,都能够强制换行。
举例:
<html>
<body>
主体内容
<br>
换行啦啦啦
<br>
</body>
</html>
3.5 居中的标题
<html>
<body>
<h1 align="center">这是居中的标题</h1>
<p>这是一段文字,没什么意义,反正我也不知道自己在打什么哈哈哈</p>
</body>
</html>
3.6 插入水平线
解释:
使用<hr>表示插入一条水平线
举例:
<html>
<body>
<p>插入水平线</p>
<hr>
<p>这是一条线</p>
<hr>
<p>还是一条线</p>
<hr>
</body>
</html>
3.7 背景颜色
解释:
通过给<body>标签添加属性来控制背景颜色
举例:
<html>
<body bgcolor="yellow">
<h2>看,黄色的背景!</h2>
</body>
</html>
第4章 HTML格式
4.1 什么是HTML格式
HTML定义了很多元素用来格式化输出,比如加粗和倾斜文本。
4.2 格式化文字
<html>
<body>
<strong>文本加粗</strong>
<br>
<big>文本放大</big>
<br>
<small>文本缩小</small>
<br>
<i>文本倾斜</i>
<br>
文本<sup>上标</sup>
<br>
文本
<sub>下标</sub>
<br>
</body>
</html>
4.3 格式化代码
<html>
<body>
<b>预处理格式用来显示代码非常好</b>
<pre>
for i in {1..10}
do
echo $i
done
</pre>
</body>
</html>
4.4 文本倒着输出
<html>
<body>
<bdo dir="rtl">
这段文字是倒着的
</bdo>
</body>
</html>
第5章 HTML实体
5.1 什么是HTML实体
1.有些字符,比如说“<”字符,在HTML中有特殊的含义,因此不能在文本中使用。
2.想要在HTML中显示一个小于号“<”,需要用到字符实体。
5.2 举例
<html>
<body>
<p>
小于号 < < <br>
大于号 > > <br>
and符号 & & <br>
引号 " " <br>
单引号 ' <br>
</p>
</body>
</html>
第6章 HTML链接
6.1 什么是HTML链接
就是通过点击链接跳转到其他页面或其他的网站
6.2 跳转到网站的其他页面
<html>
<body>
<a href="lastpage.htm">点击跳转</a>到网站的其他页面<br>
</body>
</html>
6.3 跳转到其他网站
<html>
<body>
<a href="http://www.baidu.com/">点击跳转</a> 到其他网站<br>
</body>
</html>
6.4 图片跳转
<html>
<body>
<a href="https://baike.baidu.com/item/%E6%9E%97%E7%BA%B3%E6%96%AF%C2%B7%E6%9C%AC%E7%BA%B3%E7%AC%AC%E5%85%8B%E7%89%B9%C2%B7%E6%89%98%E7%93%A6%E5%85%B9/1034429?fromtitle=linus&fromid=400810&fr=aladdin">点击图片跳转到百度百科<img border="0" src=".\Linus.jpg"></a><br>
</body>
</html>
6.5 跳转时新打开一个页面
<html>
<body>
<a href="https://baike.baidu.com/item/%E6%9E%97%E7%BA%B3%E6%96%AF%C2%B7%E6%9C%AC%E7%BA%B3%E7%AC%AC%E5%85%8B%E7%89%B9%C2%B7%E6%89%98%E7%93%A6%E5%85%B9/1034429?fromtitle=linus&fromid=400810&fr=aladdin" target="_blank">点击图片新开一个窗口跳转到百度百科<img border="0" src=".\Linus.jpg"></a>
</body>
</html>
6.6 跳转到本页面的某个位置
<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
第7章 HTML框架
7.1 什么是HTML框架
使用框架,可以在一个浏览器窗口中显示不止一个HTML文档。
这样的HTML文档被称为框架页面,它们是相互独立的。
7.2 标签解释
frameset标签
1.<frameset>标签定义了如何将窗口拆分成框架。
2.每个frameset标签定义了一组行和列。
3.行/列的值指明了每个行/列在屏幕上所占的大小
frame标签
<frame>标签定义了每个框架中放入什么文件。
7.3 垂直分栏
举例:
<html>
<frameset cols="25%,75%>
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
</html>
解释:
1.第一个被设置成窗口宽度的25%,第二个被设置成窗口宽度的75%。
2.页面“frame_a.htm”被放在第一个分栏中,“frame_b.htm”被放在第二个分栏中。
7.4 水平分栏
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
7.5 不可改动的分栏
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame_a.htm">
<frameset cols="25%,75%">
<frame noresize="noresize" src="frame_b.htm">
<frame noresize="noresize" src="frame_c.htm">
</frameset>
</frameset>
</html>
7.6 使用导航框架跳转到指定章节
<html>
<frameset cols="200,*">
<frame src="frame_linksection.htm">
<frame src="frame_section.htm" name="showframe">
</frameset>
</html>
第8章 HTML表格
8.1 什么是HTML表格
8.2 有边框的表格
<html>
<body>
<b>表格</b>
<br>
<table border="1">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
</table>
</body>
</html>
第9章 HTML列表
9.1 什么是列表
HTML支持有序、无序和自定义列表。
9.2 无序列表
<html>
<body>
<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
9.3 有序列表
<html>
<body>
<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
第10章 HTML表单
10.1 什么是HTML表单
HTML表单用来选择不同种类的用户输入。
10.2 文本框
<html>
<body>
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
10.3 密码框
<html>
<body>
<form>
Username:
<input type="text" name="user">
<br>
Password:
<input type="password" name="password">
</form>
<p>
Note that when you type characters in a password field, the browser displays asterisks or bullets instead of the characters.
</p>
</body>
</html>
10.4 单选按钮
<form>
<input type="radio" name="sex" value="male">Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
10.5 复选框
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
10.6 下拉框
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
</form>
</body>
</html>
10.7 文本框
<html>
<body>
<p>
This example demonstrates a text-area.
</p>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</body>
</html>
10.8 按钮
<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>
</body>
</html>