前端第一天，第六十五天
付銘老師：18618176338
復習資料網(wǎng)址：http://unclealan.cn/docs/python/front-end/chapter1/html3css3ji-chu.html
HTML
1 HTML基本語法
html標簽
-
單標簽<img />, <img>
-
雙標簽<html>, </html>
屬性屬于標簽
<img src="圖片的地址"> <table width="100" height="200"></table>語法規(guī)范
-
標簽嵌套用縮進
-
標簽名不區(qū)分大小寫(建議小寫)
-
屬性名 不區(qū)分大小寫(建議小寫)
注釋
<!-- 單行 --> <!-- 多行 -->常用HTML實體
-
空格 non-break space
-
< < less-than
-
<
-
> > greater-than
-
& & ampsand
-
© 版權 copyright
-
¥ 人民幣 yen(日元)
2 HTML常用標簽
主體結構
-
<html></html>
-
<head></head>
-
<body></body>
<!DOCTYPE html> <html><head><title></title></head><body></body> </html>
HEAD標簽
-
<title></title> 網(wǎng)站標題
<!-- 指定網(wǎng)頁標題 --> <title>同志交友</title> -
<meta> 指定網(wǎng)頁的元信息 指定關鍵字 指定描述 指定字符集
屬性:charset, name, content
<meta charset="utf-8"> <meta name="keywords" content="同志交友,交友平臺,同志,同志相親"> <!-- 添加網(wǎng)頁的具體描述信息 --> <meta name="description" content="全國最大的同志交友平臺"> -
<style></style> 設置標簽格式
<!-- 設定網(wǎng)頁h1標題的顏色為紅色 --> <style type="text/css">h1 {color: red;}</style> -
<link> 導入css或者指定網(wǎng)頁圖表
屬性:src, type, rel
<!-- 導入01.css文件中的css代碼，name和type固定格式 --> <link rel="stylesheet" type="text/css" href="./01.css"> <!-- 指定網(wǎng)頁的圖表是friends.ico這種類型的圖片,name和type固定格式 --> <link rel="shortcut icon" type="image/x-icon" href="./friends.ico"> -
<script></script>導入javascript
格式排版標簽
-
<hn></hn>1~6標題 headline
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6> -
<p></p>段落 paragraph
<p>段落</p> -
<pre></pre>原樣輸出 pre process
<pre>輸入什么輸出就是什么,換行也能顯示</pre> -
<br>換行 break
<br>如果用了p標簽,那么我就能在p標簽里起著換行的作用 -
<hr>分隔 horizontal
<hr>如果用了hr標簽,那么會有一條分割線 -
<div></div>沒有任何語意的標簽(分開)
<div>我可以把這里面的代碼分隔開</div>
文本標簽
-
<em></em>強調(diào) 表現(xiàn)為斜體
<em>文字左右兩側加上我就變斜體了</em> -
<strong></strong>強調(diào) 表現(xiàn)為粗體
<strong>文字左右兩側加上我就能變粗體</strong> -
<mark></mark>H5新增 表示被選擇
<mark>文字左右兩側加上我就能被特殊標記</mark> -
<sup></sup>上標
<sup>文字左右兩側加上我就能有上標,例如100的平方</sup> -
<sub></sub>下標
<sub>文字左右兩側加上我就能有下標,例如水的化學表示</sub> -
<ins></ins>添加的內(nèi)容
<ins>文字左右兩側加上我就能有下劃線顯示他是被添加的內(nèi)容</ins> -
<del></del>刪除的內(nèi)容
<del>文字左右兩側加上我就能有穿過文字的線</del> -
<ruby></ruby>/<rt></rt>加拼音 H5新增
<!-- 同志就變成了小學里學的頭頂有拼音的同志 --> <ruby>同志<rt>tongzhi</rt> </ruby>
4 css基本語法
使用css
-
link引入外部的css文件
-
<style></style>在html中寫
-
使用html元素的style屬性
格式
選擇{css屬性:值;css屬性:值; } 選擇器 {屬性:值;屬性:值}注釋
/* */css長度單位
px 像素 em 默認大小的倍數(shù),字體默認大小16 % 默認大小參照,50%代表全屏長度的50% cm 厘米 mm 毫米 pt 用于印刷業(yè)css顏色單位
colorName： red/green/bue/purple/orange/yellow/pink/skyblue ? rgb數(shù)字 rgb(34,45,23) rgb(20%, 57%, 100%) ? 16進制 ? #abcdef ? #f90 ? #ccc5 css選擇器
# 標簽名選擇器（HTML元素選擇器） tagName{ ? } ? # 類名選擇器 .className{} ? # ID選擇器 idName{} ? # 全局選擇器 * {} ? # 組合 后代元素 # 通過混用兩個選擇器（ID選擇器、標簽名選擇器、類名選擇器）定位到一個含有某些特定屬性的標簽 選擇器 選擇器.nav li {}#box div {}div .list {}.container li {} ? # 組合 子元素 # 挑選出某個選擇器下大于另一個選擇器的一個標簽 選擇器>選擇器.nav>li {}#box>div {}div>.list {}.container>li {} ? # 群組 選擇器,選擇器,選擇器 # 通過混用多個選擇器精確定位到一個含有某個特征的選擇器} ?body,ul,li,p,figure,table,.item,.list-item { ?} ? # 多條件 # 通過混用多個選擇器精確定位到多個含有某個特征的選擇器div.item { ?}.item.list-item { ?}div#container { ?} ?6 選擇器優(yōu)先級
ID > CLASS > tagName > * ? 組合選擇器,通過數(shù)數(shù)來判斷: 計算 選擇符 中ID的數(shù)量(=a) ? ? ? ? ? ? ? ? ? ? 計算 選擇符 中 類選擇器 屬性選擇器 偽類選擇器 的數(shù)量(=b) ? ? 計算選擇符 中 標簽選擇器 偽對象選擇器的數(shù)量 (=c) ? ? ? ? 忽略全局選擇器 ? ? ? ? ? ? ? ? ? ? ? ? ? ? a的權重100 b的權重10 ? c的權重1 ? 相加7 css常用屬性
-
font
font:字體風格[字體加粗[<字體大小>[/行高]<字體族科> # 字體大小和字體族科必須得有 -
font-family 字體族科 宋體(襯線字體)|微軟雅黑(非襯線字體)
font-family:"Arial",sans-serif; # serify 襯線字體;sans-serif 非襯線字體 # 如果系統(tǒng)中不自帶Arial字體,瀏覽器會自動選擇非襯線字體 -
font-size 字體大小
-
font-style 字體風格 normal | italic | oblique (斜體,一般用于italic)
-
font-weight 字體加粗 normal | bold | lighter (加粗,一般用bold)
-
font-cariant 字體變形 normal | small-caps (字體比原來字體小,適用于英文大寫字母)
文字顏色
-
color 設置文字顏色
文本屬性
-
letter-spacing 字母間隔 值為長度,可以是負值(可適用于中文)
-
word-spacing 詞的間距(通過空格識別)
-
text-decoration 文字修飾
underline # 下劃線 overline # 字符頭頂?shù)纳蟿澗€ line-through # 穿過字符的線 none(默認) -
text-align 橫向排列 left | right | center # 字體位置
-
vertical-align 一般用于圖片和文字, 使用middle后文字能在圖片長度的中間
-
text-indent 文本縮進 一般用2em(2個字)50px
-
line-height 設置行間距離,如果只有一行文本并且行間距離=設置的文本框長度,則文本會垂直居中
-
word-wrap normal | break-word
在長單詞和url地址內(nèi)部進行換行,如果不使用,長單詞或者url長度超過文本框長度,超出的部分會超出文本框 -
overflow-wrap CSS3中新增的，等同于word-wrap
-
white-space nomal | pre | nowrap | pre-wrap | pre-line
一般用pre和pre-wrap,pre是原生字符的意思,換行之類的也會顯示,但是文本超過文本框不會換行;pre-wrap則會強制換行?
?
?
?
總結
以上是生活随笔為你收集整理的前端第一天，第六十五天的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mono入门应用
- 下一篇： 前端必备的开发工具推荐——VScode代