HTML==小试牛刀

怼烎@ 2022-06-13 02:19 183阅读 0赞

前段时间一直在做单片机的项目，再加上一个接一个的期末考试，一直没有时间去学习一些新的东西。Linux网络爬虫做了一半卡住了，感觉对HTML和HTTP那部分很不熟悉，只晓得http类型的url，对于href和其他类型的一窍不通，根本不知道怎么分析通过http获得的网页源码，怎么去提取其中的url。

于是，带着疑惑，我开始去HTML试试水了，看看HTML到底是一些什么东西，有什么神奇之处。去图书馆借了两本关于网页设计与制作的书籍，开始了我的啃书之旅了。

人都说，学习程序最忌讳只看书不练习。所以，看了一会，我便忍不住开始小试牛刀了。

首先看一下效果图：

![SouthEast][]

这是一个非常简单的小例子，只有两三个部分。首先是<!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>标记位于 <!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 />：

设置字符集

其中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重要性递减。其基本语法：

举例：

<h3 align="center"><font face="微软雅黑">南京地铁9号线启动地质勘探 为全线动工做准备</font></h3>

<p>段落标记：

<p>标记用来定义段落，其基本语法：

align属性为<p>标记的可选属性，可以设置文本对齐方式。

<font>文本样式标记：

HTML提供了文本样式标记<font>，用来控制网页中文本的字体、字号和颜色。其基本语法：

<table>  &lt;font&gt;标记的常用属性  
 <tbody> 
  <tr> 
   <td>属性名</td> 
   <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 含义</td> 
  </tr> 
  <tr> 
   <td>face</td> 
   <td>设置文字字体，例如微软雅黑、黑体、宋体等</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>设置文字大小，可以取1到7之间的整数值</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>设置文字颜色</td> 
  </tr> 
 </tbody> 
</table>

<hr />水平线标记：

<hr />是单标记，在网页中输入一个<hr />，就添加了一条默认样式的水平线。基本用法：

<table>  &lt;hr /&gt;标记的常用属性  
 <tbody> 
  <tr> 
   <td>属性名</td> 
   <td>含义</td> 
   <td>属性值</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>设置水平线的对齐方式</td> 
   <td>可以选择left、right、center三种值，默认为center，居中对齐</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>设置水平线的粗细</td> 
   <td>以像素为单位，默认2像素</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>设置水平线的颜色</td> 
   <td>可以用颜色名称、十六进制#RGB、rgb（r,g,b）</td> 
  </tr> 
  <tr> 
   <td>width</td> 
   <td>设置水平线的宽度</td> 
   <td>可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%</td> 
  </tr> 
 </tbody> 
</table>

使用案例：

<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>

[SouthEast]: /images/20220613/cd329e6a043740b28a053521b37b5dec.png