前端開發-5-HTML-總結
阿新 • • 發佈：2018-10-21
不執行 一個 包含 語文 -h 一行 課程表 htm dex
1、總體
資源：https://www.processon.com/view/link/5ad1c2d0e4b0b74a6dd64f3c
html
head標簽
title 顯示網站的標題
meta 提供有關頁面的原信息
link 鏈接css資源文件、網站圖標
style 定義內部樣式表
script 鏈接腳本js文件
body標簽
塊級元素 div p h1-h6 ul ol li table form
行內元素 a span br i em strong label
行內塊元素 img input
其他標簽 br hr ...
特殊符號
一、head標簽：
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、編碼方式及URL等信息,
這些信息大部分是用於提供索引,辯認或其他方面的應用（移動端）等。
<head lang=‘en‘> <title>標題信息</title> <meta charset=‘utf-8‘> <link> <style type=‘text/css‘></style> <script type=‘text/javascript‘></script> </head> html: <!--en 能翻譯網頁--> <html lang="en"> 1.title: <!--文檔的標題--> <title>路飛學城</title> 2.meta: <!-- 聲明頭部的元信息 對我們文檔 規定編碼格式 --> <meta charset="utf-8"> <!--指定文檔的內容類型和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- 5秒之後 重定向 到路飛學城的網站 --> <meta http-equiv="refresh" content="5;URL=https://www.luffycity.com" /> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!-- 為了我們的SEO優化 工作的時候下面這兩句 要寫--> <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="路飛學城"> 3.link: <!-- 定義我們的網站圖標 --> <link rel="icon" href="fav.ico"> <!-- 引入外部樣式表 --> <link rel="stylesheet" type="text/css" href="index.css"> 4.style: <!--定義內部樣式表--> <style type="text/css"></style> 5.script: <!--定義內部腳本文件--> <script type="text/javascript"></script> <!--引入外部js--> <script src="index.js"></script>
二、body標簽：
1.塊級元素 獨占一行，可設寬高，如果不設寬度，則是瀏覽器的寬度 ( div p h1-h6 ul ol li table form ) 解釋： <div>盒子標簽</div> <!--h：標題標簽，標題h1-h6 沒有h7 不要隨意的通過 h 標簽改變文字的大小 h 標簽換行了 --> <h6>路飛學城</h6> <!--p：段落標簽 塊級元素 獨占一行--> <p>我們</p> ul li <!--列表標簽，無序列表 默認是實心圓disc--> <ul type="square"><li></li></ul> ul標簽的屬性： type：列表標識的類型 disc：實心圓(默認值) circle：空心圓 square：實心矩形 none：不顯示標識 ol li <!--列表標簽，有序列表 默認是數字--> <ol style="list-style: none"><li></li></ol> ol標簽的屬性： type：列表標識的類型 1：數字 a：小寫字母 A：大寫字母 i：小寫羅馬字符 I：大寫羅馬字符 列表標識的起始編號默認為1 2.行內元素 在一行內展示，不能設置寬高，它的寬高是根據內容去填充 ( a span br i em strong label ) 解釋： <!-- a：超鏈接標簽，標簽屬於行內標簽：在一行內展示 --> <!-- _self:默認值：在當前網站打開資源 _blank:在新的網站打開資源 --> <a href="https://www.luffycity.com" target="_blank" title="luffy" >路飛學城</a> <a href="a.zip">下載壓縮包</a> <a href="mailto:[email protected]">聯系我們</a> <a href="#">跳轉到頂部</a> <a href="#p1">跳轉到頂部的段落標簽</a> <!-- javascript: 是表示在觸發<a>默認動作時，執行一段JavaScript代碼 javascript:; 表示什麽都不執行，這樣點擊<a>時就沒有任何反應。把a的默認動作取消了 --> <a href="javascript:alert(1)">內容</a> <a href="javascript:">內容吧</a> 3.行內塊元素 在一行內展示，可設寬高 （img input） 解釋： <img /> 圖片標簽 圖片的格式可以是png、jpg和gif <img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "提示信息" /> <img src="homesmall1.png" alt="python的圖片" style="width: 200px; height: 200px; " /> 4.其他標簽： <br> 換行 <hr> 分割線 <b></b>加粗 <i></i>斜體 <u></u>下劃線 <s></s>刪除線 <sup></sup>上標 <sub></sub> <em></em>斜體 <strong></strong>粗體 5.特殊符號： 瀏覽器顯示時 會移除源代碼中多余的空格和空行；所有連續的空格或空行都會被算作一個空格； 註意：html代碼中所有連續的空行（換行）空格 都會被顯示為 一個空格 空格： 特殊符號對照表： http://tool.chinaz.com/Tools/HtmlChar.aspx 常用的特殊符號： 空格 > > < < & & ¥ ¥ 版權 © 註冊 ®
-----------------------------------------------
6.table 表格標簽 <!--表格 給table 對象添加屬性 cellspacing 單元格之間的距離 --> 普通表格： <table border="1" cellspacing="0"> <thead> <tr> <th>星期一</th> <th>星期二</th> </tr> </thead> <tbody> <tr> <td>語文</td> <td>數學</td> </tr> </tbody> </table>
--------------------------
表格合並： rowspan="2" colspan="3" rowspan 合並行(豎著合並) colspan 合並列(橫著合並)
<table border="1" cellspacing="0">
<thead>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">上午</td>
<td>語文</td>
<td>數學</td>
</tr>
<tr>
<td>語文</td>
<td>數學</td>
</tr>
<tr>
<td rowspan="1">下午</td>
<td>語文</td>
<td>數學</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">課程表</td>
</tr>
</tfoot>
</table>
-----------------------
7.form 表單標簽 <form>允許出現表單控件</form>；表單用於顯示信息，並將信息提交給服務器 表單控件： 按鈕：button reset submit 文本：label text password radio checkbox file textarea 下拉框：select option
<form action="http://www.baidu.com" method="get">
<p>
<label for="user">用戶名：</label>
<input type="text" name="username" id="user" placeholder="請輸入用戶名">
</p>
<p>
<label for="password">密碼：</label>
<input type="password" name="password" id="password" placeholder="請輸入密碼">
</p>
<p>
用戶性別：
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女" checked>女
</p>
<p>
用戶的愛好：
<input type="checkbox" name="checkfav" value="吃" checked>吃
<input type="checkbox" name="checkfav" value="喝">喝
<input type="checkbox" name="checkfav" value="玩" checked>玩
<input type="checkbox" name="checkfav" value="樂">樂
</p>
<p>
<input type="file" name="textfile">
</p>
<p>
<textarea name="txt" id="txt_id" cols="30" rows="10" placeholder="請做自我介紹"></textarea>
</p>
<p>
<label for="sel">城市：</label>
<select name="sel" id="sel">
<option value="北京">北京</option>
<option value="上海" selected>上海</option>
<option value="廣州">廣州</option>
<option value="深圳">深圳</option>
</select>
</p>
<p>
<label for="mul_sel">城市：</label>
<select name="mul_sel" id="mul_sel" size="3" multiple>
<option value="北京">北京</option>
<option value="上海" selected>上海</option>
<option value="廣州">廣州</option>
<option value="深圳">深圳</option>
</select>
</p>
<p>
<input type="button" name="btn" value="提交" disabled>
<input type="reset">
<input type="submit" name="btn" value="submit">
</p>
</form>
屬性：
表單控件：
三、標簽特性：
1.標簽屬性 標簽可以看成是一個對象，對象就應該有它自己的屬性和方法。 註意事項： HTML標簽除一些特定屬性外可以設置自定義屬性，一個標簽可以設置多個屬性用空格分隔，多個屬性不區分先後順序。 屬性值要用引號包裹起來，通常使用雙引號也可以單引號。 屬性和屬性值不區分大小寫，但是推薦使用小寫。 2.標簽分類： HTML中標簽元素三種不同類型：塊狀元素，行內元素，行內塊狀元素。 常用的塊狀元素： 1.獨占一行 2.可設置寬高 <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> 常用的行內元素： 1.一行內展示 2.不可設置寬高 <a> <span> <br> <i> <em> <strong> <label> 常用的行內塊狀元素： 1.一行內展示 2.可設置寬高 <img> <input> 塊級元素特點：display:block; 1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。獨占一行 2、元素的高度、寬度、行高以及頂和底邊距都可設置。 3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。 行內元素特點：display:inline; 1、和其他元素都在一行上； 2、元素的高度、寬度及頂部和底部邊距不可設置； 3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 行內塊狀元素的特點：display:inline-block; 1、和其他元素都在一行上； 2、元素的高度、寬度、行高以及頂和底邊距都可設置 註意 我們可以通過display屬性對塊級元素、行內元素、行內塊元素進行轉換，為後面頁面布局做好了準備。 3.標簽嵌套規則： 塊元素可以包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素，例如： <div><div></div><h1></h1><p><p></div> ? <a href=”#”><span></span></a> ? a 可以包含 img <span><div></div></span> ? 某些塊級元素不能放在p標簽裏面，比如 <p><ol><li></li></ol></p> ? <p><div></div></p> ? 個別例外，大家註意 有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標簽是： h1、h2、h3、h4、h5、h6、p li元素可以嵌入ul，ol，div等標簽
------------------------------
<ul>
<li>
<ul>
<li>
<div>
</div>
</li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ul>
</li>
</ul>
前端開發-5-HTML-總結