前端笔记1 HTML基础
生活随笔
收集整理的這篇文章主要介紹了
前端笔记1 HTML基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 概念
- html 超文本標記語言
- 作用
- html 基本用法
- 標簽入門
- 標簽語法
- 標簽分類
- 雙標簽 (圍堵標簽)
- 單標簽
- 屬性入門
- html 基本構架
- 簡單標簽
- 舉例常見標簽
- 標題標簽的四個特點
- 其他標簽
- 注釋標簽
- 特殊符號
- 復雜標簽
- font 字體標簽
- body 主體標簽
- img標簽
- a 超鏈接標簽
- href 鏈接指向的位置
- href 錨鏈接
- target 頁面打開方式
- 復合標簽
- 列表
- 有序列表
- 無序列表
- 項目列表
- 表單
- input 輸入框
- 屬性
- button
- 默認選中
- 只讀和禁用
- 標注 label
- 表單驗證
- 表格
- 案例
- iframe 內嵌框架
- 使用超鏈接 在窗體上切換
- frame 框架集窗口
- html 5 多媒體標簽
- 音頻
- 視頻
- 顏色表示法
- 英文表示
- 十六進制表示法
- rgb 表示法
- rgba 表示法
- 使用軟件獲取屏幕上的任何顏色
概念
html 超文本標記語言
全寫：HyperText Mark-up Language
概念: 一種為普通文件中某些字句加上標示的語言，其目的在于運用標記（tag）使文件達到預期的顯示效果。
- 超文本
標記
作用
主要用于網頁的制作
html 基本用法
標簽入門
標簽語法
- 使用 尖括號 作為關鍵字的語法格式
- 標簽需要成對出現 <>
- 標簽中可以添加屬性, 表示標簽的具體實現細節
- 標簽可以字母大寫, 但是推薦使用小寫
標簽分類
雙標簽 (圍堵標簽)
它以開始標簽及結束標簽將文字圍住，令其達到預期顯示效果
<b>內容</b> 有加粗效果單標簽
標簽單獨出現，只有開始標簽沒有結束標簽
不需要包含任何東西, 本身就具有某種含義
<br/> 換行屬性入門
hr 橫線 是一條 顏色為紅色 比較粗的一條橫線 <hr/> 貫穿屏幕的一條橫線 <hr color="red" size="5"> 格式 <標簽名 屬性名="屬性值" 第二個屬性="">html 基本構架
<!DOCTYPE html> 頭聲明 <html lang="en"> 根標簽<head> 頭文件 <meta charset="UTF-8"> 編碼格式 <title>Title</title> 網頁的標題</head><body> 身體, 主體網頁文件</body> </html> 使用webStrom 有快捷方式 生成基本架構 Html:5 加上 Tab 鍵 可以自動生成 基本架構 html:4s簡單標簽
舉例常見標簽
<b></b> 字體加粗 <i></i> 字體傾斜 <u></u> 下劃線 <s></s> 刪除線<sub></sub> 下標文本 <sup></sup> 上標文本 <big></big> 字體變大 <small></small> 字體變小<center></center> 居中 <h></h> 標題標簽 <h1>xxx</h1>~<h6>xxx</h6>標題標簽的四個特點
- 自動換行
- 自動加粗
- 自動調整字體大小
- 標題之間的留白
其他標簽
<p></p> 段落標簽 有換行功能 段落之間可以自動隔行 <abbr title="中國中央電視臺">CCTV</abbr> 表示它所包含的文本是一個更長的單詞或短語的縮寫形式 可以在 <abbr> 標簽中使用全局的 title 屬性，這樣就能夠在鼠標指針移動到 <abbr> 元素上時顯示出簡稱/縮寫的完整版本。注釋標簽
<!-- -->特殊符號
| 空格 |  (分號) |
| 大于號> | >(分號) |
| 小于號< | <(分號) |
| 引號(") | "(分號) |
| 版權符號? | ©(分號) |
復雜標簽
font 字體標簽
- color 顏色 直接寫顏色名 red green blue
- size 尺寸
- 取值 1-7 1最小 7最大
- face 字體
- 計算機內部支持的所有字體
- 漢字 “楷體” 也可以寫漢語拼音
body 主體標簽
? 整個網頁的主體部分, 主要的顯示區域
- 添加背景顏色
- 添加背景圖片
- 設置全局字體顏色
img標簽
- src
- source 的縮寫, 源, 路徑
- width/ height
- title
- 鼠標指向的時候, 彈出提示說明文字
- alt 圖片的替代文字
a 超鏈接標簽
href 鏈接指向的位置
- 文本文件
- 圖片文件
- 其他網頁文件(.html)
- 網絡地址
- 必須添加協議 http://
href 錨鏈接
// 頁面回到頂部功能 1- 設定一個錨點 2- 回到錨點的鏈接, 將鏈接指向錨點 <!-- 該 a 標簽 是一個錨點 --> <a name="top"></a> <a href="#top" >回到頂部</a>target 頁面打開方式
_blank 新頁面打開 _self 自身頁面打開###一年四季 網站
創建多個網頁文件 通過a鏈接和 img 標簽的組合 實現 點擊鏈接切換圖片的效果復合標簽
列表
有序列表
<ol><li></li><li></li> </ol><!-- 有序 --> <ol type="I"><li>王者榮耀</li><li>火影忍者</li><li>陰陽師</li><li>夢幻西游</li><li>爐石傳說</li> </ol>type 項目符號的顯示方式 屬性的值 1 a A i I start 起始編號無序列表
<ul><li></li><li></li> </ul>type="" 空心圓 circle實心圓 disc小方塊 square 無修飾 none使用場景 新聞網站項目列表
<dl><dt>武俠人物</dt><dd>郭靖</dd><dd>黃蓉</dd><dt>演藝圈</dt><dd>趙麗穎</dd><dd>謝娜</dd> </dl>武俠人物郭靖黃蓉楊康楊過 IT 行業支音曹偉繼斌 演藝圈趙麗穎謝娜 場景 每個班 有多名學生 某公司, 多個項目組, 每個項目組又有多個組員表單
input 輸入框
<input />| text | 文本 |
| password | 密碼 |
| number | 數字框 |
| 郵箱 | |
| date | 日期框 |
| button | 按鈕 |
| submit | 提交按鈕 |
| reset | 重置按鈕 |
| radio | 單選鈕 需要配合name 屬性 |
| checkbox | 復選框 |
| file | 文件選擇框 |
| hidden | 隱藏域 |
| select / option | 下拉菜單 / 選項 |
| button | 按鈕 |
| textarea | 大文本輸入框 |
屬性
name 屬性的含義 給表單元素起名稱, 用于區分多個文本框 用戶名 : <input type="text" name="username"> 真實姓名 : <input type="text" name="realname"> - 在單選鈕中 標識那些單選鈕屬于同一組的 value 屬性 (英語 值) 用于指定表單元素初始值 value 放在 button中 用于顯示 按鈕的顯示文字 size 指定表單元素的初始寬度 如果表單類型是 text 或者 password 表單元素大小以字符為單位 如果是其他類型 以像素為單位button
<input type="button" value="點我一下"> <button>點我一下</button>####拓展知識
默認選中
checked / selected
checked 默認選中 對單選鈕和復選框生效 默認選中當前選項 如果是 下拉菜單 option 中 必須換成 selected只讀和禁用
readonly / disabled
用戶名; <input type="text" value="張三" readonly/> <br><br> <input type="submit" value="提交" disabled/> <br><br> <button disabled>你好</button><br><br>標注 label
<!-- 當鼠標點擊標注文字的時候, 焦點到for指向的表單元素 --> <input type="radio" name="sex" id="sex1"> <label for="sex1">男</label> <input type="radio" name="sex" id="sex2"> <label for="sex2">女</label> <label ><input type="checkbox" name="hobby"> 吃 </label> <label ><input type="checkbox" name="hobby"> 喝 </label>表單驗證
placeholder / required
placeholder 提示信息 H5 用戶名; <input type="text" placeholder="必須輸入6-8位英文"> <br> <!-- required 驗證 內容不能為空--> 用戶名 <input type="text" name="user" required> <br><br> required <!--pattern 驗證規范 正則表達式 --> 手機號 <input type="text" pattern="1[35678]\d{9}" name="num"> pattern 屬性適用于以下 <input> 類型：text, search, url, telephone, email 以及 password 。表格
對比列表
三行兩列的一個表格 <table><tr> <td></td><td></td></tr><tr> <td></td><td></td></tr><tr> <td></td><td></td></tr> </table>####格式補充
標題 caption 表頭 tr>th 表結構 thead 表格頁眉 tbody 表主題 tfoot 表格頁腳案例
模擬課程表 6 行 9 列 使用工具快速生成 table>(tr>(td*9))*6 td中填寫內容 table>(tr>(td{內容書寫}*9))*6常用屬性
| border | 邊框 單位是像素 |
| bordercolor | 邊框顏色 |
| cellspacing | 兩個單元格之間的距離,合并邊框 該屬性設置為0 |
| cellpadding | 單元格與其內容之間的距離 |
| width / height | 寬高 |
| align | 設置在table 中 表格位置, 設置在 tr 或td中 內容的排版 |
| bgcolor / background | 背景顏色和圖片 |
| colspan | 合并列 |
| rowspan | 合并行 |
iframe 內嵌框架
視頻 <br> <iframe src="4-音頻.html" frameborder="0"> </iframe>使用超鏈接 在窗體上切換
圖形 <br> <iframe src="3-關于圖形6.html" frameborder="0" name="abc" width="400px" height="400px"></iframe> <a href="4-音頻.html" target="abc">在內嵌框架上打開超鏈接</a>frame 框架集窗口
<frameset cols="25%,50%,25%"><frame src="frame_a.htm" /><frame src="frame_b.htm" /><frame src="frame_c.htm" /> </frameset>html 5 多媒體標簽
音頻
<audio controls="controls" src="洛天依-小雞嗶嗶.mp3"> </audio><audio controls="controls"><source src="洛天依-小雞嗶嗶.mp3" /><source src="洛天依-小雞嗶嗶.mp3" /> </audio>視頻
<video src="D:\成長紀錄片.mp4" controls="controls" autoplay></video>autoplay 自動播放src 指向磁盤上的文件路徑顏色表示法
顏色有三種表示法
英文表示
十六進制表示法
所有的顏色都是三原色組成 紅祿藍
根據每種顏色的比例不同, 顯示出不同的色彩,
把每種顏色濃淡 使用數字描述 0 - 255
知道16進制 1-9 ABCDEF
(二進制 11111111) 換算成為 16進制 FF
rgb 表示法
rgb(255,0,0)rgba 表示法
rgba(255,0,0,0.5)0-1 之間表示的是顏色的透明度
使用軟件獲取屏幕上的任何顏色
總結
以上是生活随笔為你收集整理的前端笔记1 HTML基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在 Google Play 上保护您的游
- 下一篇： 2017年html5行业报告,云适配发布