HTML

概述

html有一套规则，浏览器认识的规则，学习html就是学习这套规则

作用

开发后台程序，写html文件充当模板的子模板，数据库获取数据然后替换到html文件的指定位置web框架

测试

找到文件路径直接打开浏览器
pycharm打开测试

HTML的一些规范

doctype对应关系
html标签标签内部可以写属性html标签只能有一个
注释 <!-- 注释内容 -->

HTML中标签的分类

自闭合标签，如

<meta charset="UTF-8">

主动闭合标签，如

<title>title</title>

块级标签，如

<div> <h1> <p>等

行内标签，如

<span> <a>等

HTML中的一些常用标签

head中的常用标签

meta标签

<!--字符集 两种都可以-->
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<!--页面刷新 content为多少自动秒刷新一次-->
<meta http-equiv="Refresh" content="3">

<!--三秒刷新重定向至url-->
<meta http-equiv="Refresh" content="3;url=http://www.baidu.com">

<!--关键字，便于搜索引擎抓取-->
<meta name="Keywords" content="培训,老男孩,python">

<!--描述-->
<meta name="Description" content="培训机构">

<!--IE兼容-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=IE9;IE=IE8;IE=IE7">

meta标签

meta标签

title标签

<!--设置标题-->
<title>首页</title>

title标签

link标签

<!--小图标-->
<link rel="shortcut icon" href="image/favicon.ico">

<!--引入css文件-->
<link rel="stylesheet" href="commons.css">

link标签

body中的常用标签

p标签，表示段落，属于块级标签

<p>123</p>

p标签

br标签，表示换行

<p>123<br />123</p>

br标签

h标签，表示标题，属于块级标签

<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6>

h标签

span标签，表示组合行内标签无特殊意义，属于行内标签

<span>123</span>
<span>123</span>
<span>123</span>

span标签

div标签，表示块无特殊意义，属于块级标签

<div></div>

div标签

form标签，表示表单，属于块级标签

<!--form标签用于表单提交，action是要发送到哪里，method为模式，GET请求将表单数据放到头部发送，POST请求将表单数据放到body部发送-->
<form action="http://localhost:8888/index" method="POST">
</form>

<!--上传文件时要设置enctype="multipart/form-data"属性-->
<from action="http://www.baidu.com" method="POST" enctype="multipart/form-data">
</form>

form标签

input标签，表示输入、按钮等等，属于行内标签

<!--input标签一般包含在form标签内，type表示input标签的类型，name用于后台获取数据，value可以设置默认值，placeholder可以设置输入提示-->

<!--文本类型-->
<input type="text" name="username" placeholder="请输入用户名" value="默认值"/>

<!--密码类型-->
<input type="password" name="password"/>

<!--按钮类型，和js配合，单独使用无任何意义-->
<input type="button"  value="登录1" />

<!--提交表单，提交后页面刷新-->
<input type="submit"  value="登录2" />

<!--单选框，name设置一致只能选一个，checked为默认值-->
<p>请选择性别：</p>
男：<input type="radio" name="gender" value="1" checked="checked" />
女：<input type="radio" name="gender" value="2" />
<input type="submit" value="提交" />

<!--复选框，checked为默认值-->
<p>爱好：</p>
篮球：<input type="checkbox" name="favor" value="1" checked="checked" />
足球：<input type="checkbox" name="favor" value="2" checked="checked" />
台球：<input type="checkbox" name="favor" value="3" />
网球：<input type="checkbox" name="favor" value="4" />
<input type="submit" value="提交" />

<!--重置按钮，清空表单所有内容-->
<input type="reset" value="重置" />

input标签

input标签

textarea标签，表示多行文本输入，属于行内标签

<!--多行文本输入 默认值在两个标签内-->
<textarea name="meno" >aaaaa</textarea>

textarea标签

select标签，表示下拉框，属于行内标签

<!--下拉框，如果设置multiple="multiple"表示多选，size="10"显示多个，selected="selected"表示默认选中-->
<select name="city" size="10" multiple="multiple">
    <option value="1">北京</option>
    <option value="2" selected="selected">上海</option>
    <option value="3">广州</option>
</select>

select标签

a标签，表示超链接、锚，属于行内标签

<!--超链接，跳转 href="链接URL"， target="_blank"在新标签页中打开-->
<div>
    <a href="https://www.baidu.com" target="_blank">百度</a>
</div>

<!--锚，href="#标签ID"，ID不能重复-->
<div>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <div id="i1" style="height: 600px">第一章内容</div>
    <div id="i2" style="height: 600px">第二章内容</div>
    <div id="i3" style="height: 600px">第三张内容</div>
    <div id="i4" style="height: 600px">第四章内容</div>
</div>

a标签

列表标签，属于块级标签

<!--列表-->

<!--点-->
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<!--序号-->
<ol>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

<!--分层-->
<dl>
    <dt>ttt</dt>
    <dd>ddd</dd>
    <dd>ddd</dd>
    <dd>ddd</dd>
</dl>

列表标签

table标签，表示表格，属于行内标签

<table border="1">
    <thead>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
        <th>表头4</th>
    </tr>
    </thead>
    <!--表内容 colspan="2"横向占两列 rowspan="2"纵向占两行-->
    <tbody>
    <tr>
        <td>第一行，第1列</td>
        <td colspan="2">第一行，第2、3列</td>
        <td>第一行，第4列</td>
    </tr>
    <tr>
        <td rowspan="2">第二、三行，第1列</td>
        <td>第二行，第2列</td>
        <td>第二行，第3列</td>
        <td>第二行，第4列</td>
    </tr>
    <tr>
        <td>第三行，第2列</td>
        <td>第三行，第3列</td>
        <td>第三行，第4列</td>
    </tr>
    <tr>
        <td>第四行，第1列</td>
        <td>第四行，第2列</td>
        <td>第四行，第3列</td>
        <td>第四行，第4列</td>
    </tr>
    </tbody>
</table>

table标签

label标签，表示标记，属于行内标签

<!--for和input中的id要对应，点击label标签光标跳到input标签中-->
<label for="username">用户名：</label>
<input id="username" type="text" name="username">

label标签

fieldset标签，表示外围框，属于块级标签

<!--画圈，外围画一个框-->
<fieldset>
</fieldset>

fieldset标签

HTML中的一些特殊符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html