HTML代码的一般形式
下方是一个基本的网页代码框架
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
一个网页的基本示例
<!DOCTYPE html>
<html>
<head>
<title>Headings and paragraphs</title>
</head>
<body>
<h1>Heading 1</h1>
<p>This is my first paragraph</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is my second paragraph</p>
<div style="background: skyblue">This is a div</div>
</body>
</html>
最基本的标签说明
标签基本格式:<标签名 属性名1="属性值" 属性名2="属性值" ...>文档内容</标签名>
<! DOCTYPE html>
: 用于代码开头指定html版本等信息;
<html></html>
: 告知浏览器这是一个HTML文档,是HTML文档中最外层的元素;
<head></head>
: 所有头部元素的容器,必须包含文档的标题(title),可以包含脚本、样式、meta信息以及其他;
<title></title>
: 定义文档的标题,定义浏览器工具栏中的标题,显示在搜索引擎结果中的页面标题;
<body></body>
: 定义文档的主体,包含文档的所有内容(比如文本、超链接、图像、表格和列表等);
<h1></h1>
: 定义HTML标题,从<h1>
到<h6>
标题的重要程度逐渐降低;
<p></p>
: 定义段落,浏览器会自动在其前后创建一些空白;
<br>
: 一个简单的换行符,是一个空标签,意味着它没有结束标签;
<div></div>
:定义HTML文档中的一个分隔区块或者一个区域部分,经常与CSS一起使用,用来布局网页。
链接中一些常用的标签
<a>
标签实现基本的超链接
<a href="http://www.pkbigdata.com">访问DC官网</a>
其中<a></a>
为标签,href=http://www.pkbigdata
表示链接指向的地址,访问DC官网
表示超链接的文本
指向同一服务器同一目录下的form.html
<a href="form.html">Fill Our Form</a>
指向同一服务器父目录下的parent.html
<a href="../parent.html">Parent</a>
指向同一服务器子目录下的stuff下的cat.html
<a href="stuff/cat.html">Catalog</a>
指向外部网站 (会在新的标签页打开)
<a href="http://pkbigdata.com" target="_blank">BASD</a>
超链接除了指向一个文件,还可以具体指明位置,这样浏览器就会直接跳转显示文件的相应位置。指向同一个文件的其他位置
<a href="#section1">Go to Introduction</a>
...
<h2 id="section1"></h2>
指向其他文件的某个位置
<a href="chapter3.html#section3.1.1>Go to section 3.1.1</a>
<!-- In chapter3.html -->
...
<div id="section3.1.1">
<h3>3.1.1 Technical Background</h3>
</div>
图片<img>
标签
插入一张图片,指向同一服务器同一目录下的php.png
<img src="php.png" alt="PHP Logo" />
其中<img />
为图片标签;scr="pho.png"
表示同一服务器同一目录下的php.png这个图片;alt="PHP Logo"
表示图片的代替文本,如果图片无法显示,则显示这个文本。
为图片增加超链接:
<a href="apply-now.html"><img src="apply-now-button.jpg" alt="apply" /></a>
<img>
标签的一些基本属性
src
: 图片路径
alt
: 图片无法显示时的代替文本
height
: 高度
width
: 宽度
border
: 边框宽度
无序列表
无序列表一般用<ul>+<li>
的形式来实现,一个简单的例子
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ul>
显示如下:
- Coffee
- Milk
- Tea
有序列表
有序列表一般用<ol>+<li>
的形式来表现,一个简单的例子
<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>
显示如下:
- Coffee
- Milk
- Tea
我们也可以通过规定起始值的形式来编号:
<ol start="50>
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>
显示如下:
- Coffee
- Milk
- Tea
表格
HTML表格由多种标签组合而成,其中最重要的三种标签是
<table></table>
: 表格的开始和结束
<tr></tr>
: 创建表格的一行
<td></td>
: 创建表格中的普通单元格
<th></th>
: 创建表格中标题栏单元格
一个简单的表格示例
First | Last Name | Age |
---|---|---|
Jill | Smith | 50 |
Eve | Jackson | 94 |
John | Doe | 80 |
<table border="1">
<tr>
<th>First</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
表单
用于收集用户输入的信息,一个简单的例子如下:
<form action="/statics/demosource/demo-form.php" method="post">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
Password: <input type="password"><br>
<input type="submit" value="提交">
</form>
拓展阅读
HTTP基础知识
1.HTTP基础知识对于爬虫的作用
HTTP–超文本传输协议(HyperText Transfer Protocol)是互联网中应用最为广泛的一种网络协议,设计的最初目的就是为了提供一种发布和接受HTML页面的方法,而爬虫的本质就是通过程序发生HTTP请求,并返回HTML文档,遵守HTTP的传输协议是爬虫的基础。
2.HTTP报文
HTTP协议中有两个报文,一个是请求报文,一个是相应报文,这是HTTP协议的核心内容
- HTTP消息结构