Html
引言：學習前端基礎知識。第一課 HTML。
時間：2017年11月19日
作者：JustDo23
html_css_js
01. 基礎知識
- 入門
Web前端開發(fā)需掌握基礎技術：HTML和CSS以及JavaScript三者功能區(qū)分為-
HTML是網(wǎng)頁內容載體。 -
CSS是樣式表現(xiàn)。 -
JavaScript是實現(xiàn)特效及交互。
-
-
HTML是用來描述網(wǎng)頁的一種語言。-
Hyper Text Markup Language即超文本編輯語言 -
HTML它不是編程語言，而是一種標記語言 - 標記語言是一套標記標簽
-
HTML使用標記標簽來描述網(wǎng)頁
-
-
語義化：明白每個標簽的用途，合理使用標簽。好處：
- 更容易被搜索引擎收錄
- 更容易讓屏幕閱讀器讀出網(wǎng)頁內容
02. 文檔結構
<!-- DTD 頭 聲明HTML版本 -->
<!DOCTYPE html>
<!-- HTML根標簽 -->
<html>
<!-- 頭標簽 -->
<head>
</head>
<!-- 網(wǎng)頁上顯示的內容全部放在這里 -->
<body>
</body>
<!-- HTML結束標簽 -->
</html>
03. 頭部標簽
<!-- 頭標簽 -->
<head>
<!-- 網(wǎng)站標題 -->
<title>前端入門</title>
<!-- 全局屬性信息 -->
<meta charset="utf-8">
<!-- 鏈接外部文件 -->
<link rel="stylesheet" type="text/css" href="link.js">
<!-- CSS樣式 -->
<style type="text/css"></style>
<!-- JavaScript代碼 -->
<script type="text/javascript"></script>
</head>
04. 常用標簽
<body>
<h1>一級標題</h1>
<p>一個段落。</p>
<p>
<em>表示強調，斜體顯示。</em><br/>
<strong>表示更強烈強調，粗體顯示。</strong><br/>
<span>標簽沒有語義，可用于設置單獨樣式。</span><br/>
<q cite="該引用出處">表示簡短文本引用，引用默認會添加引號。</q>
<blockquote cite="http://">表示長文本引用，引用默認會添加左右添加縮進。</blockquote>
<address>表示地址等信息，默認斜體。</address>
<code>表示一行代碼，僅一行代碼。</code><br/>
<pre>表示大段代碼等預格式化文本，保留空格和換行。</pre>
<hr/>
<a href="目標地址" target="-_blank" title="鼠標滑過顯示的文本，增強語義化">鏈接顯示的文本</a><br/>
<a href="mailto:JustDo_23@163.com?subject=mailto總結&body=各種參數(shù)使用方法">發(fā)送郵件。</a><br/>
<hr/>
<img src="圖片地址" alt="圖片顯示失敗時的替換文本" title="提示文本">
<hr/>
</p>
</body>
05. 列表標簽
<body>
<ul>無序列表
<li>一個列表</li>
<li>無序排列</li>
<li>默認樣式小圓點</li>
</ul>
<ol type="A">有序列表
<li>一個列表</li>
<li>按順序排列</li>
<li>默認樣式從1開始</li>
</ol>
</body>
html_list
06. 分塊標簽
<body>
<div class="divClass" id="divID">
獨立容器，獨立邏輯，區(qū)域劃分
<ul type="circle">
<li>屬性id指定唯一標識</li>
<li>屬性class指定樣式類名</li>
</ul>
</div>
</body>
07. 表格標簽
<body>
<table summary="表格簡介文本摘要，增強語義化" border="1" cellpadding="1" cellspacing="1">
<caption>表格標題</caption>
<thead>
</thead>
<tbody>
<tr>
<th>表頭</th>
<th>粗體</th>
<th>居中</th>
<th colspan="2">跨列</th>
</tr>
<tr>
<th>豎直</th>
<td> </td>
<td>單元格</td>
<td rowspan="2">跨行</td>
<td>單元格</td>
</tr>
<tr>
<th>表頭</th>
<td>單元格</td>
<td>單元格</td>
<td>單元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">頁腳</th>
<td>單元格</td>
</tr>
</tfoot>
</table>
</body>
-
<table>定義表格 -
<caption>定義表格標題 -
<tr>定義表格的行 -
<td>定義表格單元 -
<th>定義表格的表頭 -
<thead>定義表格的頁眉 -
<tbody>定義表格的主體 -
<tfooter>定義表格的頁腳 - 添加表格結構
<thead><tbody><tfooter>表格主體內容tbody下載完優(yōu)先顯示，分段顯示，不必等待表格加載完成后才顯示。 - 屬性
border指定表格邊框寬度 - 屬性
cellpadding指定單元格內邊距 - 屬性
cellspacing指定表格單元格外邊距 - 屬性
colspan指定單元格跨行 - 屬性
rowspan指定單元格跨列
html_table
08. 表單標簽
<body>
<!-- 表單標簽 -->
<form class="類名" action="指定提交位置" method="提交方式">
<label for="userName">賬號：</label>
<!-- 文本輸入框 -->
<input type="text" name="userName" value="賬號默認值"><br>
<label for="passWord">密碼：</label>
<!-- 密碼輸入框 -->
<input type="password" name="passWord" value="密碼默認值"><br>
<!-- 文本域 -->
<textarea name="name" rows="文本域行數(shù)" cols="文本域列數(shù)">文本域名默認值</textarea><br>
<label>以下是單選框：</label><br>
<!-- value 用于向服務器提交 -->
<input type="radio" name="gender" value="man" checked="checked"><label>男</label><br>
<input type="radio" name="gender" value="woman"><label>女</label><br>
<label>注意：同一組單選框 name 取值一定要一致</label><br>
<label>以下是復選框：</label><br>
<!-- label 為鼠標用戶改進可用性 for 屬性與 id 屬性相同 -->
<input type="checkbox" id="swim" name="swimming" value="swimming"><label for="swim">游泳</label><br>
<input type="checkbox" id="shop" name="shopping" value="shopping"><label for="shop">購物</label><br>
<label>以下是下拉列表框：</label><br>
<!-- multiple 屬性指定單選或多選 -->
<select class="spinner" name="list" multiple="multiple">
<option value="book">讀書</option>
<option value="film" selected="selected">電影</option>
<option value="sleep">睡覺</option>
</select>
<br>
<!-- 提交按鈕 -->
<input type="submit" name="submitButton" value="提交"><br/>
<!-- 重置按鈕 -->
<input type="reset" name="resetButton" value="重置"><br/>
</form>
</body>
html_form
09. 小結
- 標記語言相對而已容易學習，多次練習并在瀏覽器中運行。
- 認識標簽，掌握標簽，運用標簽。
