html快速基础入门详解

Posted ghostwritten

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html快速基础入门详解相关的知识，希望对你有一定的参考价值。


文章目录


1. 前端背景

网页主要由三部分组成：结 构 （Structure）、表现 （Presentation）和行为 （Behavior）。。对应的标准 也分三方面：结构化标准语言主要包括Xhtml和XML，表现标准语言主要包括CSS， 行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。本节我们主要讲解 ​​HTML、CSS、javascript、Xpath​​和JSON等5个部分。

2. html

什么是HTML标记语言？HTML不是编程语言，是一种表示网页信息的符号标记语 言。标记语言是一套标记，HTML使用标记来描述网页。Web浏览器的作用是读取 HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标记，而是使用标记 来解释页面的内容。HTML语言的特点包括：

  • ·可以设置文本的格式，比如标题、字号、文本颜色、段落，等等。
  • ·可以创建列表。
  • ·可以插入图像和媒体。
  • ·可以建立表格。
  • ·超链接，可以使用鼠标点击超链接来实现页面之间的跳转。

2.1 HTML的基本结构

下面从HTML的基本结构、文档设置标记、图像标记、表格和超链接五个方面讲
解。
html快速基础入门详解_分割线

从谷歌首页的源代码中可以分析出HTML的基本结构：

·<html>内容</html>：HTML文档是由<html></html>包裹，这是HTML文档的 文档标记，也称为HTML开始标记。这对标记分别位于网页的最前端和最后端， <html>在最前端表示网页的开始，</html>在最后端表示网页的结束。
·<head>内容</head>：HTML文件头标记，也称为HTML头信息开始标记。用来包 含文件的基本信息，比如网页的标题、关键字，在<head></head>内可以放 <title></title>、<meta></meta>、<style></style>等标记。注意：在 <head></head>标记内的内容不会在浏览器中显示。

·<title>内容</title>：HTML文件标题标记。网页的“主题”，显示在浏览器的窗口的左上边。
·<body>内容</body>：<body>...</body>是网页的主体部分，在此标记之间 可以包含如<p></p>、<h1></h1>、<br>、<hr>等等标记，正是由这些内容组成了 我们所看见的网页。
·<meta>内容</meta>：页面的元信息（meta-information）。提供有关页面 的元信息，比如针对搜索引擎和更新频度的描述和关键词。注意meta标记必须放在 head元素里面。

2.2 文档设置标记

文档设置标记分为格式标记和文本标记。下面通过一个标准的HTML文档对格式 标记进行讲解，文档如下所示：

<html>     
  <head>        
  <title>Python爬虫开发与项目实战</title>        
  <meta charset="UTF-8">     
  </head>    
   <body>     文档设置标记<br>     
   <p>这是段落。</p>     
   <p>这是段落。</p>     
   <p>这是段落。</p>     
   <hr>     
   <center>居中标记1</center>     
   <center>居中标记2</center>    
    <hr>     
    <pre>     [00:00](music)     [00:28]你我皆凡人，生在人世间；     [00:35]终日奔波苦，一刻不得闲；     [00:43]既然不是仙，难免有杂念；
     </pre>     
     <hr>     
     <p>     [00:00](music)     [00:28]你我皆凡人，生在人世间；     [00:35]终日奔波苦，一刻不得闲；     [00:43]既然不是仙，难免有杂念；     
     </p>     
     <hr>     
     <br>     
     <ul>     
     <li>Coffee</li>     
     <li>Milk</li>     
     </ul>     
     <ol type="A">     
     <li>Coffee</li>     
     <li>Milk</li>     
     </ol>        
     <dl>        
     <dt>计算机</dt>        
     <dd>用来计算的仪器 ... ...</dd>        
     <dt>显示器</dt>        
     <dd>以视觉方式显示信息的装置 ... ...</dd>        
     </dl>        
     <div >                
     <h3>这是标题</h3>                
     <p>这是段落。</p>     
     </div>     
     </body>    
     </html>

运行效果图

html快速基础入门详解_python爬虫_02
格式标记包括：

·<br>：强制换行标记。让后面的文字、图片、表格等等，显示在下一行。
·<p>：换段落标记。换段落，由于多个空格和回车在HTML中会被等效为一个空 格，所以HTML中要换段落就要用<p>，<p>段落中也可以包含<p>段落。例如： <p>This is a paragraph.</p>。
·<center>：居中对齐标记。让段落或者是文字相对于父标记居中显示。
·<pre>：预格式化标记。保留预先编排好的格式，常用来定义计算机源代码。
和<p>进行一下对比，就可以理解。
·<li>：列表项目标记。每一个列表使用一个<li>标记，可用在有序列表 （<ol>）和无序列表（<ul>）中。
·<ul>：无序列表标记。<ul>声明这个列表没有序号。
·<ol>：有序列表标记。可以显示特定的一些顺序。有序列表的type属性 值“1”表示阿拉伯数字1.2.3等等；默认type属性值“A”表示大小字母A、B、C等 等；上面的程序使用属性“a”，这表示小写字母a、b、c等等；“Ⅰ”表示大写罗 马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等；“ⅰ”表示小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等。注 意：列表可以进行嵌套。
·<dl><dt><dd>：定义型列表。对列表条目进行简短说明。
·<hr>：水平分割线标记。可以用作段落之间的分割线。
·<div>：分区显示标记，也称为层标记。常用来编排一大段的HTML段落，也可 以用于将表格式化，和<p>很相似，可以多层嵌套使用。

