HTML5語法基礎學習筆記

時間 2019-11-17

標籤 html5 html 語法基礎學習筆記欄目 HTML5 简体版

原文原文鏈接

1.行間樣式
給單獨的標籤添加樣式.
<div style="width:100px; height:100px; background-color:red;"></div>
優勢：比較方即可以即時的添加屬性。
缺點：修改屬性很是麻煩、須要一個個去修改。css

2.內聯樣式表
<style>
div{ 
}
</style>
優勢：針對當前HTML文件有效。
缺點：多頁面修改時繁瑣困難。瀏覽器

3.外聯樣式表
<head>
<link rel="stylesheet" href="xx.css"/>
</head>ide

邊框：
<style>
div{
width:400px;
height:400px;
border:1px solid red;
}
</style>

<body>
<div></div>
</body>工具

邊框練習的步驟及需求.字體

1.先分析設計圖的結構.
2.根據所分析的結構,進行結構編碼.
3.根據所書寫的結構,進行CSS編碼.
4.利用PS工具,對設計圖上的模塊進行測量以及顏色的拾取.
5.樣式添加.編碼

background 背景
background-color 背景顏色
顏色英文關鍵字
RGB
十六進制
background-image 背景圖
背景圖默認鋪滿整個容器大小
background-repeat
背景是否重複
no-repeat
不重複
repeat-x;
X軸方向橫向平鋪
repeat-y;
Y軸方向縱向平鋪
repeat；
X\Y都重複
background-position:X Y;
背景圖位置
具體數值：
X軸：left right center
Y軸：top bottom center
當第二個Y軸屬性值沒有填寫，默認居中。
background-attachment: fixed;
背景圖是否滾蛋
fixed 固定在瀏覽器可視區域
scroll 跟隨滾動條滾動
background
不分屬性書寫順序的
顏色相關圖片相關url

spa

切圖：
一、頭部區域（第一個塊）切一張完整的圖片
二、內容區域裏的每個小塊須要有ICO而且還有背景顏色設計

文字樣式：
font-weight 文字加粗
bold 加粗
normal 正常orm

font-style 文字傾斜
italic斜體

font-size 文字大小

font-family 字體

line-height 行高文字在一行裏面所佔用的位置

height:400px;
line-height:400px;
當行高的值與容器高度一致時文字會垂直居中顯示

多行文字測量行高的方法：
一、確認文字大小
二、確認兩行文字之間的空隙大小
三、空隙大小除以2，得出來的值就是每行文字的上下的空隙大小。
3.1當行高爲奇數時，那麼文字的上方要比下方少一個像素。
3.2當行高爲偶數時，文字上下的空隙一致。
4.經過輔助線測量多行文字的行高。

文字的複合樣式：
font:bold italic 26px/30px "微軟雅黑";
font複合樣式須要注意書寫順序
font: font-style | font-weight | font-size/line-height | font-family

文本設置：
color
文字顏色
text-align
文本對齊（顯示）方式
left（默認值）
right（右邊）
center（中間）
text-indent
首行縮進
em 是根據字體大小來計算的無論文字怎麼變
1em = 等於始終縮進當前文字的大小
text-decoration 文本修飾
underline 下劃線
letter-spacing 10PX 文本間距10個像素
word-spacing 單詞的間距（以空格判斷文字是否爲單詞）
white-spacing 強制不換行
nowrap 不換行
normal 正常
測量文字大小時、最好是使用從上到下的方式去測量。（左右會有縫隙）
一個空格有多大？
宋體字體下文字大小的一半
1.模塊的文字、單詞間距、文字行高要與設計圖統一
2.思考題：每一行的前方粉色帶三角的區域如何實現

padding內距填充
邊距樣式
padding 內邊距
padding-top 上邊內邊距
padding-right 右邊內邊距
padding-bottom 下邊內邊距
padding-left 右邊內邊距

padding 內填充
注意：設置padding後回撐大容器的大小
padding填充能夠上右下左分別設置（按照順時針方向）
四個方向順序 top right bottom left

padding複合寫法：
只有一個屬性值時：4個方向都是一個值
設置兩個屬性值時：第一個屬性值設置的是上下兩個方向
第二個屬性值設置的是左右兩個方向。
設置三個屬性值時：第一個屬性值設置的是上邊一個方向。
第二個屬性值設置是左右兩個方向。
第三個屬性值設置的是下邊一個方向。
margin 外邊距
標籤與標籤之間的間隔（距離）
margin複合寫法：
只有一個屬性值時：4個方向都是一個值
設置兩個屬性值時：第一個屬性值設置的上下兩個方向
第二個屬性值設置的左右兩個方向
設置三個屬性值時：第一個屬性值設置的是上邊一個方向
第二個屬性值設置的是左右兩個方向
第三個屬性值設置的是下邊一個方向
margin遺留的問題：
1.margin-top傳遞的問題
2.margin上下疊壓
1.還使用margin,能夠將某一個元素方向設置成預想的值。取最大margin值。

