HTML==小试牛刀

来源：互联网发布：网络三字经全文解释编辑：程序博客网时间：2024/06/05 09:03

　　前段时间一直在做单片机的项目，再加上一个接一个的期末考试，一直没有时间去学习一些新的东西。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>

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

<hr />水平线标记：

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

阅读全文

0 0