HTML基础
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Mark-up Language)
- 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 使用<!-- 注释的内容 -->进行注释
- Doctype 告诉浏览器使用什么样的 html 或 xhtml 规范来解析 html 文档(推荐：<!DOCTYPE html>)
HTML 标签
大多数 HTML 元素被定义为块级元素或内联元素：
块级元素(block level element)：块级元素在浏览器显示时，通常会以新行来开始（和结束）。
- div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内元素(inline element)：内联元素在显示时通常不会以新行开始。
- span（白板）
标签之间可以嵌套
标签存在的意义，css 操作，js 操作
- 标签分类
自闭合标签
<meta charset="UTF-8">
主动闭合标签
<div></div>
- head标签
Meta(metadata information)：
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词1.页面编码（告诉浏览器是什么编码）
< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>2.刷新和跳转
刷新：< meta http-equiv=“Refresh” Content=“30″>跳转：< meta http-equiv=”Refresh“ Content=”5; Url=https://www.cnblogs.com/dbf-/“ />
3.关键词
< meta name="keywords" content="blods,Python,html" >4.描述
例如：cnblogs5.X-UA-Compatible
Title
网页头部信息Link
css：
< link rel="stylesheet" type="text/css" href="css/common.css" >icon：
< link rel="shortcut icon" href="image/favicon.ico">Style
在页面中写样式例如：
< style type="text/css" >
.bb{
background-color: red;
}
< /style>
Script
引进文件：
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >写js代码：
< script type="text/javascript" > ... </script >
- body标签
图标， (空格)，>(>)，<(<)
<p></p>段落
<br/>换行
h 系列标签：
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
浏览器会自动地在标题的前后添加空行。
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6>
div 标签：
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div>内容</div>
span 标签：
HTML <span> 元素是内联元素，可用作文本的容器。
<span>文本内容</span>
form, input 标签：
HTML 表单用于收集用户输入。<form> 元素定义 HTML 表单。
表单元素指的是不同类型的 input 元素：文本输入、密码输入、复选框、单选按钮、提交按钮等等。
- 当input标签disabled以后就无法被提交到服务器，可以使用readonly
表单标签：action=http://localhost:9999(表单发送的地址) enctype="multipart/form-data"(支持文件传输)
文本输入：type=”text” name=”user”(给输入文本起名) value=""(设定文本框的默认值) disabled="disabled"(文本框不可编辑)placeholder=""(当文本框空时显示的提示)
密码输入：type=”password”(不显示输入内容) name=”psw”(给输入文本起名)
提交按钮：type="submit" value="提交"(按钮上显示的文字)
重置按钮：type="reset"(将表单初始化) value="提交"(按钮上显示的文字)
<form action="http://localhost:9999"> <div> <input type="text" name="user" value="default user"/><br/> <input type="password" name="psw"/><br/> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </div> </form>
列表选择：name="city"(起名)，value="1"(如果选中，返回”1”)
单选框：type="radio" name="gender"(相同的name互斥，实现单选) value="3"(如果选中，返回”3”) checked="checked"(默认勾选)
多选框：type="checkbox" name="hobby" value="1" checked="checked"(默认勾选)
按钮：type="button"(不能提交表单) value="按钮"(按钮上显示的文字)
<form action="http://localhost:9999" enctype="multipart/form-data"> <p>地区：</p> <!-- 选择列表--> <select name="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广州</option> </select> <!-- 单选--> <p>性别：</p> 男：<input type="radio" name="gender" value="1"/><br/> 女：<input type="radio" name="gender" value="2"/><br/> 其他：<input type="radio" name="gender" value="3" checked="checked"/><br/> <!-- 多选--> <p>爱好：</p> 篮球：<input type="checkbox" name="hobby" value="1" checked="checked"/><br/> 足球：<input type="checkbox" name="hobby" value="2"/><br/> 排球：<input type="checkbox" name="hobby" value="3"/><br/> 台球：<input type="checkbox" name="hobby" value="4"/><br/> <input type="button" value="按钮"/> </form>
传送文件：type="file" name="fname"
文本域：<textarea> 元素定义多行输入字段
<form action="http://localhost:9999" enctype="multipart/form-data"> 上传文件：<input type="file" name="fname"/><br> <textarea>默认显示内容</textarea> </form>
下拉菜单：<select> <option>
<select>：下拉菜单标签
form属性：与form（ID）绑定
required属性：提交表单时必须有选择
multiple属性：可以多选
size属性：一次显示的选项数
<option>：菜单中选项标签
1 <form id="f1"> 2 <select name="select_tag" multiple="multiple" size="6" required="required" form="f1"> 3 <option value="1">1</option> 4 <option value="2">2</option> 5 <option value="3">3</option> 6 <option value="4">4</option> 7 <option value="5">5</option> 8 <option value="6">6</option> 9 <option value="7">7</option> 10 <option value="8">8</option> 11 <option value="9">9</option> 12 <option value="10">10</option> 13 </select> 14 </form>
a 标签：
<a> 标签定义超链接，用于从一张页面链接到另一张页面，可以用来定义锚
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
<a href="#id1">第一章</a> <a href="#id2">第二章</a> <a href="#id3">第三章</a> <a href="#id4">第四章</a> <a href="#id5">第五章</a> <a href="http://www.baidu.com">搜索</a> <div id="id1" style="height: 600px">第一章的内容</div> <div id="id2" style="height: 600px">第二章的内容</div> <div id="id3" style="height: 600px">第三章的内容</div> <div id="id4" style="height: 600px">第四章的内容</div> <div id="id5" style="height: 600px">第五章的内容</div>
img 标签：
title 属性：鼠标指上去会显示文本
alt 属性：图片无法加载会显示文本
<img src="example.jpg" title="示例图片" alt="假装有图片"/>
列表：
- 有序列表：有序列表也是一列项目，列表项目使用数字进行标记。
<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>
- 无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点进行标记。
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul>
定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合。
每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl> <dt>第一章</dt> <dd>第一节</dd> <dd>第二节</dd> <dd>第三节</dd> <dt>第二章</dt> <dd>第一节</dd> <dd>第二节</dd> <dd>第三节</dd> </dl>
表格：
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
如果不需要表头就把<thead></thead>去掉
<div> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> <th>表头4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="2">2</td> <!-- 表示单元格占两列--> <td>3</td> </tr> <tr> <td rowspan="2">5</td> <!-- 表示单元格占两行--> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> <td>11</td> </tr> </tbody> </table> </div>
label 标签：
用于点击文件，使得关联的标签获取光标
通过 for 属性关联相关组件 ID
<label for="username">用户名：</label> <input id="username" type="text" name="user" />
fieldset 标签：
定义围绕表单中元素的边框。
使用<legend></legend>为 fieldset 标签添加标题，并添加在边框上
<fieldset> <!--添加一个边框--> <legend>登陆</legend> <!--给边框嵌入文字--> <label for="username">user name:</label> <!--用于为id="username"获取光标--> <input id="username" type="text" name="user"> </fieldset>