接下来通过一个HTML文档对文本标记进行讲解，文档如下所示：

<html>     
  <head>        
  <title>Python爬虫开发与项目实战</title>        
  <meta charset="UTF-8">     
  </head>     
  <body>     Hn标题标记---->>     
  <br>        
  <h1>Python爬虫</h1>        
  <h2>Python爬虫</h2>
    <h3>Python爬虫</h3>        
    <h4>Python爬虫</h4>        
    <h5>Python爬虫</h5>        
    <h6>Python爬虫</h6>     font标记---->>     
    <font size="1">Python爬虫</font>     
    <font size="3">Python爬虫</font>     
    <font size="7">Python爬虫</font>     
    <font size="7" color="red" face="微软雅黑">Python爬虫</font>     
    <font size="7" color="red" face="宋体">Python爬虫</font>     
    <font size="7" color="red" face="新细明体">Python爬虫</font>     
    <br>     B标记加粗---->>     
    <b>Python爬虫</b>     
    <br>     i标记斜体---->>     
    <i>Python爬虫</i>     
    <br>     sub下标标记---->>     
    2<sub>2</sub>     
    <br>     sup上标标记---->>     
    2<sup>2</sup>     <br>     引用标记---->>     
    <cite>Python爬虫</cite>     
    <br>     em标记表示强调，显示为斜体---->>     
    <em>Python爬虫</em>     
    <br>     strong标记表示强调，加粗显示---->>     
    <strong>Python爬虫</strong>     
    <br>     small标记，可以显示小一号字体，可以嵌套使用---->>     
    <small>Python爬虫</small>     
    <small><small>Python爬虫</small></small>     
    <small><small><small>Python爬虫</small></small></small>     
    <br>     big标记，显示大一号的字体---->>     
    <big>Python爬虫</big>
 <big><big>Python爬虫</big></big>     
 <br>     u标记是显示下划线---->>     
 <big><big><big><u>Python爬虫</u></big></big></big>     
 <br>     
 </body>     
 </html>


Python爬虫开发与项目实战 Hn标题标记---->>


Python爬虫

Python爬虫

Python爬虫

Python爬虫

Python爬虫
Python爬虫

font标记---->>

Python爬虫 Python爬虫 Python爬虫 Python爬虫 Python爬虫 Python爬虫


B标记加粗---->>

Python爬虫


i标记斜体---->>

Python爬虫


sub下标标记---->> 2

2

sup上标标记---->> 2

2

引用标记---->>

Python爬虫


em标记表示强调，显示为斜体---->>

Python爬虫


strong标记表示强调，加粗显示---->>

Python爬虫


small标记，可以显示小一号字体，可以嵌套使用---->>

Python爬虫 Python爬虫 Python爬虫


big标记，显示大一号的字体---->>

Python爬虫 Python爬虫


u标记是显示下划线---->>

Python爬虫


其中文本标记包括：

·<hn>：标题标记。共有6个级别，n的范围为1～6，不同级别对应不同显示大小 的标题，h1最大，h6最小。
·<font>：字体设置标记。用来设置字体的格式，一般有三个常用属性： size（字体大小），<font size=“14px”>；color（颜色），<font color=“red”>；face（字体），<font face=“微软雅黑”>。
·<b>：粗字体标记。
·<i>：斜字体标记。
·<sub>：文字下标字体标记。
·<sup>：文字上标字体标记。
·<tt>：打印机字体标记。
·<cite>：引用方式的字体，通常是斜体。
·<em>：表示强调，通常显示为斜体字。
·<strong>：表示强调，通常显示为粗体字。
·<small>：小型字体标记。
·<big>：大型字体标记。
·<u>：下划线字体标记。

2.3 图像标记

<img>称为图像标记，用来在网页中显示图像。使用方法为：<img src=“路
径/文件名.图片格式”width=“属性值”height=“属性值”border=“属性 值”alt=“属性值”>。<img>标记主要包括以下属性：
·src属性用来指定我们要加载的图片的路径、图片的名称以及图片格式。
·width属性用来指定图片的宽度，单位为px、em、cm、mm。
·height属性用来指定图片的高度，单位为px、em、cm、mm。
·border属性用来指定图片的边框宽度，单位为px、em、cm、mm。

