今天想整理下關於HTML的先關知識。
現在的業界的標準，網頁技術嚴格的三層分離：html就是負責描述頁面的語義；css負責描述頁面的樣式；js負責描述頁面的動態效果的。
所以，html不能讓文字居中，不能更改文字字號、字體、顏色。因爲這些都是屬於樣式範疇，都是css乾的事兒；html不能讓盒子運動起來，因爲這些屬性行爲範疇，都是js乾的事兒。
html只能幹一件事兒，就是通過標籤對兒，給文本增加語義。這是html唯一能做的。
編寫代碼工具
1.sublime
2.webstorm
3.vscode
sublime中的常用快捷鍵：
ctrl+滾輪 放大縮小文字
ctrl+shift+d 複製當前行
ctrl+shift+k 刪除當前行
ctrl+shift+↑ 上移當前行
ctrl+shift+↓ 下移當前行
HTML 簡介
超文本標記語言
HTML負責頁面的結構. 它是通過HTML標籤的形式來定義出頁面中的各個部分
HTML頁面基本結構
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
HTML 標籤
標籤又稱之爲元素
普通標籤
語法<標籤名></標籤名>
自結束標籤
語法:<標籤名/>
屬性
可以在標籤或自結束標籤中爲標籤(元素)添加屬性
語法:
<標籤名 屬性名=“屬性值”></標籤名><標籤名 屬性名=“屬性值” />
HTML常用標籤
<!doctype html>文檔聲明. 表示當前頁面是以HTML5規範編寫的
<html>網頁的根標籤,有且只有一個.網頁的所有內容都在根標籤中
<head>網頁的頭部標籤. 可以幫助瀏覽器來解析頁面或幫助搜索引擎檢索網頁
<title>網頁的標題標籤. 內容會默認顯示在網頁的標題欄中
搜索引擎檢索網頁時會主要檢索title中的內容.來判斷網頁的主要內容.會影響到網頁在搜索引擎的排名
<meat/><link href="img/icon_mouse_32.ico" rel="shortcut icon" type="image/x-icon"/><meta http-equiv="refresh" content="3;url=http://www.baidu.com" /><meta name="description" content="專注於蒐集美女圖片的網站" /><meta name="keyword" content="前端,html5,java”/><meta charset="utf-8" />定義當前頁面的字符集
可以定義網頁中的關鍵字
可以設置網頁的描述信息
可以用來做重定向請求
可用來製作網站的小圖標
<body>網頁的主題. 所有可見內容都應該寫在body標籤中
<h1>~<h6>內容標題標籤
從h1到h6重要性依次遞減
一般一個頁面中只有一個h1標籤
一般只使用h1-h3
<p>網頁中的段落標籤
<br/>換行
<hr/>水平分割線
<ul><li>無序列表
<ol><li>有序列表
<dl><dt><dd>定義列表
<img/>圖標標籤
屬性:
src: 指向外部圖片的路徑
alt: 圖標描述信息
<a>_self: 默認值.當前窗口的卡愛
_blank: 在新的窗口的打開
通過超鏈接可以使從一個頁面跳轉到另一個頁面
屬性:
href: 指定要打開的頁面地址或路徑
target:[可選] 要打開頁面的位置
<!-- -->html註釋的內容
用來對代碼進行描述或解釋說明
實體 (轉義字符)
可以使用實體來表示一些特殊符號
語法:
&實體名字; ©
&#x四位code編碼;☭
常用實體:
空格
小於號<
<大於號>
>版權符號
©
HTML 表格
使用
<table>標籤創建表格在
table標籤中使用<tr>來代表表格中的一行在
<tr>標籤中使用<td>代表每一行中的單元格<thead>表示表格的頭部.永遠顯示在表格頭部
可以將頭部信息的
<tr>放到<th>中填寫頭部信息<tbody>表示表格的主體. 可以將主題的
<tr>放到`````````中<tfoot>表示表格的底部. 可以將底部的
<tr>放到<tfoot>中注意: 默認情況下的如果創建一個表格沒有指定
<tbody>時瀏覽器會自動添加一個.並將所有<tr>都放到<tbody>裏.選擇器使用後代選擇器
HTML 表單
使用
<form>標籤來創建表單表單標籤必須有一個action屬性
action需要一個服務器地址.當提交表單時,會提交到該地址
表單常用種類
文本框
使用input標籤創建
type="text"提交到服務器元素必須指定name屬性
密碼框
使用input標籤創建
type="password"提交按鈕
使用input標籤創建
type="submit"提交按鈕中可通過設置value的值指定按鈕中的文字
單選項
使用input標籤創建
type="radio"checked="checked"單選框默認選中狀態name屬性用來對單選項分組
value屬性會提交到服務器
多選項
使用input標籤創建
type="checkbox"checked="checked"多選框默認選中狀態name屬性用來對單選項分組
value屬性會提交到服務器
下拉列表
使用
<select>標籤創建下拉列表<select>標籤需要name屬性使用
<option>標籤來向下拉列表中添加選項<option>標籤需要value屬性可以爲某個
<option>添加selected=“selected”設置默認選中狀態可以爲
<select>添加一個屬性multiple="multiple"可以設置多選重置按鈕
使用input標籤創建
type="reset"按鈕
type="button"創建一個單純的按鈕也可以使用
<button>標籤來創建<button>更加靈活