盒模型
盒子大小=border+padding+width/height
盒子寬度=左border+左padding+右padding+右border
盒子高度=上border+上padding+下padding+下border 盒模型的大小：
border（左右）+padding（左右）+width/height
margin不佔盒子裏大小
CSS經常使用標籤
a 超連接
僞類給元素添加特殊的效果
:link 未訪問過的連接初始顏色
:visited 訪問事後的連接顏色
:hover 鼠標移入（懸停）
:active 鼠標按下時連接的顏色
設置順序 L、V、H、A

span標籤區分樣式
<header>（頁眉）
主要用於頁面頭部的信息介紹，可用於板塊頭部
</header>
<nav>
導航包含連接的一個列表
<nav><a href="#">連接</a><a href="#">連接</a></nav>
</nav>
<footer>
頁腳頁面的底部和模塊的底部
<footer>
<section>
頁面的板塊用於劃分頁面上的不一樣區域或者劃分文章裏不一樣的節
<section>
<article>
用來在頁面中表示一套結構完整且獨立的內容部分
</article>
<aside>
元素標籤能夠包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組。以及
</aside>
<time>
用來表現時間或日期
</time>

經常使用標籤
<h1>Logo</h1> 最大權重最高
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>標題</h6> 一層層走下來

<ul>·無序列表</ul>
<ol>1.有序列表</ol>
<ul>
<li>ul的子集下一級標籤只能是li</li>
</ul>

<ol>
<li>ol的子集下一級標籤只能是li</li>
</ol>

<dl>自定義列表</dl>
<dl>
<dt>自定義列表title</dt>（DL標籤對只容許有一個）
<dd>自定義列表的列表項（信息）</dd>（能夠有多個）
</dl>

特殊的單標籤img
img 圖片
img src="xx/xx.jpg"路徑

標籤樣式初始化
css reset 原則
但凡是瀏覽器默認的樣式，都不要使用
由於每一個瀏覽器下標籤的默認樣式可能會不一致的狀況（兼容性）。
人爲的將全部樣式所有統一（清楚），再根據實際狀況（設計稿）進行設置
那些樣式是須要重置的？？？
與盒模型相關的樣式
border
margin
padding
標籤特有的樣式
ul>li
ol>li
h1,h2,h3,h4,h5,p,ul{
style...
}
羣組選擇器

書寫原則：
用到什麼標籤就清楚所用標籤的默認樣式。
建議不要直接將全部標籤所有加上。
不要將全部標籤所有統一設置一致的reset,需根據標籤默認樣式特徵來分類設置。

id選擇器：當前頁面惟一使用的標識、相似身份證，不要寫多個。
<div id="box"></div>
<style>
#box{}
</style>

類選擇器：.id名稱能夠是分段class姓名加在同一個
<div class="box bgc"></div>
<style>
.（box）class name{}
.bgc{}
</style>

標籤選擇器：當前頁面上全部標籤名爲XXX的元素
div{}

羣組選擇器：用逗號分隔，被逗號分隔的元素（選擇器）所有套用統一的樣
式。
p,h1,div{}

包含選擇器：我想找到box子級的div 目標父級元素目標元素空格-表明下一級（語法）
<style>
.box div{}
</style>
<div class="box">div1
<div>div2</div>
</div>

*通配符：找到頁面上符合規則的全部元素
body *{}
!!!不建議使用通配符

優先級代碼執行生效的順序
選擇器優先級:
style>id>class>類型選擇>*
行間樣式>id選擇器>類選擇器>標籤選擇器

行間樣式￥1000
id選擇器￥100
類選擇器￥10
標籤選擇器￥1
價格越高權重越高

塊元素：
一、默認獨佔一行
二、沒有寬度時、默認撐滿一行
三、支持全部CSS命令。

內嵌（內聯、行內）元素的特徵：
一、同排能夠繼續跟同類的標籤
二、內容撐開寬度
三、不支持寬高
四、不支持上下的margin
五、代碼換行被解析

塊元素和內聯元素轉換
display:inline 顯示爲內聯
使行塊屬性標籤具有內聯元素的特性
display:block 顯示爲塊
使內聯元素具有塊屬性標籤的特性
display只是將標籤轉換爲頁面中顯示的類型
display不會改變標籤的本質（僞娘本體仍是男性、只是暫時具有女性特徵同理）

選擇器的集體聲明：一次性選擇多個標籤，不一樣的標籤之間用「，」分開。好比h1,h2,h3,h4,p,div{}不管什麼樣的選擇器:標籤選擇器,ID選擇器,類選擇器.只要是選擇器,有公共的CSS代碼就可使用選擇器的集體聲明.精簡案例:#header{font-size:14px; background:#ccc}div{font-size:14px; width:960px;}.blue{font-size:14px; color:#009;}.h1{font-size:14px; font-weight:normal;}能夠精簡font屬性部分，寫成如下：#header,div,.blue,.h1{font-size:14px;}#header{background:#ccc;}div{width:960px;}.blue{color:#009;}.h1{font-weight:normal;}【選擇器的嵌套】#div1 p a{color:#900;}/*意思是在ID爲DIV1內的P標籤的連接a標籤的文字顏色是#900*/這樣好處不須要再單獨爲ID爲DIV1內的P標籤下面的a標籤單獨定義class或者id類，簡化CSS代碼。