當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端第一天，第六十五天

發布時間：2023/12/18 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了前端第一天，第六十五天小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

付銘老師：18618176338

復習資料網址：http://unclealan.cn/docs/python/front-end/chapter1/html3css3ji-chu.html

HTML

1 HTML基本語法

html標簽

單標簽<img />, <img>
雙標簽<html>, </html>

屬性屬于標簽

語法規范

標簽嵌套用縮進
標簽名不區分大小寫(建議小寫)
屬性名不區分大小寫(建議小寫)

注釋

常用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> 網站標題
 <title>同志交友</title>
<meta> 指定網頁的元信息指定關鍵字指定描述指定字符集

屬性:charset, name, content
<meta charset="utf-8"> <meta name="keywords" content="同志交友,交友平臺,同志,同志相親">  <meta name="description" content="全國最大的同志交友平臺">
<style></style> 設置標簽格式
 <style type="text/css">h1 {color: red;}</style>
<link> 導入css或者指定網頁圖表

屬性:src, type, rel
 <link rel="stylesheet" type="text/css" href="./01.css">  <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>強調表現為斜體
<em>文字左右兩側加上我就變斜體了</em>
<strong></strong>強調表現為粗體
<strong>文字左右兩側加上我就能變粗體</strong>
<mark></mark>H5新增表示被選擇
<mark>文字左右兩側加上我就能被特殊標記</mark>
<sup></sup>上標
<sup>文字左右兩側加上我就能有上標,例如100的平方</sup>
<sub></sub>下標
<sub>文字左右兩側加上我就能有下標,例如水的化學表示</sub>
<ins></ins>添加的內容
<ins>文字左右兩側加上我就能有下劃線顯示他是被添加的內容</ins>
<del></del>刪除的內容
<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 默認大小的倍數,字體默認大小16 % 默認大小參照,50%代表全屏長度的50% cm 厘米 mm 毫米 pt 用于印刷業

css顏色單位

colorName： red/green/bue/purple/orange/yellow/pink/skyblue ? rgb數字 rgb(34,45,23) rgb(20%, 57%, 100%) ? 16進制 ? #abcdef ? #f90 ? #ccc

5 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 選擇器優先級

ID > CLASS > tagName > * ? 組合選擇器,通過數數來判斷: 計算選擇符中ID的數量(=a) ? ? ? ? ? ? ? ? ? ? 計算選擇符中類選擇器屬性選擇器偽類選擇器的數量(=b) ? ? 計算選擇符中標簽選擇器偽對象選擇器的數量 (=c) ? ? ? ? 忽略全局選擇器 ? ? ? ? ? ? ? ? ? ? ? ? ? ? a的權重100 b的權重10 ? c的權重1 ? 相加

7 css常用屬性

font
font:字體風格[字體加粗[<字體大小>[/行高]<字體族科> # 字體大小和字體族科必須得有
font-family 字體族科宋體(襯線字體)|微軟雅黑(非襯線字體)
font-family:"Arial",sans-serif; # serify 襯線字體;sans-serif 非襯線字體 # 如果系統中不自帶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 # 字符頭頂的上劃線 line-through # 穿過字符的線 none(默認)
text-align 橫向排列 left | right | center # 字體位置
vertical-align 一般用于圖片和文字, 使用middle后文字能在圖片長度的中間
text-indent 文本縮進一般用2em(2個字)50px
line-height 設置行間距離,如果只有一行文本并且行間距離=設置的文本框長度,則文本會垂直居中
word-wrap normal | break-word
在長單詞和url地址內部進行換行,如果不使用,長單詞或者url長度超過文本框長度,超出的部分會超出文本框
overflow-wrap CSS3中新增的，等同于word-wrap
white-space nomal | pre | nowrap | pre-wrap | pre-line
一般用pre和pre-wrap,pre是原生字符的意思,換行之類的也會顯示,但是文本超過文本框不會換行;pre-wrap則會強制換行
?

總結

以上是生活随笔為你收集整理的前端第一天，第六十五天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Mono入门应用
下一篇：前端必备的开发工具推荐——VScode代