HTML是一种标记语言,标记语言是一套标记,HTML用标记语言来描述网页。
1.HTML的基本结构:
1) <html> 内容 </html> : HTML 文档是由<html> </html>包裹,这是HTML文档的文档标记,也称为HTML开始标记。
2) <head> 内容 </head> : HTML 文件头标记,主要包含文件的基本信息,比如网页的标题、关键字,在内容部分可以放置<title> </title>, <meta> </meta>, <style> </style>等标记。该内容不会在浏览器中显示。
3) <title> 内容 </title> : HTML文件标题标记。网页的"主题",显示在浏览器窗口的左上边。
4) <body> 内容 </body> : 这是HTML文件的主体部分。主体部分的内容组成了我们所看到的网页。
5)<meta> 内容 </meta> : 页面的元信息。meta标记必须放在head里面。
例子:
<html>
<head>
<title> Python 基本结构 </title>
</head>
<body>
hello HTML!
</body>
</html>
2.HTML的格式标记:
1) <br> : 强制换行标记
2) <p> : 换段落标记。<p> 内容 </p>
3) <center> : 居中对齐标记。
4) <pre> : 预格式化标记。保留预先编排好的格式,常用来定义计算机源代码。
5) <li> : 列表项目标记。
6) <ol> : 无序列表标记。
7) <ul> : 有序列表标记。可以显示特定的一些序列,有序列表的type属性为“1”时表示阿拉伯数字1,2,3...,有序列表的type属性为“A”时表示阿拉伯数字A,B,C...
8) <dl>、<dt>、<dd> : 定义型列表
9) <hr> : 水平分割线。可以用在段落之间
10) <div> : 分区显示标记,常用来编排一大段的HTML段落。
例子:
<html>
<head>
<title> HTML 格式标记 </title>
<body>
hello html!
<br>
<hr>
<p> p表示段落标记 </p>
<center> hello HTML (center是居中标记)</center>
<hr>
<pre>
<ul>
<li> HTML </li>
<li> Python </li>
<li> CSS </li>
<li> JS </li>
</ul>
<hr>
<ol type = "A">
<li> HTML </li>
<li> Python </li>
<li> CSS </li>
<li> JS </li>
</ol>
<hr>
<dl>
<dt> 红豆生南国 </dt>
<dd> 春来发几枝 </dd>
<dt> 愿君多采撷 </dt>
<dd> 此物最相思 </dd>
</dl>
<hr>
<div>
<h3> 第三级标题 </h3>
<p> Python爬虫 <p>
</div>
</body>
</html>
3. HTML的文本标记:
1) <h1>~<h6> : 标题标记。共有6个级别, 不同级别字体大小不一样。
2) <font> : 字体设置标记。可以设置size、color、face(字体)等。
3) <b> : 加粗标志。
4) <i> 斜体标记。
5) <sub> : 文字下标字体标记,
6) <sup> : 文字上标标记.
7) <tt> : 打印机字体标记.
<html>
<head>
<title> 学生信息 </title>
</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> 150001 </td>
<td> (1)班 </td>
<td> 张三 </td>
<td> 16 </td>
<td> 上海 </td>
</tr>
<tr align = "center">
<td> 150002 </td>
<td> (2)班 </td>
<td> 李四 </td>
<td> 15 </td>
<td bgcolor = "# ccc"> 浙江 </td>
</tr>
</table>
<br/>
<table width = "960" align = "center" border = "1" rules = "all" cellpadding = "15">
<tr bgcolor = "# ccc">
<th> 学号 </th>
<th> 班级 </th>
<th> 姓名 </th>
<th> 年龄 </th>
<th> 籍贯 </th>
</tr>
<tr align = "center">
<td> 150001 </td>
<td> (1)班 </td>
<td> 张三 </td>
<td> 16 </td>
<td bgcolor = "red"> <font color = "white"> 上海 </font> </td>
</tr>
<tr align = "center">
<td> 150002 </td>
<td> (2)班 </td>
<td> 李四 </td>
<td> 15 </td>
<td> 浙江 </td>
</tr>
</table>
</body>
</html>
13)<u> : 下滑字体标记。
例子:
<html>
<head>
<title> Python 开发与实践项目 </title>
</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 = "blue" face = "新细明体"> Python 爬虫 </font>
</br>
B 标记加粗----->>
<b> Python 爬虫 </b>
<br>
i 标记斜体----->>
<i> Python 爬虫 </i>
<br>
sub 标记下标------>>
3<sub> 2 </sub>
<br>
<sup> 标记上标------>>
4<sup> 5 </sup>
<br>
cite 引用标记----->>
<cite> Python 爬虫 </cite>
<br>
em 标记表示强调,显示为斜体---->>
<em> Python 爬虫 </em>
<br>
strong 标记表示强调,显示为加粗--->>
<strong> Python 爬虫 </strong>
<br>
small 标记可以显示小一号字体,可以嵌套使用---->>
<small> Python 爬虫 </small>
<small><small><small> Python 爬虫 </small></small></small>
<br>
big 标记可以显示大一号字体,可以嵌套使用--->>
<big> Python 爬虫 </big>
<br>
u标记表示显示下划线---->>
<big><big><big> Python 爬虫 </big></big></big>
<br>
</body>
4. HTML的图像标记:
1)使用方法:<img src = "路径/文件名.格式" width =“宽度”border = " 边框" height = "高度" alt = “属性”>。其中alt的作用为:当网页上的图片被加载完成后,鼠标移动到上面去,会显示这个图片指定的属性,如果图像没有被下载或者加载失败,会用文字来代替图像显示,搜索引擎可以通过这个属性的文字来抓取图片。
例子:
<html>
<head>
<title> 打开一幅图 </title>
</head>
<body>
<img src = "http://www.hitsz.edu.cn/UserFiles/banner/large/1510123543545.jpg" width = "300" height =
"140" />
</body>
</html>
5.HTML表格标记。
1)表格的基本结构包括:<table>、<caption>、<tr>、<td>、<th>等标记。
2)<table> :用法为<table width = "值"...>。其中的属性值有:width、height、border、align、cellspacing、cellpadding、frame、rules等。
3)<caption> ; 用于表格中的标题。
4) <tr> : 定义行。
5) <td>或者<th> : 定义元素,th会加粗,td不会加粗。
例子:
<html>
<head>
<title> 学生信息 </title>
</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> 150001 </td>
<td> (1)班 </td>
<td> 张三 </td>
<td> 16 </td>
<td> 上海 </td>
</tr>
<tr align = "center">
<td> 150002 </td>
<td> (2)班 </td>
<td> 李四 </td>
<td> 15 </td>
<td bgcolor = "# ccc"> 浙江 </td>
</tr>
</table>
<br/>
<table width = "960" align = "center" border = "1" rules = "all" cellpadding = "15">
<tr bgcolor = "# ccc">
<th> 学号 </th>
<th> 班级 </th>
<th> 姓名 </th>
<th> 年龄 </th>
<th> 籍贯 </th>
</tr>
<tr align = "center">
<td> 150001 </td>
<td> (1)班 </td>
<td> 张三 </td>
<td> 16 </td>
<td bgcolor = "red"> <font color = "white"> 上海 </font> </td>
</tr>
<tr align = "center">
<td> 150002 </td>
<td> (2)班 </td>
<td> 李四 </td>
<td> 15 </td>
<td> 浙江 </td>
</tr>
</table>
</body>
</html>