·alt属性有三个作用：

  • 1.当网页上的图片被加载完成后，鼠标移动到上面去， 会显示这个图片指定的属性文字；
  • 2.如果图像没有下载或者加载失败，会用文字来 代替图像显示；
  • 3.搜索引擎可以通过这个属性的文字来抓取图片。

我们可以在浏览器上访问博客园首页，对博客园首页的图片进行审查，就可以 看到的img标记的使用方法，如图2-5所示。
html快速基础入门详解_html_03
注意：

<img>为单标记，不需要使用</img>闭合。在加载图像文件的时 候，文件的路径、文件名或者文件格式错误，将无法加载图片。

2.4 表格

表格的基本结构包括​​<table>、<caption>、<tr>、<td>和<th>​​等标记。

标记的基本格式为 

<table属性1=“属性值1”属性2=“属性值 2”......>表格内容</table>

table标记有以下常见属性：

  • ​​width​​属性：表示表格的宽度，它的值可以是像素（px）也可以是父级元素的 百分比（%）。
  • ​​height​​属性：表示表格的高度，它的值可以是像素（px）也可以是父级元素的 百分比（%）。
  • ​​border​​属性：表示表格外边框的宽度。
  • ​​align​​属性用来表示表格的显示位置。left居左显示，center居中显示， right居右显示。
  • ​​cellspacing​​属性：单元格之间的间距，默认是2px，单位为像素。
  • ​​cellpadding​​属性：单元格内容与单元格边框的显示距离，单位为像素。
  • ·​​frame​​​属性：用来控制表格边框最外层的四条线框。​​void​​​（默认值）表示无边框；​​above​​​表示仅顶部有边框；​​below​​​表示仅有底部边框；​​hsides​​​表示仅有顶部边框和底部边框；​​lhs​​​表示仅有左侧边框；​​rhs​​​表示仅有右侧边框；​​vsides​​​表示仅有左右 侧边框；​​border​​表示包含全部4个边框。
  • ​​·rules​​​属性：用来控制是否显示以及如何显示单元格之间的分割线。属性值​​none​​​（默认值）表示无分割线；​​all​​​表示包括所有分割线；​​rows​​​表示仅有行分割线；​​clos​​​表示仅有列分割线；​​groups​​表示仅在行组和列组之间有分割线。

​​<caption>​​标记用于在表格中使用标题。属性的插入位置，直接位 于

属性之后，表格行之前。

​​<caption>​​标记中align属性可以取四个 值：

top表示标题放在表格的上部；
bottom表示标题放在表格的下部；
left表示标 题放在表格的左部；
right表示标题放在表格的右部。

​​<tr>​​标记用来定义表格的行，对于每一个表格行，都是由一对…标 记表示，每一行标记内可以嵌套多个或者标记。标记中的常见属 性包括：

  • ·bgcolor属性用来设置背景颜色，格式为bgcolor=“颜色值”。
  • ·align属性用来设置垂直方向对齐方式，格式为align=“值”。值为bottom
    时，表示靠顶端对齐；值为top时，表示靠底部对齐；值为middle时，表示居中对 齐。
  • ·valign属性用来设置水平方向对齐方式，格式为valign=“值”。值为left
    时，表示靠左对齐；值为right时，表示靠右对齐；值为center时，表示居中对 齐。

​​<td>和<th>​​都是单元格的标记，其必须嵌套在标记内，成对出现。是 表头标记，通常位于首行或者首列，中的文字默认会被加粗，而不会。 是数据标记，表示该单元格的具体数据。和两者的标记属性都是一样 的，常用属性如下：

·bgcolor设置单元格背景。
·align设置单元格对齐方式。
·valign设置单元格垂直对齐方式。
·width设置单元格宽度。
·height设置单元格高度。
·rowspan设置单元格所占行数。
·colspan设置单元格所占列数。

下面通过一个HTML文档来演示表格的使用，文档如下：

<html>     
 <head>       
 <title>学生信息表</title>        
 <meta charset="UTF-8">     
 </head>      
 <body>        
 <table width="960" align="center" border="1" rules="all" cellpadding="15">                
 <tr>                        
 <th>学号</th>                       
 <th>班级</th>                        
 <th>姓名</th>                        
 <th>年龄</th>
 <th>籍贯</th>                     
 </tr>                
  <tr align="center">                        
  <td>1500001</td>                        
  <td>(1)班web 开发基础php 开发基础快速入门 -PHP程序符号标记和程序注释的使用及空白符详解


 web 开发基础php 开发基础快速入门 -PHP常量详解


 PHP基础入门详解世界上最好用的编程语言


 快速入门！详解 Angular2 路由的分类及使用！


 Spring 事务快速入门详解


 Markdown基础入门