整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
)HTML標簽
1.1 雙標簽有:<html></html>,<head></head><title></title>等
1.2 單標簽有:<br/>,<hr/>,<img/>等
2標簽屬性
標簽的屬性現在暫時寫在標簽內,其格式為 屬性名="屬性值"
屬性值:HTML中屬性值既可以用單引號括起來,也可以用雙引號括起來或者不用引號都可以(不推薦)單雙引號一定要配對出現
3)HTML注釋: HTML與XML一樣使用<!-- 注釋內容 -->來做注釋
4)常見標簽
1) meta: meta標簽需要寫在head標簽中,meta屬性及值有兩種寫法
1.1 指定name:<meta name=“名字” content=“值” />網頁的描述信息。
比如:<meta name=“keywords” content=“網頁關鍵詞,有助于SEO”/>
1.2 指定http-equiv:<meta http-equiv="名字" content="值" />模擬http響應頭信息。
比如:<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />指定網頁編碼,防止網頁中的中文出現亂碼
2)h1-h6標簽一般用于標題,表示字體的大小,h1最大h6最小,有助于SEO
3)<p></p>與<br/>標簽 作用都是換行
<p>標簽前后會有比較大的空白一般用于段落,<br/>標簽只是換行
4)<center></center>使頁面內容居中顯示
5)<b>文字顯示為粗體</b>與<strong>文字顯示為粗體粗體(推薦)</strong>
6)<i>文字顯示為斜體</i> 7)<u>文字帶下劃線</u> 8)<em>文字顯示為斜體</em>
9) <sup>2</sup>上標,比如10的平方：10<sup>2</sup>
<sub>2</sub>下標,比如水的化學式：H<sub>2</sub>O
10)<pre></pre> 預格式化可以在頁面原樣輸出
<!DOCTYPE html>
<html>
<head>
<title>常見標簽與屬性</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>預祝大家虎年快樂</h1>
<h2>預祝大家虎年快樂</h2>
<h3>預祝大家虎年快樂</h3>
<h4>預祝大家虎年快樂</h4>
<h5>預祝大家虎年快樂</h5>
<h6>預祝大家虎年快樂</h6>
致敬所有抗疫人員<br />
你們辛苦了!!!<br />
<p>致敬所有邊防軍人,消防員,警察等</p>
<p>祝你們虎年快樂,身康體健</p>
<center>居中顯示</center>
<b>文字顯示為粗體</b>與<strong>文字顯示為粗體粗體(推薦)<strong/><br>
<i>文字顯示為斜體</i>與<em>文字顯示為斜體(推薦)</em> <u>文字帶下劃線</u><br/>
10<sup>2</sup> <br/><!--水的化學式-->
H<sub>2</sub>O <br/><!--10的平方-->
<pre>
葡萄美酒夜光杯，欲飲琵琶馬上催。
醉臥沙場君莫笑，古來征戰幾人回？
</pre>
</body>
</html>顯示效果
本標簽: 32
例:
<dl>
<dt>標題1</dt>
<dd>內容11</dd>
<dd>內容12</dd>
<dt>標題2</dt>
<dd>內容21</dd>
<dd>內容22</dd>
</dl>
target="...",決定鏈接源在什么地方顯示(用戶自定義的名字,_blank,_parent,_self,_top);
rel="...",發送鏈接的類型;
rev="...",保存鏈接的類型;
accesskey="...",指定該元素的熱鍵;
shape="...",允許我們使用已定義的形狀定義客戶端的圖形鏡像(default,rect,circle,poly);
coord="...",使用像素或者長度百分比來定義形狀的尺寸;
tabindex="...",使用定義過的tabindex元素設置在各個元素之間的焦點獲取順序(使用tab鍵使元素獲得焦點).
action="...",接收數據的服務器的URL;
method="...",HTTP的方法(get,,post),其中get是被反對使用的;
enctype="...",指定MIME(Internet媒體類型);
onsubmit="...",當提交表單時發生的內部事件;
noreset="...",在重新設置表單時發生的內部事件;
target="...",決定把內容顯示在什么地方(_blank,_parent,_self,_top)
disabled="...",把按鈕的狀態設置為不能;
name="...",按鈕的控制名,value="...",按鈕的值;
type="...",按鈕的類型(button,,submit,,reset);
type="...",用于輸入控件的類型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一個單選鈕設置為選中的狀態;
disabled="...",把控件的狀態設置為不能使用;
readonly="...",只對輸入密碼的文本框使用;
size="...",表示以像素為單位的除了文本框和密碼框控件之外的其它控件的寬度,它是用來指定字符的數目;
src="...",一個圖像控件的URL;
maxlength="...",指定可以輸入的最多的字符數目;
alt="...",另外一種文本描述;
usemap="...",到客戶端圖形鏡像的URL;
align="...",被反對.控制對齊方式(left,,center,,right,,justify);
tabindex="...",通過定義的tabindex值確定在不同元素之間獲得焦點的順序;
onfocus="...",當元素獲得焦點時發生的事件;
onblur="...",當元素失去焦點時發生的事件;
onselect="...",當元素被選中時發生的事件;
onchang="...",當元素狀態被改變時發生的事件;
accept="...",允許上載的文件類型.
scr="...",定義在幀中顯示的內容的來源;
frameborder="...",定義幀之間的邊界(0或1);
align="...",被反對,控制對齊方式(left,,center,,right,,justify);
height="...",幀的高度,width="..."幀的寬度;
設計是帶有主觀色彩的，同樣網頁設計中的 css 一樣讓人摸不頭腦。網上列舉的實現方式一大把，或許在這里你都看到過，但既然來到這里我希望這篇能讓你看有所收獲，畢竟這也是前端面試的基礎。
1、text-align 方式
text-align 是入門最常用的屬性，根據字面意思是文本對齊用的。
只需在父級標簽上設置即可，雖然內部的子元素不管是塊級元素 or 非塊級元素都可以使用，但需注意塊級元素會占用整行的寬度，文本是在這個寬度中作水平居中。
代碼舉例
頁面效果
2、定寬 margin auto 方式
這也是常見的水平居中方式，通過設置子元素的 margin 屬性來控制距離父元素的距離。需要注意：子元素如果是塊級元素，就最好設置寬度，不然就會占滿于父元素，在通過 text-align 文本居中對齊就沒有意義了。對于非塊級元素必須要設置寬度。
代碼舉例
頁面效果
3、flex 方式
通過設置浮動布局來實現居中，這是相對上兩種方法某種程度上最簡單的實現，因為在其基礎上可以做更多布局的擴展，不用擔心破壞布局。
如果你不了解 flex 布局，可以看下這個鏈接：
https://eminoda.github.io/2018/08/20/css-flex/
設置 justify-content 輕松搞定定位：
代碼舉例
頁面效果
4、position + 浮動 方式
現在這兩種是比較有趣的定位方式，實際場景不建議使用，我是不愿意別人這樣寫，腦袋還要轉個彎，來理解這樣布局的計算方式。
如果元素是塊級元素，通過 float 浮動屬性，將它的寬度“抹去”。然后通過對于上級元素的相對定位通過錯位修正的方式來居中。
讓父元素的左側從中間開始定位，子元素再根據自己的實際寬度往左偏移一半達到水平居中的目的。
代碼舉例
頁面效果
5、position + transform 方式
思路同上，不同的是這次設置子元素為絕對定位，并距離左側偏離一半，最后通過 transform 根據元素的實際寬度往左再偏移一半，達到居中效果。
代碼舉例
頁面效果
上面只列舉了 5 種水平居中的實現方法，相信還要更多的方式。不過不管哪種方法，能在業務代碼實踐中最快速、最準確的運用才是最佳實踐。
希望在讀的各位能有所收獲。
一名工作在一線的前端工程師，樂于實踐，并分享前端開發經驗。
關注【前端雨爸】，歡迎評論留言，愿與各位交流進步。
點擊 ↙ 了解更多，了解更多前端開發技術文章。！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
