前段时间一直在做单片机的项目,再加上一个接一个的期末考试,一直没有时间去学习一些新的东西。Linux网络爬虫做了一半卡住了,感觉对HTML和HTTP那部分很不熟悉,只晓得http类型的url,对于href和其他类型的一窍不通,根本不知道怎么分析通过http获得的网页源码,怎么去提取其中的url。
于是,带着疑惑,我开始去HTML试试水了,看看HTML到底是一些什么东西,有什么神奇之处。去图书馆借了两本关于网页设计与制作的书籍,开始了我的啃书之旅了。
人都说,学习程序最忌讳只看书不练习。所以,看了一会,我便忍不住开始小试牛刀了。
首先看一下效果图:
这是一个非常简单的小例子,只有两三个部分。首先是<!DOCTYPE>标记:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE>标记位于文档最开始处,用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。
必须在开头处使用<!DOCTYPE>标记,这样浏览器才能将该网页作为有效的XHTML文档,并按指定文档类型进行解析。
接下来是<html>标记:
<html xmlns="http://www.w3.org/1999/xhtml">
<html>标记位于
<!DOCTYPE>标记之后,也被称为根标记,用于告知浏览器其自身是一个HTML文档,<html>标记标志着HTML文档的开始,</html>标记标志着文档的结束,在它们之间是文档的头部和主题内容。
在<html>之后又一串代码xmlns="http://www.w3.org/1999/xhtml",用于声明XHTML统一的默认命名空间。
再然后是<head>标记:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻抢先看</title>
</head>
<head>标记用于定义HTML文档的头部信息,也被称为头部标记,紧跟在<html>标记之后主要用来封装其他位于文档头部的标记。例如<title>、<meta>、<link>及<style>等,用来描述文档的标题、作者以及和其他文档的关系等。
一个HTML文档只能含有一对<head>标记。绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。
定义页面元信息标记<meta />:
设置字符集
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
其中http-equiv属性的值为Content-Type,content属性的值为text/html和charset=utf-8,中间用“;”隔开,用于说明当前文档类型为HTML,字符集为utf-8(国际化编码)。
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。
设置页面标题标记<title>
<title>新闻抢先看</title>
<title>标记用于定义HTML页面的标题,即给网页取一个名字,必须位于<head>标记之内。<title></title>之间的内容在浏览器窗口的标题栏中显示。
<body>
<h3 align="center"><font face="微软雅黑">南京地铁9号线启动地质勘探 为全线动工做准备</font></h3>
<p align="center"><font color="#979797" size="2">2017-06-23 14:21<font color="blue"> 中国江苏网 </font></font></p>
<hr size="2" color="#CCCCCC" />
<p><font color="blue"> 新浪江苏 </font>讯 日前,工人在四平路金川河进行地质勘探。目前,地铁9号线启动沿线的地质勘探,为全线动工做准备。9号线一期起点为河西绿博园站,终点为长途汽车东站。</p>
</body>
<body>标记
<body>标记用于定义HTML文档所要显示的内容,也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记之内,<body>标记中的信息才是最终展示给用户看的。
一个HTML文档只能含有一对<body>标记,且<body>标记必须在<html>标记之内,位于<head>标记之后,与<head>标记是并列关系。
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>标题标记,从1-6重要性递减。其基本语法:
<hn align="对齐方式">标题文本</hn>
举例:
<h3 align="center"><font face="微软雅黑">南京地铁9号线启动地质勘探 为全线动工做准备</font></h3>
<p>段落标记:
<p>标记用来定义段落,其基本语法:
<p align="对齐方式">段落文本</p>
align属性为<p>标记的可选属性,可以设置文本对齐方式。
<font>文本样式标记:
HTML提供了文本样式标记<font>,用来控制网页中文本的字体、字号和颜色。其基本语法:
<font 属性="属性值">文本内容</font>
属性名 | 含义 |
face | 设置文字字体,例如微软雅黑、黑体、宋体等 |
size | 设置文字大小,可以取1到7之间的整数值 |
color | 设置文字颜色 |
<hr />水平线标记:
<hr />是单标记,在网页中输入一个<hr />,就添加了一条默认样式的水平线。基本用法:
<hr 属性="属性值" />
属性名 | 含义 | 属性值 |
align | 设置水平线的对齐方式 | 可以选择left、right、center三种值,默认为center,居中对齐 |
size | 设置水平线的粗细 | 以像素为单位,默认2像素 |
color | 设置水平线的颜色 | 可以用颜色名称、十六进制#RGB、rgb(r,g,b) |
width | 设置水平线的宽度 | 可以是确定的像素值,也可以是浏览器窗口的百分比,默认为100% |
使用案例:
<h3 align="center"><font face="微软雅黑">南京地铁9号线启动地质勘探 为全线动工做准备</font></h3>
<p align="center"><font color="#979797" size="2">2017-06-23 14:21<font color="blue"> 中国江苏网 </font></font></p>
<hr size="2" color="#CCCCCC" />
<p><font color="blue"> 新浪江苏 </font>讯 日前,工人在四平路金川河进行地质勘探。目前,地铁9号线启动沿线的地质勘探,为全线动工做准备。9号线一期起点为河西绿博园站,终点为长途汽车东站。</p>
到此,第一个小练习就完成了,通过这个例子,我知道了HTML的几个关键部分的含义,认识了不同部分中的不同标记,当一个小网页做出来的时候,还是挺有成就感的,这让我有了深入学习下去的动力。
下面我把整个HTML文件语言分享一下,只需在桌面新建一个文本文档,将后缀名改为html,然后把下面的内容复制粘贴即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="hjf" content="nimabi" />
<title>新闻抢先看</title>
</head>
<body>
<h3 align="center"><font face="微软雅黑">南京地铁9号线启动地质勘探 为全线动工做准备</font></h3>
<p align="center"><font color="#979797" size="2">2017-06-23 14:21<font color="blue"> 中国江苏网 </font></font></p>
<hr size="2" color="#CCCCCC" />
<p><font color="blue"> 新浪江苏 </font>讯 日前,工人在四平路金川河进行地质勘探。目前,地铁9号线启动沿线的地质勘探,为全线动工做准备。9号线一期起点为河西绿博园站,终点为长途汽车东站。</p>
</body>
</html>