python学习笔记14--HTML、CSS、页面布局
一、HTML概述
1、什么是HTML?
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2、HTML 标签
- HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
3、HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>
4、HTML 结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> #设置网页编码为UTF-8 <title>Title</title> #设置网页标题，将会显示在网页标签上 </head> <body> </body> </html>
DOCTYPE 声明了文档类型
<html></html>这对标签中是html网页所有代码
<head></head>这对标签并不会在页面中显示出来，其主要是做一些网页设置项，如编码，外链css，标题，网页描述等
<body></body>这对标签中的内容会显示在页面中
二、HTML标签
1、head标签中的标签
（1）meta标签
<meta http-equiv="Refresh" content="3"> #3秒后自动刷新 <meta http-equiv="Refresh" content="3;url=http://www.baidu.com"> #3秒后自动跳转到url所设定的地址 <meta name="keywords" content="word1,word2"> #关键字，用于被搜索引擎收录 <meta name="description" content="描述信息"> #网站描述信息 <meta http-equiv="X-UA-Compatible" content="IE=IE10;IE9;IE8;IE7" /> #兼容性设置，从高到低兼容IE10，9，8，7以上的标准
（2）link标签
<link rel="stylesheet" type="text/css" href=""> #外链css，href中写css文件的路径 <link rel="shortcut icon" href=""> #title图标，href中写图标文件路径
（3）stytle、script标签
<scrip></scrip> #内嵌js代码 <style></style> #内嵌css代码
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script> #外联js文件
2、body标签中的标签
（1）标签分类
所有的标签分为两类，一类是块级标签，一种是行内标签。
块级标签：标签单独占一行
行内标签：标签中内容有多长，就占多长
（2）特殊符号
html中特殊符号需要使用代码来标识
| ´ | ´ | © | © | > | > | µ | µ | ® | ® |
| & | & | ° | ° | ¡ | ¡ | | » | » | |
| ¦ | ¦ | ÷ | ÷ | ¿ | ¿ | ¬ | ¬ | § | § |
| • | • | ½ | ½ | « | « | ¶ | ¶ | ¨ | ¨ |
| ¸ | ¸ | ¼ | ¼ | < | < | ± | ± | × | × |
| ¢ | ¢ | ¾ | ¾ | ¯ | ¯ | “ | " | ™ | ™ |
| € | € | £ | £ | ¥ | ¥ | ||||
| „ | „ | … | … | · | · | › | › | ª | ª |
| ˆ | ˆ | “ | “ | — | — | ’ | ’ | º | º |
| † | † | ‹ | ‹ | – | – | ‚ | ‚ | ” | ” |
| ‡ | ‡ | ‘ | ‘ | ‰ | ‰ | ­ | ˜ | ˜ | |
| ≈ | ≈ | ⁄ | ⁄ | ← | ← | ∂ | ∂ | ♠ | ♠ |
| ∩ | ∩ | ≥ | ≥ | ≤ | ≤ | ″ | ″ | ∑ | ∑ |
| ♣ | ♣ | ↔ | ↔ | ◊ | ◊ | ′ | ′ | ↑ | ↑ |
| ↓ | ↓ | ♥ | ♥ | − | − | ∏ | ∏ | | ‍ |
| ♦ | ♦ | ∞ | ∞ | ≠ | ≠ | √ | √ | | ‌ |
| ≡ | ≡ | ∫ | ∫ | ‾ | ‾ | → | → | ||
| α | α | η | η | μ | μ | π | π | θ | θ |
| β | β | γ | γ | ν | ν | ψ | ψ | υ | υ |
| χ | χ | ι | ι | ω | ω | ρ | ρ | ξ | ξ |
| δ | δ | κ | κ | ο | ο | σ | σ | ζ | ζ |
| ε | ε | λ | λ | φ | φ | τ | τ | ||
| Α | Α | Η | Η | Μ | Μ | Π | Π | Θ | Θ |
| Β | Β | Γ | Γ | Ν | Ν | Ψ | Ψ | Υ | Υ |
| Χ | Χ | Ι | Ι | Ω | Ω | Ρ | Ρ | Ξ | Ξ |
| Δ | Δ | Κ | Κ | Ο | Ο | Σ | Σ | Ζ | Ζ |
| Ε | Ε | Λ | Λ | Φ | Φ | Τ | Τ | ς | ς |
| HTML 原代码 | 显示结果 | 描述 |
| < | < | 小于号或显示标记 |
| > | > | 大于号或显示标记 |
| & | & | 可用于显示其它特殊字符 |
| " | “ | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
|   | 半个空白位 | |
|   | 一个空白位 | |
| | 不断行的空白 |
（3）各种标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>这是一个段落</p> <br /><!-- 这是一个换行标签 --> <h1>这是H1标签</h1> <h2>这是H2标签</h2> <h3>这是H3标签</h3> <h4>这是H4标签</h4> <h5>这是H5标签</h5> <h6>这是H6标签</h6> <span>这是一个span标签</span><span>这又是一个span标签</span> <div>这是一个div标签</div><div>这又是一个div标签</div> </body> </html>
（4）a标签
a标签标示的是一个超链接，其有两种作用
超链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.baidu.com">这是一个本页面中跳转的超链接</a> <a href="http://www.baidu.com" target="_blank">这是一个新页面中打开的超链接</a> <a href="#">这是一个空连接</a> </body> </html>
锚点:点击锚点时，页面会跳转到锚点所指的部分，设置锚点的格式为href="#id"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <div id="i1" style="height: 500px;">第一章内容</div> <a href="#top">回到顶部</a> <p></p> <div id="i2" style="height: 500px;">第二章内容</div> <a href="#top">回到顶部</a> </body> </html>
（5）img标签，列表标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="./html/car.jpg" alt="这是一个图片" title="鼠标放置时显示的文字"> <ul> <li>无序列表ul第一项</li> <li>无序列表ul第二项</li> <li>无序列表ul第三项</li> </ul> <ol> <li>有序列表ol第一项</li> <li>有序列表ol第二项</li> <li>有序列表ol第三项</li> </ol> <dl> <dt>标题1</dt> <dd>项目1</dd> <dd>项目2</dd> <dt>标题2</dt> <dd>项目1</dd> <dd>项目2</dd> </dl> </body> </html>
（6）form、input、select、textarea标签
input标签的type类型：
type="text":文本框
type="password"：密码文本框
type="button"：按钮
type="submit"：提交按钮
type="radio"：单选框
type="checkbox"：多选框
type="file"：上传文件
type="reset"：重置按钮
<form action="https://www.sogou.com/web" name="query"> #action属性表示将表单数据提交到后台的文件或url，name表示提交数据时的变量名 <input type="text" name="username" value="用户名" /> <input type="password" name="pwd" /> <input type="button" value="按钮" /> <input type="submit" value="提交" /> <P>单选</P> 男:<input type="radio" name="sex" value="1" checked /> #checked表示默认选中，radio表示单选，单选项需有相同name值 女:<input type="radio" name="sex" value="0" /> <p>多选</p> 篮球:<input type="checkbox" name="favor" value="1" /> #checkbox表示多选， 足球:<input type="checkbox" name="favor" value="2" /> 台球:<input type="checkbox" name="favor" value="3" /> 网球:<input type="checkbox" name="favor" value="4" /> 排球:<input type="checkbox" name="favor" value="5" /> <p>上传文件</p> <input type="file" /> #file表示上传文件，其需要在form中设置属性enctype="multipart/form-data" <p>重置</p> <input type="reset" value="重置" /> #重置按钮，将所有选项重置为默认值 </form>
<form action="https://www.sogou.com/web" name="query"> <textarea cols="30" rows="20">默认值</textarea> #多行文本框 <p>城市</p> <select name="province"> #下拉列表 <option value="1" selected="selected">山西</option> #选项，selected表示默认选中 <option value="2">山东</option> <option value="3">湖南</option> <option value="4">湖北</option> </select> <select name="city" multiple="multiple" size="2"> #多选下拉列表，size表示默认显示几个选项，multiple表示多选下拉列表 <option value="1" selected="selected">太原</option> <option value="2">济南</option> <option value="3">长沙</option> <option value="4">武汉</option> </select> <select name="area"> <optgroup label="北京"> #分组下拉列表分组名，label值是分组名 <option value="1">海淀区</option> <option value="2">昌平区</option> <option value="3">朝阳区</option> </optgroup> <optgroup label="太原"> <option value="1">迎泽区</option> <option value="2">小店区</option> <option value="3">晋源区</option> </optgroup> </select> </form>
（7）table标签
<table border="1"> #表格标签，border="1"表示显示边框 <tr> #行 <td>第一行第一列</td> #列 <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> </table> <br> <br> <table border="1"> <thead> #表头 <tr> <td>第一列</td> <td>第二列</td> <td>第三列</td> </tr> </thead> <tbody> #表身 <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> </tr> </tbody> </table> <br> <br> <table border="1"> <tr> <td colspan="2">1</td> #colspan设置该单元格占几列 <td>2</td> <td>3</td> </tr> <tr> <td rowspan="3">1</td> #rowspan设置该单元格占几行 <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table>
（8）label标签
label标签和input标签联合使用，当点击label标签后，对应的input会获取输入光标
<form> <label for="te">用户名</label> <input type="text" id="te"> </form>
