HTML基础
HTML是Internet上网页最主要的表现技术。超文本标记语言的书写并不是很复杂，但是它的功能却很强大，在本身提供经典的UI标签时，还支持不同数据格式的文件嵌入，这使得HTML在网页制作上面的流行。
1.HTML介绍
HTML因为是文本语言，所以可以使用任何的编辑器进行编辑，只需要将文件以.html结尾命名即可。HTML的框架格式如下：
<!DOCTYPE html>
<html lang="en"> <!--顶层标记--> <head> <!--头标记--> <!--此处放置 标题、导航、登录等内容--> </head> <body> <!--体标记--> <!-此处放置 页面的主要内容--> </body> </html>
- HTML本身有尖括号书写的标记组成，如<html>,</br>等。通过上述代码，我们可以了解HTML语言的特性如下。
- 标记一般是成对出现的，如<html>内容</html>。
- 个别的内容没有标记时，则是由单个标记组成，如</br>。
- <!-- -->用于注释，另外标记之间是可以嵌套的，但是不可以交错。
- 标签有属性时，在尖括号中通过键值对的方式进行设置，如超链接标记的href属性设置的方法如下：
<a href="http://www.baidu.com">百度</a>
- 标记的本身不区分大小写。
- 浏览器一般忽略文件中的回车、空格符号，如果要显示空格和回车，需要使用特殊的符号来表达，一般常用的特殊符号以及释义如下表所示。
|
特殊字符 |
含义 |
显示结果 |
|
|
空格 |
|
|
< |
小于号 |
< |
|
> |
大于号 |
> |
|
& |
和 |
& |
|
" |
引号 |
“ |
|
£ |
英镑 |
£ |
|
¥ |
日元 |
¥ |
|
λ |
与号 |
λ |
|
© |
版权 |
© |
|
® |
注册商标 |
® |
|
™ |
商标 |
™ |
|
× |
乘号 |
x |
|
÷ |
除号 |
÷ |
|
∼ |
波浪号 |
~ |
|
∞ |
无限符号 |
∞ |
|
≠ |
不等于 |
≠ |
2.段落
HTML会忽略回车和换行符，所以需要使用特殊的标记来表示段落。段落的标记是<p>，<hr/>标签显示一条单行横线，<br/>表示的是换行。例如
<p>第一章 铁柱</p> <hr/> <p>第二章 窗前明月光，意识地上霜。举头望明月，地上鞋两双</p> <p>第三章 我安澜无敌，谁可杀我</p>
上述代码的显示效果如下图：
3.标题
HTML有特殊的标记用于显示标题，分别有6个标签用于显示标题，代码如下：
<h1>哈哈哈，我是标题h1</h1> <h2>哈哈哈，我是标题h2</h2> <h3>哈哈哈，我是标题h3</h3> <h4>哈哈哈，我是标题h4</h4> <h5>哈哈哈，我是标题h5</h5> <h6>哈哈哈，我是标题h6</h6>
代码的效果显示图如下：
4.字体格式
除了标题字体，HTML还允许对显示的格式进行更多风格的控制，常用的如下表所示。
|
标签、标记 |
描述 |
标签 |
描述 |
|
<b> |
粗体文字 |
<abbr> |
缩写 |
|
<big> |
大号字 |
<acronym> |
首字母大写 |
|
<em> |
重点文字 |
<address> |
地址 |
|
<i> |
斜体字 |
<bdo> |
可定义方向的文字 |
|
<small> |
小号字 |
<blockquote> |
长的引用 |
|
<strong> |
加重语气 |
<q> |
短的引用语 |
|
<sub> |
下标字 |
<cite> |
引用 |
|
<sup> |
标字 |
<dfn> |
一个定义项目 |
|
<ins> |
插入字 |
<tt> |
打字机代码 |
|
<del> |
删除字 |
<var> |
变量 |
5. 链接和图像
网页之间的链接是HTML的重要功能，链接功能使用标签a来实现，比如:
<a href="ttp://www.baidu.com" target="_self">百度</a>
上述代码中的a标签定义了两个属性，href属性设置的是跳转的URL，_self属性设置的是在什么窗口打开。
点击链接时除了点击文字，还可以点击图片。图片标记使用img标签来实现，例如：
<a href="http://www.baidu.com" target="_self"> <img src="D:\简历\wl.JPG" alt="百度"> </a>
<img>有两个常用的属性，src表示图片的url，可以是相对路径或者绝度路径。alt表示图片的显示文字。
6. 表格
HTML中的表格有2种作用：一种是显示真实的表结构和数据，另外一种是控制网页的布局。这两种方式都是通过table、tr、td、th这4中标签分别声明表格、表行、表单元、表头。
表格常用的属性有border,colspan,rowspan等，分别设置边框的宽度，跨行、列单元等。例如书写如下代码：
<h3>普通无边框表格</h3> <table> <tr> <td>1</td><td>2</td><td>2</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> </table>
<h3>带表头、边框、跨行列单元</h3> <table border="1"> <tr> <th>单元格1</th><th>单元格2</th><th>单元格2</th> </tr> <tr> <td rowspan="2">1</td><td>2</td><td>3</td> </tr> tr> <td colspan="2">45</td> </tr> </table>
代码的显示效果图如下。
7.列表
列表是常用的显示方式，HTML中的列表有以下3种。
- 无序列表：<ul>表示列表，<li>表示选项。
- 有序列表：<ol>表示列表，<li>表示选项。
- 定义列表：<dl>表示列表，<dt>表示被定义的词语，<dd>表示定义的描述。
实例如下：
<h3>三种列表的表达方式</h3> <table border="2" cellpadding="2",cellspace="2"> <tr> <th>无序列表</th><th>有序列表</th><th>定义列表</th> </tr> <tr> <td> <ul><li>python</li><li>C语言</li><li>C++</li><li>java</li></ul> </td><br/> <td> <ol><li>dog</li><li>cat</li><li>tiger</li><li>pig</li></ol> </td><br/> <td> <dl> <dt>华为</dt><dd>我喜欢</dd> <dt>苹果</dt><dd>没用过</dd> <dt>小米</dt><dd>雷布斯爱吹逼</dd> <dt>vivo</dt><dd>存在感低</dd> </dl> </td><br/> </tr> </table>
效果图如下所示：
8.颜色和背景
HTML的颜色有3种表达方式：16进制数字、RGB值或者颜色的名称。如设置页面的背景为红色，如下：
<body bgcolor="red"> <body bgcolor="rgb(255,0,1)"> <body bgcolor="#EF0002">
9.Flash及音视频播放
除了上述基本的页面呈现方式，HTML还支持视频、音频、flash等集成。我们可以使用<object>标签播放插入式的flash，如下：
<h5>flash播放</h5> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=""> <embed src="D:\简历\l.JPG" width="100" height="100"></embed> </object> <h5>音频播放</h5> <audio controls="controls"> <source src="D:\歌曲\1.mp3" type="audio/mp3" /> </audio> <h5>视频播放</h5> <video controls="controls"> <source src="samlp.mp4" width="100" height="100" type="video/mp4" /> </video>
效果显示图如下：
10.HTML表单
HTML表单用于从客户端收集用户在浏览器的输入，是HTML实现客户端和服务器交互的核心方法。作为连接客户端和服务器的纽带，HTML表单也是python中各个web框架编程都要用到的技术。它主要用<form>标签表达，其主要的内容由输入控件和提交控件组成，它的基本工作方式如下：
- 用户在浏览器中输入数据并且提交，输入的数据可以是文本，单选多选等。
- 浏览器将输入的数据封装到HTTP Body中并以POST的方式提交给服务器。
- 服务器收到请求后将结果Response给浏览器。
10.1 文本输入
HTML表单中的文本输入有单行文本、多行文本、密码框等，分别使用text、textarea、password表示，示例代码如下：
<table> <tr> <td>用户名:</td><td><input type="text" name="username"></td> <td>密 码:</td><td><input type="password" name="password"></td> </tr> <td colspan="2">备注:</td> </tr> <tr> <td colspan="4"><textarea name="comment" rows="5" cols="60"></textarea></td> </tr> </table>
效果图如下所示：
需要给每一个的输入控件设置一个不同的name属性，该属性用于在表单被提交到服务器后，使服务器识别各个输入控件。还可以使用rows和cols属性控制框的大小。
10.2 单项选择
单项选择有两种表达方式：单选按钮或者下拉列表，他们分别使用<input type=”radio”>、<select>表达。示例代码如下：
<h3>单选按钮</h3> <table> <tr> <td>性别：</td> <td>男性<input type="radio" checked="checked" name="Sex" value="男"></td> <td>女性<input type="radio" name="Sex" value="女"></td> </tr> </table> <h3>下拉列表</h3> <table> <tr> <td>学历：</td> <td colspan="2"> <select name="grade"> <option value="1">幼儿园</option> <option selected= "selected" value="2" >学前班</option> <option value="3">小学</option> <option value="4">中学</option> <option value="5">高中</option> <option value="6">大学</option> <option value="7">研究生</option> </select> </td> </tr> </table>
效果图如下图所示：通过在radio中设置check属性可以标识那一项被默认选择，option的selected属性有相同的作用。
10.3 多项选择
多项选择用复选框进行标识，相应的HTML标签是<input type=”checkbox”>，示例如下：
<table> <tr> <td rowspan="2">兴趣爱好：</td> <td>运动：<input type="checkbox" name="sport"></td> <td>电影：<input type="checkbox" name="moive"></td> <td>音乐：<input type="checkbox" name="music"></td> </tr> <tr> <td>编程：<input type="checkbox" name="biancheng"></td> <td>做饭：<input type="checkbox" name="cooking"></td> <td>旅游：<input type="checkbox" name="tour"></td> </tr> </table>
10.4 文件上传
HTML定义了标准的文件上传控件，相应的HTML标签是<input type=”file”>，示例如下：
<input type="file" name="pic" accept=".png,.jpg,.txt">
标签虽然简单，但是在浏览器中的功能却十分强大。通过其中的accept属性可以设置文件选择框中的文件刷选器。
10.5 边框和提交
HTML提供了边框控件，可以将所有的其它控件包含在一起，已形成好的视觉效果，边框控件的标签为<fieldset>。完成所有之后，只需要添加提交控件<submit>即可。表单的整体示例结构如下：
<fieldset> <legend>用户注册</legend> <!-- 此处放置所有的输入控件 --> <input type = "submit" value="注册"> </fieldset>
