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標簽

title標簽

<!--設置標題-->
<title>首頁</title>

link標簽

<!--小圖標-->
<link rel="shortcut icon" href="image/favicon.ico">
 
<!--引入css文件-->
<link rel="stylesheet" href="commons.css">

body中的常用標簽

p標簽，表示段落，屬於塊級標簽

<p>123</p>

br標簽，表示換行

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

h標簽，表示標題，屬於塊級標簽

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

span標簽，表示組合行內標簽無特殊意義，屬於行內標簽

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

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>

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標簽

textarea標簽，表示多行文本輸入，屬於行內標簽

<!--多行文本輸入 默認值在兩個標簽內-->
<textarea name="meno" >aaaaa</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>

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>

列表標簽，屬於塊級標簽

<!--列表-->

<!--點-->
<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>

label標簽，表示標記，屬於行內標簽

<!--for和input中的id要對應，點擊label標簽光標跳到input標簽中-->
<label for="username">用戶名：</label>
<input id="username" type="text" name="username">

fieldset標簽，表示外圍框，屬於塊級標簽

<!--畫圈，外圍畫一個框-->
<fieldset>
</fieldset>

HTML中的一些特殊符號

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

前端1 HTML