HTML 基础

1. HTML 定义

BS 模式：Browser、Server，即浏览器与服务器模式。

HTML（Htyper Markup Language）即超文本标记语言，超文本（页面内可以包含图片、链接、引用、甚至程序 ），标记语言：标记（标签）构成的语言。

网页

网页即 HTML文档，由浏览器解析并展示出来，网页分为：

• 静态网页：不能与用户交互
• 动态网页：HTML代码是由某个开发语言根据用户请求动态生成的

HTML 文档树

1.1 标签

由一对尖括号包裹的单词构成，标签由开始标签（如：<h1>）和结束标签(如：</h1>）以及中间标签包裹部分的标签体（如：<h1>一级标题</h1>）构成。

还有一些标签没有只有一个标签，这种标签称为 自闭标签，如：<br/>、<input/>、<hr/>、<img/> 等。

1.2 标签属性

标签属性通常用来描述标签属性的某个功能，有如下要求：

• 只能出现在开始标签或自闭标签中
• 以键值对形式出现，如：id=content
• 属性值必须用单或双引号包裹
• 当属性名与属性值相同时，可以只写属性名

1.3 <DOCTYPE html> 标签

浏览器解析渲染 HTML 页面有两种模式 ：BackCompat（怪异模式，默认，旧标准） 、CSS1Compa（标准模式，W3C 新标准）。

浏览器默认按照 BackCompat 模式渲染页面，如若要按照 W3C 新标准就需要在 HTML 文档最开头加上这一句：<DOCTYPE html> 。

2. head 标签

head 标签被称为头标签，不会呈现在页面上。

2.1 meta 标签

meta 标签有两个属性：http-equiv、name

name 属性

用于描述网页，属性值 content 中的内容主要便于搜索引擎机器人查询信息和分类信息用。

<meta name="keywords" content="python, html">   <!--keywords 为搜索关键词-->
<meta name="description" content="描述文本">   <!--description 为在搜索每个网页时的每个网页的描述信息-

http-equiv 属性

相当于 http 的文件头作用，向浏览器传回一些有用信息，以帮助精确地显示网页内容。

<!-- 用于刷新网页，2s后跳转到 Python 官网 -->
<meta http-equiv="Refresh" content="2; URL=https://python.org">
<!-- 编码类型 -->
<meta http-equiv="content-type" charset="utf8">
<!-- 兼容其他浏览器，如：IE6、Edge（IE=Edge） -->
<meta http-equiv="X-UA-Compatible" content="IE-EmulateIE6" />

2.2 其他 head 标签

<!-- 网页标题标签 -->
<titile>Python</title>

<!-- 引入外部 css 文件 -->
<link rel='stylesheet' type='text/css' href='xxx.css'>   

<!-- 在html文档中插入css文件 -->
<style type='text/css'></style>

<!-- 网页图标 -->
<link rel='icon' sizes='any' href='xxx.png'>

<!-- 插入外部 js 文件 -->
<script src='xxx.js'></script>

<!-- 在html文档中插入js文件 -->
<script type='text/javascript'></script>

3. 基本标签

3.1 hx 标签

hx 标签（h1...h6），用于表示 HTML 文档标题

<h1>一级标题</h1>

3.2 p 标签

段落标签，包裹的内容被换行，并且上下文间有空白

<p>春蚕到死丝方尽</p>
<p>蜡炬成灰泪始干</p>

3.3 b 和 strong 标签

b 和 strong 标签都是用于加粗文本，b 标签逐渐被淘汰

<b>文本加粗</b>
<strong>文件加粗</strong>

3.4 strike 标签

strike 标签为删除线标签

<strike style="background: black">删除线</strike>

3.5 em 标签

文本斜体

<em>斜体</em>

3.6 sup 和 sub 标签

上下角标签

2<sub>3</sub>
2<sup>3</sup>

3.7 br 标签

换行标签

<br />		<!--可不加 /-->

3.8 hr 标签

分隔线标签

<hr>

3.9 span 标签

为文本设置单独的样式，没有别的语义，与 div 类似，但是是内联标签

<span>文本</span>

<!--将 Python 设置为蓝色-->
<style type="text/css">
    span{color: blue}
</style>
<p><span>Python</span>是一种计算机程序设计语言。是一种动态的、面向对象的脚本语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。</p>

3.10 div 标签

div 标签没有特定的语义，一般作为容器包裹其他标签，也不会显示在网页上。

<div><p>xxx</p></div>

3.11 块级标签和内联标签

块级标签：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联标签：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

• 块级标签特点：
  • 独占一行
  • 宽度为容器的 100%，但可以设置宽度
  • 可以包含内联、其他块标签
  • hx、p、dt 标签不能包含块级标签，只能包含内联标签
• 内联标签特点：
  • 与其他标签在同一行
  • 宽度是其文本或图片本身的宽度，不可变
  • 只能包含文本、图片或其他内联标签

特殊字符：

&lt;		<    
&gt;		>
&quot;		"
&copy;		©
&reg;		®
&ensp;		一个空格

4. 图形标签 img

img 标签用于显示图片，其属性如下：

• src：图片路径
• alt：图片加载失败时显示的信息
• title：鼠标悬浮在图片上的提示信息
• width、height：图片宽度、高度，若只用一个会自动等比缩放

<img src='https://raw.githubusercontent.com/hj1933/img/master/img/AlanTuringNotebook_EN-AU7743633207_1920x1080.jpg' alt='加载失败' title='书籍'>

5. 超链接标签 a

a 标签为超链接标签，可以在页面内跳转（锚 #），以及跳转外部超链接，属性如下：

• href：超链接
• target：要跳转的框架，默认在当前页面打开，当设置为 _blank 时会在新的窗口打开
• name、id：锚（anchor）的名称

• ：锚，页面内定位，与 id 配合使用

<a href='https://www.python.org' target='_blank' name=>Python 官网</a>

<!--利用锚回到顶部-->
<p id='abc'>顶部</p>
<a href='#abc'></a>			

<!--图片链接-->
<a href='xxx.com'><img src='xxx.img'></a>

利用锚在页面内定位：

<div>
    <h2>HTML 教程</h2>
    <li><a href="#c1">第一章</a></li>
    <li><a href="#c1">第二章</a></li>
    <li><a href="#c1">第三章</a></li>

    <h3><a name="#c1">第一章 head标签</a></h3>
    <p>head标签为头标签</p>

    <h3><a name="#c1">第二章 图形标签</a></h3>
    <p>img标签为图形标签</p>

    <h3><a name="#c1">第三章 超链接标签</a></h3>
    <p>a标签为超链接标签</p>
</div>

点击第一章、第二章可以跳转到相应内容区：

6. 列表标签

列表分为无序列表（ul）、有序列表（ol）以及自定义列表（dl）。

无序列表

<ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ul>

有序列表

<ol>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
</ol>

自定义列表

<dl>	<!--定义列表-->
    <dt>1 head标签</dt>		<!--列表标题-->
    <dd>1.1 meta标签</dd>		<!--列表项-->
    <dd>1.2 title标签</dd>
</dl>

7. 表格标签 table

创建表格的六个标签元素：table、thead、tbody、tr、th、td

• thead：通常用来包裹表头，可省略
• tbody：用于包裹表格内容，可省略
• tr：表格的行
• th：表头
• td：表格的一个单元格，一行中包含几个 td，说明这一行中就有几列

table 标签属性

• border：表格边框，单位像素（px）
• cellpadding：内边距
• cellspacing：外边距
• width：宽度，单位（像素、百分比），一般用 CSS 来设置

td / tr 标签属性

• rowspan：合并单元格（行）
• colspan：合并单元格（列）

<tr>
    <td rowspan="2">1</td>		  <!--合并行-->
    <td colspan="2">电脑</td>		<!--合并列-->
    
</tr>

<tr>
    				<!--要删除一个单元格-->
    <td>手机</td>		
    <td>80000</td>
</tr>

Tips：合并单元格，需要先删除其中一个单元格，再将设置另外一个单元格的 rowsapn 属性

示例：

<table border="1px">
    <caption>表格标题</caption>		<!--设置表格标题-->
    <thead>
        <tr>
            <th>序号</th>
            <th>产品名称</th>
            <th>库存量</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td>电脑</td>
            <td>10000</td>
        </tr>

        <tr>
            <td>2</td>
            <td>手机</td>
            <td>80000</td>
        </tr>
    </tbody>
</table>

8. 表单标签 form

表单用于向服务器传输数据，包括input、textarea、select、fieldset 和 label 等元素。

表单属性

表单接收不同类型的用户输入，要提交给服务器的内容都包含在其中，属性如下：

• action：表单要提交到的地方，一般为服务器的一个程序，程序对表单提交过来的数据做相应处理，如：https://baidu.com/web
• method：表单提交的方式（post、get）
  • get：提交的键值对，放在地址栏中 URL 后面，安全性相对较差，对提交内容长度有限制
  • post：提交的键值对，不在地址栏，安全性相对较高，提交的内容长度无限制（在Chrome-检查-network-Form-Data 中可以查看）

<form action='http://127.0.0.1:8080' method='post'></form>

8.1 input 标签

input 属性和对应值：

• type
  • text：文本输入框
  • password：密码框
  • radio：单选框
  • checkbox：多选框
  • submit：提交按钮
  • botton：按钮
  • reset：重置
  • placeholder：提供可描述输入字段预期值的提示信息，即在框中显示预期值
  • readonly：readonly=readonly，只读
  • disable：disable=disable，禁用，对所有 input 都有用
  • file：提交文件（需要在 form 表单要加上属性 enctype="multipart/form-data" ）
• checked：当 checked=checked 时，该选项默认被选中
• name：表单提交项的键，是和服务器通讯时的名称，id 是浏览器端使用的名称，常用于 css 和 js
• value：表单提交项的值，不同的输入类型，value 属性用法也不同。

<form action='http://127.0.0.1:8080' method='post'>
		<p>姓名 <input type="text" name="username"></p>		
		<p>密码 <input type="password" name="password"></p>
		
		<p>爱好</p>
		<input type="checkbox" name="hobby" value="music">音乐
		<input type="checkbox" name="hobby" value="movie">电影

		<p>性别</p>
		<input type="radio" name="gender" value="male">男
		<input type="radio" name="gender" value="female">女

		<p><input type="submit" value="提交"></p>

	</form>

# 提交给服务端的数据格式类似于字典形式
{'username': 'xxx', 'password': 'xxx', 'hobby': ['music', 'movie'], 'gender': 'male'}

上传文件：必须是 post 形式，必须在 form 表单中添加 enctype="multipart/form-data" 属性

<form action='http://127.0.0.1:8080' method='post' enctype="multipart/form-data" >
    <input type="file" name="file">
</form>

服务端：
req.FILES 中

服务器端：

def index(request):
    print request.POST
    print request.GET
    print request.FILES
    for item in request.FILES:
        fileObj = request.FILES.get(item)
        f = open(fileObj.name, 'wb')
        iter_file = fileObj.chunks()
        for line in iter_file:
            f.write(line)
        f.close()
    return HttpResponse('ok')

8.2 select 标签

select 标签下拉列表，属性如下：

select 属性

• name：表单提交的键
• size：选项显示个数
• multiple：multiple，选择多个选项
• disabled：disabled，禁用下拉列表

option 标签属性

• value：表单提交项的值
• selected：selected 默认被选中

optgroup 为每一项添加分组

// select标签的 value 属性：value=1，等于选择第一个 option
爱好
<select name="hobby">
	<option value="music">音乐</option>
	<option value="movie">电影</option>
	<option value="moutain">爬山</option>
</select>	<br>

省份
<select name='province'>
	<optgroup label="湖南省">
		<option value="changsha">长沙</option>
		<option value="xiangtan">湘潭</option>
		<option value="zhuzhou">株洲</option>
	</optgroup>
</select>

8.3 textarea 标签

textarea 文本域，通常用作填写简介，属性：

• name：表单提交项的键
• clos：文本域列
• rows：文本域行

简介
<textarea name="decs" cols="20px" rows="6px"></textarea>

8.4 label 标签

无其他特殊含义，for 属性可以把 label 绑定到另外一个标签上，使鼠标获得焦点。

<!--for 属性将 label 与 input 绑定，for 的值必须与 id 一致。从而使得 input 标签，鼠标只需点击 用户名 三个字即可获得焦点-->
<label for='abc'>用户名</label>
<input id='abc' type='text'>

8.5 fieldset 标签

将表单内相关元素分组，属性：

• legend 标签：为 fieldset 元素定义标题
• disabled：禁用 fieldset
• name：表单提交项键

<form>
    <fieldset>
        <legend>健康信息</legend>
        身高：<input type="text" />
        体重：<input type="text" />
    </fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>