全棧開發之HTML快速入門（一）
阿新 • • 發佈：2018-01-29
ack enter 提示 其他 red tle 顯示圖片 val password 二、HTML基本結構
一、HTML 是什麽？
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標簽 (markup tag)
- HTML 使用標記標簽來描述網頁
二、HTML基本結構
<html> ----根控制標記
<head> ---頭控制標記
<title>這是標題</title> ----標題標記
</head> ----頭控制標記
<body>
----- 我是Body！！！
</body>
</html> ----根控制標記
1、head部分的標簽
<title>、<base>、<link>、<meta>、<script> 以及 <style>
title
- 定義瀏覽器工具欄中的標題
- 提供頁面被添加到收藏夾時顯示的標題
- 顯示在搜索引擎結果中的頁面標題
meta
- 文檔描述【網站在搜索時，進行描述。】
- <meta name="description" content="在這裏您可以詳細瀏覽一汽-大眾全線車型、一汽-大眾授權經銷商、一汽-大眾二手車、一汽-大眾服務等內容，體驗一汽-大眾精彩生活！">
- 文檔關鍵詞【網站在搜索時，進行關鍵字匹配】
- <meta name="keywords" content="一汽-大眾,一汽大眾官網,大眾一汽,一汽官網,一汽-大眾官方網站">
- 重定向【頁面重定向】
- <meta http-equiv="Refresh"content="2;URL=https://www.baidu.com">
link用於導入css
- <link rel="stylesheet" type="text/css" href="mystyle.css" />
script用於導入js
<script type="text/javascript">document.write("Hello World!")</script>
style用於定義css
<style>
p {
background-color:red;
font-size:15px;
}
</style>
base:定義頁面上所有鏈接的默認地址或默認目標.
<base href="http://www.w3school.com.cn/i/" /> <img src="eg_smile.gif" /><br /> #引入圖片時，會和base進行拼接後再查找圖片。
2、body部分的標簽
一、常用標簽:<h1>
<h1~h6>:從大到小. 表示標題. <p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白. <b> <strong>: 加粗標簽. <strike>: 為文字加上一條中線. <em>: 文字變成斜體. <sup>和<sub>: 上角標 和 下角表. <br/>:換行. 單標簽 <hr>:水平線 <div> :塊，主要用於布局 <span>：內聯標簽
塊級標簽和內聯標簽區別
塊級標簽和內聯標簽 塊級標簽：<p><h1><table><ol><ul><form><div> 內聯標簽：<a><input><img><sub><sup><textarea><span> block（塊）元素的特點 ① 占領一整行，新增元素新起一行； ② 高度，行高以及外邊距和內邊距都可調整； ③ 寬度缺省是它的容器的100%，除非設定一個寬度，一般都是占滿一行。 ④ 它可以容納內聯元素和其他塊元素 inline元素的特點 ① 和其他元素都在一行上； ② 高，行高及外邊距和內邊距不可改變； ③ 寬度就是它的文字或圖片的寬度，不可改變 ④ 內聯元素只能容納文本或者其他內聯元素 對inline元素，需要註意如下 設置寬度width 無效。 設置高度height 無效，可以通過line-height來設置。 設置margin 只有左右margin有效，上下無效。 設置padding 只有左右padding有效，上下則無效。註意元素範圍是增大了，但是對元素周圍的內容是沒影響的。
二 、圖形標簽: <img>
- src: 要顯示圖片的路徑.
- alt: 圖片沒有加載成功時的提示.
- title: 鼠標懸浮時的提示信息.
- width: 圖片的寬
- height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<img src="http://www.w3school.com.cn/i/eg_tulip.jpg" alt="花朵" title="圖片標題" width="100px" height="100px">
三、 超鏈接標簽:<a>
- href:要連接的資源路徑 格式如下: href="http://www.baidu.com"
- target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內容.
- name: 定義一個頁面的書簽.
- 用於跳轉 href : #書簽名稱.
<a href="http://www.baidu.com"><h3>點擊我跳轉到百度哦</h3></a> <a href="" target="_blank"><h3>點擊在本頁</h3></a>
四 、列表標簽:<ul><ol><dl>
- <ul>: 無序列表
- <ol>:有序列表
- <li>:列表中的每一項.
- <dl> 定義列表
- <dt> 列表標題
- <dd> 列表項
<dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl> <ul type="circle" style="background:pink"> <li>無序列表1</li> <li>無序列表2</li> <li>無序列表3</li> <li>無序列表4</li> <li>無序列表5</li> </ul> <ol type="a" style="background:green"> <li>有序列表1</li> <li>有序列表2</li> <li>有序列表3</li> <li>有序列表4</li> <li>有序列表5</li> </ol>
五 、表格標簽: <table>
- border: 表格邊框.
- cellpadding: 內邊距
- cellspacing: 外邊距.
- width: 像素 百分比.（最好通過css來設置長寬）
- <tr>: table row
- <th>: table head cell
- <td>: table data cell
- rowspan: 單元格豎跨多少行
- colspan: 單元格橫跨多少列（即合並單元格）
- <th>: table header <tbody>(不常用): 為表格進行分區.
<table border="1" cellpadding="20px" cellspacing="10px" style="background:green"> <th>姓名</th> <th>年齡</th> <th>性別</th> <tr > <td colspan="2" style="color:red">胖子 男占2列</td> <td>男</td> </tr> <tr> <td rowspan="2" style="color:red">高個占2行</td> <td>11</td> <td>男</td> </tr> <tr > <td>qq</td> <td>女</td> </tr> </table><br/>
六 、表單標簽：<form>
<form > <fieldset> <legend>用戶信息</legend> 用戶名：<input type="text" id=‘username‘ name="username" value="defaultname"><br/> 密碼:<input type="password" id=‘password‘ name="password"><br/> 性別:男<input type="radio" name="sex" value="男"> 女<input type="radio" name="sex" value="女"><br/> 興趣:籃球<input type="checkbox" name="hobby" > 足球<input type="checkbox" name="hobby" > 水球<input type="checkbox" name="hobby" > 玻璃球<input type="checkbox" name="hobby" ><br/> 上傳文件:<input type="file" name="file" ><br/> 所屬部門：<select name="department" multiple> <optgroup label="研發部"> <option value="de_01">研發1部</option> <option value="de_02" selected="selected">研發2部</option> <option value="de_03">研發3部</option> </optgroup> <optgroup label="技術部"> <option value="mercedes">運維</option> <option value="audi">開發</option> </optgroup> </select><br/> 個人說明：<textarea cols="100" rows="10">這是個人說明個人說明</textarea><br/> <button type="button">提交</button> </fieldset> </fieldset> </form>
七、框架:<frameset>
<frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset>
八、布局:<div+css>
<div> 元素常用作布局工具，因為能夠輕松地通過 CSS 對其進行定位。
<!DOCTYPE html> <html> <head> <style> body { margin:0; } #header { background-color:black; color:white; text-align:center; padding:1px; } #nav { line-height:30px; background-color:#eeeeee; height:100px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> <h4>中國</h4> </div> <div id="nav"> 北京<br> 上海<br> 深圳<br> </div> <div id="section"> <h2>上海</h2> <p> 上海市總面積6340平方公裏，轄16個市轄區，屬亞熱帶濕潤季風氣候，四季分明，日照充分，雨量充沛。 </p> <p> 上海，簡稱“滬”或“申”，是gcd的誕生地，中華人民共和國直轄市，國家中心城市，超大城市，國際經濟、金融、貿易、航運、科技創新中心[1] ，首批沿海開放城市。上海地處長江入海口，是長江經濟帶的龍頭城市，隔東中國海與日本九州島相望，南瀕杭州灣，北、西與江蘇、浙江兩省相接。 </p> </div> <div id="footer"> www.example.com </div> </body> </html>
全棧開發之HTML快速入門（一）