當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

文计笔记７：HTML与CSS

發(fā)布時(shí)間：2025/4/5 HTML 22 豆豆

生活随笔收集整理的這篇文章主要介紹了文计笔记７：HTML与CSS 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

0 HTML/CSS/JavaScript基礎(chǔ)知識和示例

HTML
https://www.w3school.com.cn/html/index.asp

CSS
https://www.w3school.com.cn/css/index.asp

JavaScript
https://www.w3school.com.cn/js/index.asp

1 HTML介紹

HTML：Hyper Text Markup Language，超文本標(biāo)記語言 ? HTML不是編程語言，而是標(biāo)記語言，標(biāo)記的是網(wǎng)頁的內(nèi)容和排版樣式 ? HTML由標(biāo)記標(biāo)簽（markup tag）構(gòu)成，簡稱HTML標(biāo)簽。HTML 使用這種標(biāo)記標(biāo)簽來描述網(wǎng)頁。 ? 大多數(shù)HTML標(biāo)簽是成對出現(xiàn)的。標(biāo)簽對中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽。（開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽） ? HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如 ? 幾個(gè)主要的標(biāo)簽： ——開始標(biāo)簽，定義頁面從哪里開始到哪里結(jié)束。 ——頭標(biāo)簽 ——文體標(biāo)簽，用來表現(xiàn)網(wǎng)頁的主體內(nèi)容。

1.1 HTML示例

注：HTML不要求縮進(jìn)

2 CSS

? 定義如何顯示網(wǎng)頁上的內(nèi)容，如顏色、字體、位置等 ? 可以放在HTML標(biāo)簽內(nèi)部，也可以放在單獨(dú)的.css文件中

2.1　CSS實(shí)例

3 HTML使用

3.0　設(shè)置標(biāo)題

<head><title>hello title</title> </head>

這樣就有了一個(gè)叫hello title的標(biāo)題

3.1　設(shè)置多級標(biāo)題

標(biāo)題可以從h1一直到h6

3.2　設(shè)置正文內(nèi)容

<body><p>hello world</p></body>

這樣網(wǎng)頁里面就有了一行hello world

3.2.1?折行：

<body><p> This is<br /> a para<br />graph with line breaks </p> </body>

3.2.3 設(shè)置文字風(fēng)格

size預(yù)設(shè)的數(shù)值從1可以設(shè)置到7，數(shù)字越大字越大

3.2.4 HTML中的顏色

HTML顏色代碼——顏色名稱表示，比如blue表示藍(lán)色

用16進(jìn)制的數(shù)值表示RGB的顏色值。RGB每個(gè) 原色：0~255，即16進(jìn)制的00~FF

如：

白色的RGB(255,255,255) #FFFFFF ?

黑色的RGB(0,0,0) ?#000000

3.2.5 常用文字標(biāo)簽

常用的有： ?

<!DOCTYPE html> <html><head><title>hello title</title></head><body><p> <b>粗體字</b> <i>斜體字</i> <strong>粗體字，同b</strong> <em>斜體，表強(qiáng)調(diào)</em> <del>文字加橫線</del> <sub>下標(biāo)字</sub> <sup>上標(biāo)字</sup><big>大字</big><small>小字</small><u>下劃線</u></body> </html>

3.3　注釋

可以一行，也可以多行

3.4 特殊字符

具體特殊字符可見?https://www.w3school.com.cn/charsets/ref_html_8859.asp?，這里舉幾個(gè)例子：

3.5 超鏈接

鏈接錨點(diǎn)對象

用括起來的部分就是超鏈接。

herf等于的部分是超鏈接指向的網(wǎng)址（不一定是網(wǎng)址，圖片，郵箱什么的都可以），之后的部分是超鏈接對應(yīng)的文字

3.5.1 target="blank"

默認(rèn)情況下，會在相同的框架中打開被鏈接文檔。如果我們指定了target="blank"，那么會在新窗口中打開被鏈接文檔。

其中點(diǎn)擊“北京大學(xué)”的話，會彈出新窗口。點(diǎn)擊“清華大學(xué)”的話，則會在原窗口顯示情話的網(wǎng)站。

3.6 顯示圖片

<p>這里有一張圖片: <img alt="圖片未顯示" src="./data/baidu_logo.png"></p>

如果圖片確實(shí)在這個(gè)指定的路徑（路徑是src定義的圖片的路徑）上，那么我們的網(wǎng)頁會顯示圖片。

