HTML中常用知识点整理
html復習
HTML
是一個超文本標記語言
w3c標準：結構標準，表現標準，行為標準。
基本結構
<!doctype?html> <html><head><title>網頁的標題</title><meta?charset="utf-8"/></head><body></body> </html>基本標簽
1.段落標簽：
<p></p>2.標題標簽：
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>3.換行標簽：
<br?/>4.水平線：
<hr/>5.字體樣式標簽：
<strong>加粗</strong> <b>加粗</b> <em>斜體</em>6.特殊符號：
大于：>小于：<空格： 引號："版權符號：©7.圖像標簽：
<img?src="圖片路徑"?alt="圖片顯示不出來時顯示的內容"?title="鼠標懸浮顯示的內容"?width="寬度"?height="l高度"??/>相對路徑：相對于當前頁面的路徑，eg: ../img.jpg ?img/img.jpg
絕對路徑：相對于本機的路徑，eg:D:\常用資料\21IT技能大賽\img.jpg
src:圖片的地址（相對路徑和絕對路徑都可以）
alt：圖片顯示不出來時顯示的替換文字內容，eg:alt="這是圖書"
title：鼠標懸浮時顯示的內容，eg:title="這是圖書"
width:圖片顯示的寬度，eg:width="100"
height:圖片顯示的高度，eg:height="100"
8.超鏈接：
<a?href="路徑"?target="是否在當前窗口中打開">百度一下</a>href:跳轉頁面的地址，相對路徑和絕對路徑都可以
target：有兩個值，_self:當前窗口打開超鏈接 _blank:在新窗口中打開超鏈接
9.錨鏈接：
從頁面的甲處跳轉到乙處
語法：
甲處：<a?href="#yi">去乙處</a> 乙處：<p?id?=?"yi"></p>10.塊級元素和行內元素：
塊級元素：單獨占一行，寬度是瀏覽器的寬度
行內元素：內容撐開寬度，內容多寬，元素就多寬。左右都是行內元素，自動排列在一行
列表、表格和媒體元素
1.無序列表：
<ul><li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li></ul>2.有序列表：
<ol><li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li></ol>3.定義列表：
<dl><dt>蔬菜</dt><dd>黃瓜</dd><dd>南瓜</dd><dd>冬瓜</dd><dd>北瓜</dd></dl>4.表格：
<table?border="1"?cellspacing="0"?style="text-align:?center;"><tr><td?colspan="3">第一列</td></tr><tr><td?rowspan="2">第一列</td><td>第二列</td><td>最后一列</td></tr><tr><td>第二列</td><td>最后一列</td></tr></table>運行結果：
| 第一列 | ||
| 第一列 | 第二列 | 最后一列 |
| 第二列 | 最后一列 | |
5.音頻元素：
<audio?src="音頻文件"?autoplay="autoplay"?controls="controls"></audio>6.視頻元素：
<video?src="視頻文件"?autoplay="autoplay"?controls="controls"></video>**src：**音頻或者視頻的路徑
**autoplay：**自動播放
**controls：**顯示播放控件
7.網頁結構元素：
<header><nav>導航</nav></header><section>中間</section><footer>底部</footer>表單元素
1.文本框 ：
<input?type="text"?name="name"?value="mxx"?size="20"?maxlength="20"?placeholder="請輸入用戶名"?required="required"?readonly="readonly"?/>type：表單的類型
name：表單元素的名稱
value：默認值，初始值
size：表單的初識寬度
maxlength：最大輸入的字符數
placeholder：提示信息
required：是否必填，不寫的話不用必填
readonly：是否只讀
2.密碼框：
<input?type="password"?name="pass"??/>3.單選按鈕：
<input?type="radio"?name="sex"?/>男 <input?type="radio"?name="sex"?/>女注意：name的值必須要一樣，否則不能單選
4.復選框：
<input?type="checkbox"??checked="checked?name="hob"?/>打籃球 <input?type="checkbox"?name="hob"?/>堆雪人 <input?type="checkbox"?name="hob"?/>打雪仗注意：checked是默認選中的意思，可適用于單選按鈕和復選框
5.下拉列表：
<select><option>山東</option><option?selected="selected">山西</option><option>河南</option><option>河北</option> </select>注意：selected是默認選中
6.按鈕：
<button?disabled="disabled">普通按鈕</button> <input?type="button"?value="普通按鈕"?/> <input?type="reset"?value="重置按鈕"?/> <input?type="submit"?value="提交按鈕"?/>注意：disabled：是禁用按鈕
7.多行文本域：
<textarea?cols="5"?rows="20">歡迎關注微信公眾號：雄雄的小課堂</textarea>cols：列
rows：行
8.文件域：
<input?type="file"?name="files"?/>9.郵箱：
<input?type="email"?name="files"?/>10.數字框：
<input?type="number"?min="0"?max="100"?step="100"/>min：最小值
max：最大值
step：步幅
11.滑塊：
<input?type="range"?min="0"?max="100"?step="1"/>12.日期表單：
<input?type="date"?name="borndate"/>13.隱藏域：
<input?type="hidden"?name="id"/>14.語義化標簽：
<label>用戶名</label>15.正則表達式驗證：
<input?type="text"?name="phone"?pattern="^1[3456789]\d{9}"?/>pattern：值是正則表達式
總結
以上是生活随笔為你收集整理的HTML中常用知识点整理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： revit2016电脑配置要求？
- 下一篇： Safari浏览器不支持let声明的解决