Html 學(xué)習(xí)筆記

1. 基本標(biāo)簽, 重點(diǎn)標(biāo)簽: <a>, <img>
2. 幾個(gè)mate標(biāo)簽的意思
3. 字符集

html,css,js 的定位

• html 負(fù)責(zé)語(yǔ)義標(biāo)記
• css 負(fù)責(zé)頁(yè)面樣式
• js 負(fù)責(zé)動(dòng)態(tài)效果

字符集

utf-8包含了世界所有的文字，gbk只包含了中文，但是因?yàn)閡tf-8包含的內(nèi)容多，標(biāo)記每個(gè)字符的位數(shù)也多。一個(gè)漢字，utf-8用了3個(gè)字節(jié)，gbk只用了兩個(gè)。
目前網(wǎng)易和騰訊都是用的 gbk

SEO 優(yōu)化的字段

    <meta name="Description" content="Hello World">
    <meta name="Keywords" content="Key1">

Html 語(yǔ)法的特性

1. html 對(duì)換行不敏感，多個(gè)換行或者tab，最終都識(shí)別成一個(gè)空格
2. 標(biāo)簽分為 容器標(biāo)簽 和 文本標(biāo)簽，只有容器標(biāo)簽才可以包含其他標(biāo)簽，例如 p 標(biāo)簽如果包含了 h 標(biāo)簽，瀏覽器會(huì)自動(dòng)給 p 標(biāo)簽加上結(jié)尾，把這兩個(gè)標(biāo)簽分離開(kāi)

<img> 圖片標(biāo)簽

1. alt 屬性：在圖片顯示不出來(lái)的時(shí)候，會(huì)顯示這個(gè)屬性里面的值
2. title 屬性：鼠標(biāo)放在圖片上的時(shí)候顯示的值

<a> 超鏈接標(biāo)簽

1. a 代表著 anchor 船拋錨的意思，就像是這個(gè)頁(yè)面向另一個(gè)頁(yè)面拋出了錨，跳轉(zhuǎn)到另一個(gè)頁(yè)面
2. href 讀 何瑞福
3. title 懸停文本，和圖片標(biāo)簽使用方式一樣
4. target ：可以設(shè)置為 _blank ，表示在一個(gè)新的頁(yè)面打開(kāi)
5. <a> 是一個(gè)文本標(biāo)簽，但是可以被 <p> 標(biāo)簽包裹，因?yàn)?a 的語(yǔ)義小于 p，這點(diǎn)也是很奇怪

div 和 span

1. span 是文本標(biāo)簽，只能包含文字，圖片；例如 <a>, <img>

其他常用標(biāo)簽

1. 列表：

   <ul> // 無(wú)序列表
   <ol> // 有序列表
   <dl> // 定義列表，一般用在網(wǎng)頁(yè)尾部，購(gòu)物指南，下面一列，配送方式，下面一些，例如京東最下方，纖細(xì)看CSS第一天筆記第9頁(yè)
    <dt>北京</dt>
    <dd>國(guó)家首都，政治文化中心</dd>
       <dt>上海</dt>
    <dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
       <dt>廣州</dt>
    <dd>中國(guó)南大門(mén)，有珠江、小蠻腰</dd>
   </dl>
   

2. 表單

   <input type="">:
   text,password,raidobutton,checkbox,select->option,textarea
   // lable 標(biāo)簽主要是給 input 標(biāo)簽增加解釋文字
   <input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>
   

小技巧

1. 按住 shift 再按字母可以大寫(xiě)，比頻繁切換大小寫(xiě)切換鍵 capslock 更快捷

面試題

Q：h1 標(biāo)簽有什么用？
A：R：在頁(yè)面中增加主標(biāo)題的語(yǔ)義
A：W：給文字加粗等等