alt屬性指定關(guān)于圖像的描述性文本。如果瀏覽者不能看到圖像時(shí)，將看到alt屬性注釋的文本。

圖片這一條指令還可以定義圖片的對齊方式（align='left' ; 'center' ; 'right'）

3.6.1 圖片與超鏈接相結(jié)合

此時(shí)不管網(wǎng)頁顯示的是圖片還是alt對應(yīng)的東西，點(diǎn)擊它都會轉(zhuǎn)跳到href定義的網(wǎng)站中。

3.6.2 路徑為url

src也可以不是本地圖片，可以是一個(gè)網(wǎng)址。

<p>這里有一張圖片: <img alt="圖片未顯示" src="https://www.baidu.com/img/bd_logo1.png"></p>

3.6.3 圖片加邊框

編輯圖像時(shí)，有一種使用頻度很高的修飾圖片的方式：給圖像添加邊框。

雖然這是對圖片小小的修飾，但是帶來的效果是相當(dāng)突出的。

在標(biāo)簽中添加“border”屬性和“bordercolor”屬性。

我們現(xiàn)在有一張這個(gè)圖片

現(xiàn)在在網(wǎng)頁中就有了一個(gè)邊框

3.7 輸入

text表示輸入的是文本格式，輸入的內(nèi)容是“text_in"

submit 格式會出來“提交”這個(gè)按鈕

在我們還沒有輸入東西的時(shí)候，網(wǎng)址最后是這樣子的

輸入了內(nèi)容之后，網(wǎng)址變?yōu)?#xff1a;

3.7.1 輸入應(yīng)用：實(shí)現(xiàn)簡易百度跳轉(zhuǎn)

我們先看一個(gè)結(jié)論：如果網(wǎng)址是https://www.baidu.com/s?wd=...，那么我們將來到關(guān)于...的百度搜索中

利用這個(gè)結(jié)論，我們就可以實(shí)現(xiàn)簡易的跳轉(zhuǎn)至百度的功能

<!DOCTYPE html> <html><body><form action="https://www.baidu.com/s"><input type="text" name="wd"><input type="submit" value="百度搜索"></form></body> </html>

我們的動作是轉(zhuǎn)跳到這個(gè)網(wǎng)站，然后在這個(gè)王章后面拼接上？wd=...的內(nèi)容

點(diǎn)擊后會轉(zhuǎn)跳至

3.8 列表

????????3.8.1 無序列表

沒有編號的列表就是無序列表。如項(xiàng)目說明，這是一種并列關(guān)系的列表。

無序列表以

標(biāo)簽開始，至

標(biāo)簽結(jié)束。（ul表示unordered list）

在

標(biāo)簽中，還需要使用標(biāo)簽
來定義列表的每一行，具體的寫法如下所示
- ： <ul><li>……</li><li>……</li><li>……</li> </ul>
  3.8.2 有序列表
  
  有序列表中的條目按照順序依次排列。
  
  它和無序列表的唯一的區(qū)別體現(xiàn)代碼上，即有序列表使用
