HTML的基本结构及常用标签介绍
2017-05-18 16:30
651 查看
学习Python爬虫时需要解析网页,需要一些网页制作知识,所以准备学习前端知识。
1.基本结构
HTML是一种文本标记语言,其基本结构如下:
基本的标签包括html(必须有),head(网页名,网页信息,网页编码),body(其他所有网页中显示的内容在此)
2.常用格式标签
<br>:强制换行。文本过长时网页会自动换行,但这个标签可实现在任意需要位置换行,省略形式<br/>
<p>:段落。重新建立一个段落时用的标签
<center>:居中标签。将标签内容居中
<pre>:预格式标签。将标签中内容按原格式输出
<li>:列表标签
<ul>:无序化标签
<ol>:有序化标签
<hr>:分割线
<div>:<div>可定义一个区域,将其他元素聚合,它可用于组合其他 HTML 元素的容器
例:
![](http://i4.buimg.com/588926/3676bdbae8369900.png)
3.常用文本格式
<hn>:标题h1-h6代表不同级别
<font>:字体样式。包括大小size,颜色color,字体face
<b>:加粗
<i>:斜体
<sup>:下标
<sub>:上标
<cite>:引用方式的字体,通常为斜体
<u>:加下划线
<strong>:强调
例:
1.基本结构
HTML是一种文本标记语言,其基本结构如下:
<html> <head> <title>testPage</title> <meta charset = "utf-8"> <meta name = "keywords" content = "My name,Jhon"> <!--meta标签给出网页的属性信息authur/keywords/description/others--> </head> <!--<body bgcolor = "green" text = "blue">--> <!--body标签bgcolor/text/link/vlink/alink--> <body link = "blue" vlink = "red" alink = "green"> <h1>This is a testPage!</h1> <a href = "http://www.baidu.com">百度</a> </body> </html>
基本的标签包括html(必须有),head(网页名,网页信息,网页编码),body(其他所有网页中显示的内容在此)
2.常用格式标签
<br>:强制换行。文本过长时网页会自动换行,但这个标签可实现在任意需要位置换行,省略形式<br/>
<p>:段落。重新建立一个段落时用的标签
<center>:居中标签。将标签内容居中
<pre>:预格式标签。将标签中内容按原格式输出
<li>:列表标签
<ul>:无序化标签
<ol>:有序化标签
<hr>:分割线
<div>:<div>可定义一个区域,将其他元素聚合,它可用于组合其他 HTML 元素的容器
例:
<html> <head> <title>testPage</title> <meta charset = "utf-8"> <meta name = "keywords" content = "My name,Jhon"> <!--meta标签给出网页的属性信息authur/keywords /description/others--> </head> <!--<body bgcolor = "green" text = "blue">--> <!--body标签bgcolor/text/link/vlink/alink--> <body link = "blue" vlink = "red" alink = "green"> This is a testPage!<br/>换行<br/> <hr></hr> <center>居中 显示</center> <center><pre>居中 显示</pre></center> <hr><hr><!--分界线--> <li>列表1</li> <li>列表2</li> <li>列表3</li> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> <ol type = "A" ><!--type可用于指定序号类型(1-数字,A--大写字母,a--小写字母,罗马大写 Ⅰ,罗马小写ⅰ) --> <li>列表1</li> <li value = "5">列表2</li> <li>列表3</li> < b3bf span class="hljs-tag"></ol> <ol type = "1"><!--type可用于指定序号类型(1-数字,A--大写字母,a--小写字母,罗马大写 Ⅰ,罗马小写ⅰ)--> <li>列表1</li> <li value = "5">列表2</li><!--value指定序列值--> <li>列表3</li> </ol> <div> first <hr> second </div> <a href = "http://www.baidu.com">百度</a> </body> </html>
![](http://i4.buimg.com/588926/3676bdbae8369900.png)
3.常用文本格式
<hn>:标题h1-h6代表不同级别
<font>:字体样式。包括大小size,颜色color,字体face
<b>:加粗
<i>:斜体
<sup>:下标
<sub>:上标
<cite>:引用方式的字体,通常为斜体
<u>:加下划线
<strong>:强调
例:
<html> <head> <title>testPage</title> <meta charset = "utf-8"> <meta name = "keywords" content = "My name,Jhon"> <!--meta标签给出网页的属性信息authur/keywords/description/others--> </head> <!--<body bgcolor = "green" text = "blue">--> <!--body标签bgcolor/text/link/vlink/alink--> <body link = "blue" vlink = "red" alink = "green"> <h1>This is a title</h1> <h2>This is a title</h2> <h3>This is a title</h3> <h4>This is a title</h4> <h5>This is a title</h5> <h6>This is a title</h6> This is a title <b>This is a title</b><i>This is a title</i> <br> 2<sup>2</sup> 2<sub>2</sub> <br> <cite>This is a title</cite> <br> <u>This is a title</u> <br> <strong>This is a title</strong> <font size = "5" color = "blue" face = "微软雅黑">This is a title</font> </body> </html>
![](http://i4.buimg.com/588926/b2caf0a87ec64bd9.png)
相关文章推荐
- 介绍几个不常用的HTML标签
- web开发之简单常用的HTML标签使用介绍
- 常用HTML标签详细介绍
- HTML学习笔记:HTML基本标签属性、常用标记
- 入门:HTML的基本标签和属性简单介绍
- HTML一些基本的常用标签
- HTML结构标签介绍
- HTML标签语法与文件的基本结构
- html常用标签的介绍和使用
- JavaScript入门之一:HTML常用标签、Js基本语法
- (教学思路 html一) HTML讲述介绍及基本结构
- HTML_01 常用基本标签
- HTML基本结构及标签
- HTML 参考手册 基本属性 常用标签
- HTML网页的META标签常用写法与功能介绍
- HTML:介绍几个不常用的HTML标签
- HTML基本格式及常用标签
- HTML常用标签介绍(下)
- HTML基本组成结构与标签的认识
- 前端学习第二章:认识html文件基本结构&认识head标签