前端期末
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）
body：在網頁文檔中，所有文本，圖像，音頻和視頻等代碼只能放在標簽內才能呈現給用戶。
HTML中的標簽不區分大小寫
 ； 空格
常見的圖片格式有GIF動圖、PNG和JPG。
在img標簽中有
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| alt | 文本 | 當圖片未找到，顯示的文字 |
| title | 文本 | 鼠標懸停在圖片上顯示的文字 |
| width | 像素 | 寬度 |
| height | 像素 | 高度 |
| border | 數字 | 圖片邊框 |
| vspace | 像素值 | 垂直邊距 |
| hspace | 像素值 | 水平邊距 |
| align | 方向 | left、right、top、middle、bottom |
a標簽的寫法<a href='www.baidu.com' target='_blank'>百度</a>
- 其中 href 是跳轉的地址url
- target：默認值
_self在當前窗口打開，_blank在新窗口打開。
主題標簽
- header 頭部標簽
- nav
- main 主題標簽
- footer 尾部標簽
CSS使用的三種方式
一、行內式
<html>
<head>
</head>
<body><footer style='background-color: DarkSalmon; color: white;'><p>作者：Bill Gates<br><a href="mailto:bill@example.com">bill@example.com</a></p>
</footer></body>
</html>
二、頁面嵌入
<html>
<head>
<style>
footer {text-align: center;padding: 3px;background-color: DarkSalmon;color: white;
}
</style>
</head>
<body><footer><p>作者：Bill Gates<br><a href="mailto:bill@example.com">bill@example.com</a></p>
</footer></body>
</html>
三、外鏈式
-
index.html<html> <head><link href="style.css" rel="stylesheet" /> </head> <body><footer><p>作者：Bill Gates<br><a href="mailto:bill@example.com">bill@example.com</a></p> </footer></body> </html> -
style.css* {padding: 0;margin: 0; } footer {text-align: center;padding: 3px;background-color: DarkSalmon;color: white; }
Css中的技術選擇器有**標簽選擇器，class類選擇器(.)，id選擇器(#)，通配符選擇器，交集選擇器，并集選擇器(,)，后代選擇器(空格)**。
CSS
-
.box {/* 文字大小 */font-size: 20px;/* 文字加粗 */font-weight: 400;/* 字間距 */letter-spacing: 20px;/* 英文單詞間距 */word-spacing: 20px;/* 行間距 */line-height: 25px;/* 文字居中 */text-align: center;/* 首行縮進 , 2em是兩個字符*/text-indent: 2em; } a {/* 文字 取消下劃線 , underline 下劃線、overline上劃線、line-through設置刪除線*/text-decoration: none; }/* a標簽 超鏈接 樣式 */ /* 超鏈接默認樣式 */ a:link {} /* 超鏈接被點擊后的樣式 */ a:visited {} /* 鼠標經過的樣式 */ a:hover {} /* 單擊時的樣式 */ a:active{}/* 盒子模型 */ .box1 {/* 邊框連接：寬度、樣式、顏色 */border: 20px solid red;/* 下面是邊框單獨設置 *//* 設置邊框顏色 */border-color: black;/* 邊框大小 */border-width: 30px;/* 邊框樣式 */border-style: solid;/* 圓角 */border-radius: 5px;/* 盒子陰影 *//* x 偏移量 | y 偏移量 | 陰影顏色 */box-shadow: 10px 10px black;/* x 偏移量 | y 偏移量 | 陰影模糊半徑 | 陰影顏色 */box-shadow: 10px 5px 5px black;/* 背景圖片 no-repeat 不平鋪、repeat-y 垂直方向平鋪， repeat-x 水平方向平鋪*/background-repeat: no-repeat;/* 背景圖片位置 x軸 、 y軸*/background-position: 20px 20px;/* 設置透明 */opacity: 0.5;/* 浮動 left 左浮動、right右浮動、none 取消浮動*/float: left;/* 定位 static 靜態、relative相對、absolute絕對、fixed固定*/position: static; }
一、html元素分類
html元素：行內元素、塊元素、行內塊元素
二、塊元素
常見的塊級元素：< h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >、< dd >、< dt >、< dl >等，其中 < div > 標簽是最典型的塊元素。
塊級元素的特點：
① 比較霸道，自己獨占一行。
② 高度，寬度、外邊距以及內邊距都可以控制。
③ 寬度默認是容器（父級寬度）的100%。
④ 是一個容器及盒子，里面可以放行內或者塊級元素。
注意：
文字類的元素內不能使用塊級元素
< p > 標簽主要用于存放文字，因此 < p > 里面不能放塊級元素，特別是不能放< div >。同理， < h1 >~< h6 >等都是文字類塊級標簽，里面也不能放其他塊級元素
三、行內元素
常見的行內元素： < a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >、< img />、< input />、< select >、< textarea >、< br />、等，其中 < span > 標簽是最典型的行內元素。有的地方也將行內元素稱為內聯元素。
行內元素的特點：
① 相鄰行內元素在一行上，一行可以顯示多個。
② 高、寬直接設置是無效的。
③ 默認寬度就是它本身內容的寬度。
④ 行內元素只能容納文本或其他行內元素。
注意：
? 鏈接里面不能再放鏈接
? 特殊情況鏈接 < a > 里面可以放塊級元素，但是給 < a > 轉換一下塊級模式最安全
四、行內塊元素
在行內元素中有幾個特殊的標簽 —— < img />、< input />、< td >，它們同時具有塊元素和行內元素的特點。 有些資料稱它們為行內塊元素。
行內塊元素的特點：
① 和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行內元素特點）。
② 默認寬度就是它本身內容的寬度（行內元素特點）。
③ 高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）
網頁模塊的命名規范
- 避免使用中文字符命名
- 不能以數字開頭命名
- 不能用關鍵字
- 用最少的字母達到最容易理解的效果
- 常用的命名還有駝峰命名，蛇形命名