- 開始，以
- 有序列表中同樣使用標(biāo)簽
- 來定義列表的每一行，具體的寫法如下： <ol><li>……</li><li>……</li><li>……</li></ol>
  3.8.3 定義列表
  
  定義列表是一種縮進(jìn)樣式的列表，設(shè)計(jì)的本意是要用于定義術(shù)語。
  
  使用
  來定義頁面中的每一行。
  和有序列表、無序列表不同的是，在定義列表中，列表中會添加縮進(jìn)行來展示這個(gè)列表的條目，使用
  標(biāo)簽來定義縮進(jìn)行。它的代碼寫法如下： <dl><dt>…</dt><dd>…</dd><dt>…</dt><dd>…</dd> </dl>
  例子：
  <html><head><title>制作定義列表</title></head><body ><h3>鏡頭畫面的剪輯</h3><dl><dt>分剪</dt><dd>一個(gè)鏡頭分成兩個(gè)鏡頭或者兩個(gè)以上的鏡頭使用。</dd><dt>挖剪</dt><dd>將一個(gè)完整鏡頭中的動作、人和物運(yùn)動鏡頭在運(yùn)動中的某一部位上的多余的部分挖剪去。</dd></dl></body> </html>
  效果：
  
  3.8.4 嵌套列表
  
  ????????在使用列表時(shí)經(jīng)常會遇到需要將一個(gè)列表放入另一個(gè)列表中的情況，也就是以一個(gè)列表做另一個(gè)列表的一行的情況。
  
  ????????這種情況稱之為列表嵌套。列表嵌套就是列表里還有列表。
  
  ????????無論是無序列表嵌套，還是有序列表嵌套，或者是無序列表和有序列表的混合嵌套列表，它們的代碼寫法都是一個(gè)原則，就是遵從HTML代碼的使用規(guī)則，將一個(gè)列表的標(biāo)簽完全放入在另一個(gè)標(biāo)簽內(nèi)。
  
  ????????這是一種父子級的關(guān)系。這種方法常用來表示復(fù)雜的導(dǎo)航，應(yīng)用廣泛。
  
  3.9 水平線
  
  ????????經(jīng)常在設(shè)計(jì)頁面的時(shí)候，需要在網(wǎng)頁中插入一條水平線來隔開文本，或者是為了起到美化頁面的作用。
  
  ????????水平線是設(shè)計(jì)頁面中的一個(gè)特殊的小部分，使用頁面標(biāo)簽可以實(shí)現(xiàn)這個(gè)功能，代碼的寫法是：
  <hr align="…" width="…" size="…">
  
  標(biāo)簽即是放入水平線的意思。
  在編輯水平線的時(shí)候，可以使用align屬性編輯其對齊模式。
  
  width屬性和size屬性下填入具體的數(shù)字，單位是像素，width屬性即表示水平線的長度，而size屬性用來表示水平線的寬度。
  <html><body><p> hello </p><hr align='left' width='1000' size='10'><p> hi </p></body> </html>
  
  3.10 改變背景
  擁有兩個(gè)配置背景的標(biāo)簽。背景可以是顏色或者圖像。
  3.10.1 改變背景顏色
  
  背景顏色屬性將背景設(shè)置為某種顏色。
  
  屬性值可以是十六進(jìn)制數(shù)、RGB 值或顏色名。
  <html><body bgcolor='green'><p> hello </p></body> </html>
  
  3.10.2 設(shè)置背景圖像
  
  背景屬性將背景設(shè)置為圖像。屬性值為圖像的URL。
  
  如果圖像尺寸小于瀏覽器窗口，那么圖像將在整個(gè)瀏覽器窗口進(jìn)行復(fù)制。
  <html><body background="dov.jpeg"><p> hello </p></body> </html>
  
  4 CSS 使用
  
  一個(gè)CSS看上去是這樣的：? ? ?
  body {font-family: 黑體; //字體樣式font-size: 80%; //字體大小color: black; //字體顏色background-color:blue; //背景顏色}
  它定義了HTML文檔的Body部分，以上面所定義的格式進(jìn)行顯示。
  
  4.1 設(shè)置標(biāo)題格式
  
  text_align：左對齊： left；右對齊：right；中間對齊：center?
  
  color：設(shè)置顏色
  
  texxt_decoration：設(shè)置下劃線等
  <body><h1 style="text-align: center; color: red; text-decoration:underline">一級標(biāo)題</h1><h2 style="text-align: center; color: blue">二級標(biāo)題</h2><h3 style="text-align: center; color: purple; text-decoration:line-through">三級標(biāo)題</h3> </body>
  
  4.1.1 將相同屬性提取在body里面
  
  如果這幾個(gè)標(biāo)題有一些屬性是一樣的，我們可以把它們提取出來：
  <body style="text-align: center"><h1 style="color: orange; text-decoration:underline">一級標(biāo)題</h1><h2 style="color: green">二級標(biāo)題</h2><h3 style="color: grey; text-decoration:line-through">三級標(biāo)題</h3> </body>
  4.1.2 在head中預(yù)定義style
  
  如果我們一個(gè)網(wǎng)頁里面內(nèi)所有的一級、二級、三級標(biāo)題都是這樣的格式，那么我們可以在head中預(yù)定義各級標(biāo)題格式：
  
  代碼第一行中“DOCTYPE”即“Document Type”的簡寫，意思是“文檔類型”
  <!DOCTYPE html> <html><head><style>body{text-align: center;}h1{color: red;text-decoration:underline;} h2{color: blue;}h3{color: purple;text-decoration:line-through;} </style><title>style</title></head><body><h1>一級標(biāo)題</h1><h2>二級標(biāo)題</h2><h3>三級標(biāo)題</h3></body> </html>
  但注意一點(diǎn)，無論是4.1.1還是4.1.2，正文里面的部分也會服從body中定義的格式
  
  以4.1.2 為例：
  <body><h1>一級標(biāo)題</h1><h2>二級標(biāo)題</h2><h3>三級標(biāo)題</h3><p> lalala</p></body>
  
  4.2 自定義格式類型
  
  我們可以在head中自定義格式類型。然后在正文中，用class='...'來使用
  <!DOCTYPE html> <html><head><style>.centered{text-align: center;}.highlight_text{color: red;font-style:italic;} .normal_text{color: black;}.deleted_text{color: grey;text-decoration:line-through;}</style><title>selector</title></head><body class="centered"><h1>Welcome</h1><p class="highlight_text">斜體紅字，highlight_text</p><p class="normal_text">黑色，normal_text</p><p class="deleted_text">刪去，deleted_text</p></body> </html>
  我們在head中分別定義了centered、highlight_text、normal_text、deleted_text四個(gè)類（定義的時(shí)候，每個(gè)類前面需要加一個(gè).）
  
  使用的時(shí)候，就是在p里面聲明我們使用那個(gè)類就好了。效果如下：
  
  4.2.1 使用本地CSS文件
  
  如果我在本地定義了CSS格式（存放于文件“[ok]07_0_mystyle.css”中），文件中的內(nèi)容如下
  .centered{text-align: center;} .highlight_text{color: red;font-style:italic;} .normal_text{color: black;} .deleted_text{color: grey;text-decoration:line-through;}
  那我們也可以在HTML中使用這個(gè)CSS，達(dá)到一樣的效果：
  <!DOCTYPE html> <html><head><link href="[ok]07_0_mystyle.css" rel="stylesheet"/><title>css</title></head><body class="centered"><h1>Welcome</h1><p class="highlight_text">斜體紅字，highlight_text</p><p class="normal_text">黑色，normal_text</p><p class="deleted_text">刪去，deleted_text</p></body> </html>
  這個(gè)本地的文件我們稱之為外部樣式表。它的存在可以極大地提高效率
  
  4.3?CSS的語法格式
  
  4.4 CSS選擇器
  
  4.4.1 HTML選擇器
  
  在head中重新定義HTML的某種標(biāo)簽的顯示格式
  <html><head><title> HTML選擇器的使用</title><style>h1 {color:#555555; font-size:2.3em; font-family: 微軟雅黑; }</style></head><body><h1> HTML選擇器的使用</h1></body> </html>
  4.4.2 id選擇器
  
  對于HTML文檔中的某個(gè)標(biāo)簽，定義它的顯示格式
  
  4.4.3 class選擇器 ?
  
  ?對于HTML文檔中的某類標(biāo)簽，定義它的顯示格式

總結(jié)

以上是生活随笔為你收集整理的文计笔记７：HTML与CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： GNN笔记：傅里叶变换
下一篇： web浏览器录音：web audio a

HTML

文计笔记７：HTML与CSS

0 HTML/CSS/JavaScript基礎(chǔ)知識和示例

1 HTML介紹

1.1 HTML示例

2 CSS

2.1 CSS實(shí)例

3 HTML使用

3.0 設(shè)置標(biāo)題

3.1 設(shè)置多級標(biāo)題

3.2 設(shè)置正文內(nèi)容

3.2.1?折行：

3.2.3 設(shè)置文字風(fēng)格

3.2.4 HTML中的顏色

3.2.5 常用文字標(biāo)簽

3.3 注釋

3.4 特殊字符

3.5 超鏈接

3.5.1 target="blank"

3.6 顯示圖片

3.6.1 圖片與超鏈接相結(jié)合

3.6.2 路徑為url

3.6.3 圖片加邊框

3.7 輸入

3.7.1 輸入應(yīng)用：實(shí)現(xiàn)簡易百度跳轉(zhuǎn)

3.8 列表

????????3.8.1 無序列表

3.8.2 有序列表

3.8.3 定義列表

3.8.4 嵌套列表

3.9 水平線

3.10 改變背景

3.10.1 改變背景顏色

3.10.2 設(shè)置背景圖像

4 CSS 使用

4.1 設(shè)置標(biāo)題格式

4.1.1 將相同屬性提取在body里面

4.1.2 在head中預(yù)定義style

4.2 自定義格式類型

4.2.1 使用本地CSS文件

4.3?CSS的語法格式

4.4 CSS選擇器

4.4.1 HTML選擇器