文计笔记７：HTML与CSS
0 HTML/CSS/JavaScript基礎(chǔ)知識(shí)和示例
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)記語(yǔ)言 ? HTML不是編程語(yǔ)言，而是標(biāo)記語(yǔ)言，標(biāo)記的是網(wǎng)頁(yè)的內(nèi)容和排版樣式 ? HTML由標(biāo)記標(biāo)簽（markup tag）構(gòu)成，簡(jiǎn)稱(chēng)HTML標(biāo)簽。HTML 使用這種標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)。 ? 大多數(shù)HTML標(biāo)簽是成對(duì)出現(xiàn)的。標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽。（開(kāi)始和結(jié)束標(biāo)簽也被稱(chēng)為開(kāi)放標(biāo)簽和閉合標(biāo)簽） ? HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 ? 幾個(gè)主要的標(biāo)簽： ——開(kāi)始標(biāo)簽，定義頁(yè)面從哪里開(kāi)始到哪里結(jié)束。 ——頭標(biāo)簽 ——文體標(biāo)簽，用來(lái)表現(xiàn)網(wǎng)頁(yè)的主體內(nèi)容。1.1 HTML示例
注：HTML不要求縮進(jìn)
2 CSS
? 定義如何顯示網(wǎng)頁(yè)上的內(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è)置多級(jí)標(biāo)題
標(biāo)題可以從h1一直到h6
<body><h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2><h3>三級(jí)標(biāo)題</h3></body>3.2 設(shè)置正文內(nèi)容
<body><p>hello world</p></body>這樣網(wǎng)頁(yè)里面就有了一行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顏色代碼——顏色名稱(chēng)表示，比如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>文字加橫線(xiàn)</del> <sub>下標(biāo)字</sub> <sup>上標(biāo)字</sup><big>大字</big><small>小字</small><u>下劃線(xiàn)</u></body> </html>3.3 注釋
可以一行，也可以多行
<!--這是注釋--><!--<p>１２３４５</p> -->3.4 特殊字符
具體特殊字符可見(jiàn)?https://www.w3school.com.cn/charsets/ref_html_8859.asp?，這里舉幾個(gè)例子：
<p>特殊字符：¥©®¼¾</p>3.5 超鏈接
鏈接錨點(diǎn)對(duì)象
<p>歡迎訪(fǎng)問(wèn)：<a href="http://www.pku.edu.cn">北京大學(xué)</a></p>用括起來(lái)的部分就是超鏈接。
herf等于的部分是超鏈接指向的網(wǎng)址（不一定是網(wǎng)址，圖片，郵箱什么的都可以），之后的部分是超鏈接對(duì)應(yīng)的文字
3.5.1 target="blank"
默認(rèn)情況下，會(huì)在相同的框架中打開(kāi)被鏈接文檔。如果我們指定了target="blank"，那么會(huì)在新窗口中打開(kāi)被鏈接文檔。
<p><a href="http://www.pku.edu.cn" target="_blank">北京大學(xué)</a><a href="http://www.tsinghua.edu.cn">清華大學(xué)</a> </p>其中點(diǎn)擊“北京大學(xué)”的話(huà)，會(huì)彈出新窗口。點(diǎn)擊“清華大學(xué)”的話(huà)，則會(huì)在原窗口顯示情話(huà)的網(wǎng)站。
3.6 顯示圖片
<p>這里有一張圖片: <img alt="圖片未顯示" src="./data/baidu_logo.png"></p>如果圖片確實(shí)在這個(gè)指定的路徑（路徑是src定義的圖片的路徑）上，那么我們的網(wǎng)頁(yè)會(huì)顯示圖片。
alt屬性指定關(guān)于圖像的描述性文本。如果瀏覽者不能看到圖像時(shí)，將看到alt屬性注釋的文本。
圖片這一條指令還可以定義圖片的對(duì)齊方式 （align='left' ; 'center' ; 'right'）
3.6.1 圖片與超鏈接相結(jié)合
<p><a href="http://www.baidu.com"><img alt="圖片未顯示" src="./data/baidu_logo.png"></a></p>此時(shí)不管網(wǎng)頁(yè)顯示的是圖片還是alt對(duì)應(yīng)的東西，點(diǎn)擊它都會(huì)轉(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í)，有一種使用頻度很高的修飾圖片的方式：給圖像添加邊框。
雖然這是對(duì)圖片小小的修飾，但是帶來(lái)的效果是相當(dāng)突出的。
在標(biāo)簽中添加“border”屬性和“bordercolor”屬性。
我們現(xiàn)在有一張這個(gè)圖片
<body><img src="dov.jpeg" border=5 bordercolor='red'> </body>現(xiàn)在在網(wǎng)頁(yè)中就有了一個(gè)邊框
3.7 輸入
<form><input type="text" name="text_in"><input type="submit"><!--點(diǎn)擊“提交”按鈕后，注意瀏覽器地址欄的變化--><!--對(duì)照：百度搜索時(shí)，瀏覽器地址欄的變化--> </form>text表示輸入的是文本格式，輸入的內(nèi)容是“text_in"
submit 格式會(huì)出來(lái)“提交”這個(gè)按鈕
在我們還沒(méi)有輸入東西的時(shí)候，網(wǎng)址最后是這樣子的
輸入了內(nèi)容之后，網(wǎng)址變?yōu)?#xff1a;
3.7.1 輸入應(yīng)用：實(shí)現(xiàn)簡(jiǎn)易百度跳轉(zhuǎn)
我們先看一個(gè)結(jié)論：如果網(wǎng)址是https://www.baidu.com/s?wd=...，那么我們將來(lái)到關(guān)于...的百度搜索中
利用這個(gè)結(jié)論，我們就可以實(shí)現(xiàn)簡(jiǎn)易的跳轉(zhuǎn)至百度的功能
<!DOCTYPE html> <html><body><form action="https://www.baidu.com/s"><input type="text" name="wd"><input type="submit" value="百度搜索"><!--點(diǎn)擊“提交”按鈕后，注意瀏覽器地址欄的變化--></form></body> </html>我們的動(dòng)作是轉(zhuǎn)跳到這個(gè)網(wǎng)站，然后在這個(gè)王章后面拼接上？wd=...的內(nèi)容
點(diǎn)擊后會(huì)轉(zhuǎn)跳至
3.8 列表
????????3.8.1 無(wú)序列表
沒(méi)有編號(hào)的列表就是無(wú)序列表。如項(xiàng)目說(shuō)明，這是一種并列關(guān)系的列表。
無(wú)序列表以
- 標(biāo)簽開(kāi)始，至
在
- 標(biāo)簽中，還需要使用標(biāo)簽
- 來(lái)定義列表的每一行，具體的寫(xiě)法如下所示
- ： <ul><li>……</li><li>……</li><li>……</li>
</ul>
3.8.2 有序列表
有序列表中的條目按照順序依次排列。
它和無(wú)序列表的唯一的區(qū)別體現(xiàn)代碼上，即有序列表使用
- 開(kāi)始，以 結(jié)束。（ol代表ordered list
- ： <ul><li>……</li><li>……</li><li>……</li>
</ul>
- 有序列表中同樣使用標(biāo)簽
- 來(lái)定義列表的每一行，具體的寫(xiě)法如下： <ol><li>……</li><li>……</li><li>……</li></ol>
3.8.3 定義列表
定義列表是一種縮進(jìn)樣式的列表，設(shè)計(jì)的本意是要用于定義術(shù)語(yǔ)。
使用
來(lái)定義頁(yè)面中的每一行。和有序列表、無(wú)序列表不同的是，在定義列表中，列表中會(huì)添加縮進(jìn)行來(lái)展示這個(gè)列表的條目，使用
標(biāo)簽來(lái)定義縮進(jìn)行。它的代碼寫(xiě)法如下： <dl><dt>…</dt><dd>…</dd><dt>…</dt><dd>…</dd> </dl>例子：
<html><head><title>制作定義列表</title></head><body ><h3>鏡頭畫(huà)面的剪輯</h3><dl><dt>分剪</dt><dd>一個(gè)鏡頭分成兩個(gè)鏡頭或者兩個(gè)以上的鏡頭使用。</dd><dt>挖剪</dt><dd>將一個(gè)完整鏡頭中的動(dòng)作、人和物運(yùn)動(dòng)鏡頭在運(yùn)動(dòng)中的某一部位上的多余的部分挖剪去。</dd></dl></body> </html>效果：
3.8.4 嵌套列表
????????在使用列表時(shí)經(jīng)常會(huì)遇到需要將一個(gè)列表放入另一個(gè)列表中的情況，也就是以一個(gè)列表做另一個(gè)列表的一行的情況。
????????這種情況稱(chēng)之為列表嵌套。列表嵌套就是列表里還有列表。
????????無(wú)論是無(wú)序列表嵌套，還是有序列表嵌套，或者是無(wú)序列表和有序列表的混合嵌套列表，它們的代碼寫(xiě)法都是一個(gè)原則，就是遵從HTML代碼的使用規(guī)則，將一個(gè)列表的標(biāo)簽完全放入在另一個(gè)標(biāo)簽內(nèi)。
????????這是一種父子級(jí)的關(guān)系。這種方法常用來(lái)表示復(fù)雜的導(dǎo)航，應(yīng)用廣泛。
3.9 水平線(xiàn)
????????經(jīng)常在設(shè)計(jì)頁(yè)面的時(shí)候，需要在網(wǎng)頁(yè)中插入一條水平線(xiàn)來(lái)隔開(kāi)文本，或者是為了起到美化頁(yè)面的作用。
????????水平線(xiàn)是設(shè)計(jì)頁(yè)面中的一個(gè)特殊的小部分，使用頁(yè)面標(biāo)簽可以實(shí)現(xiàn)這個(gè)功能，代碼的寫(xiě)法是：
<hr align="…" width="…" size="…">
標(biāo)簽即是放入水平線(xiàn)的意思。在編輯水平線(xiàn)的時(shí)候，可以使用align屬性編輯其對(duì)齊模式。
width屬性和size屬性下填入具體的數(shù)字，單位是像素，width屬性即表示水平線(xiàn)的長(zhǎng)度，而size屬性用來(lái)表示水平線(xiàn)的寬度。
<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：左對(duì)齊： left；右對(duì)齊：right； 中間對(duì)齊：center?
color：設(shè)置顏色
texxt_decoration：設(shè)置下劃線(xiàn)等
<body><h1 style="text-align: center; color: red; text-decoration:underline">一級(jí)標(biāo)題</h1><h2 style="text-align: center; color: blue">二級(jí)標(biāo)題</h2><h3 style="text-align: center; color: purple; text-decoration:line-through">三級(jí)標(biāo)題</h3> </body>4.1.1 將相同屬性提取在body里面
如果這幾個(gè)標(biāo)題有一些屬性是一樣的，我們可以把它們提取出來(lái)：
<body style="text-align: center"><h1 style="color: orange; text-decoration:underline">一級(jí)標(biāo)題</h1><h2 style="color: green">二級(jí)標(biāo)題</h2><h3 style="color: grey; text-decoration:line-through">三級(jí)標(biāo)題</h3> </body>4.1.2 在head中預(yù)定義style
如果我們一個(gè)網(wǎng)頁(yè)里面內(nèi)所有的一級(jí)、二級(jí)、三級(jí)標(biāo)題都是這樣的格式，那么我們可以在head中預(yù)定義各級(jí)標(biāo)題格式：
代碼第一行中“DOCTYPE”即“Document Type”的簡(jiǎn)寫(xiě)，意思是“文檔類(lèi)型”
<!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>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2><h3>三級(jí)標(biāo)題</h3></body> </html>但注意一點(diǎn)，無(wú)論是4.1.1還是4.1.2，正文里面的部分也會(huì)服從body中定義的格式
以4.1.2 為例：
<body><h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2><h3>三級(jí)標(biāo)題</h3><p> lalala</p></body>4.2 自定義格式類(lèi)型
我們可以在head中自定義格式類(lèi)型。然后在正文中，用class='...'來(lái)使用
<!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>我們?cè)趆ead中分別定義了centered、highlight_text、normal_text、deleted_text四個(gè)類(lèi)（定義的時(shí)候，每個(gè)類(lèi)前面需要加一個(gè).）
使用的時(shí)候，就是在p里面聲明我們使用那個(gè)類(lèi)就好了。效果如下：
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"/><!--把之前在這里的<style>內(nèi)容移到了.css文件中--><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è)本地的文件我們稱(chēng)之為外部樣式表。它的存在可以極大地提高效率
4.3?CSS的語(yǔ)法格式
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選擇器
對(duì)于HTML文檔中的某個(gè)標(biāo)簽，定義它的顯示格式
4.4.3 class選擇器 ?
?對(duì)于HTML文檔中的某類(lèi)標(biāo)簽，定義它的顯示格式
總結(jié)
以上是生活随笔為你收集整理的文计笔记７：HTML与CSS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： GNN笔记：傅里叶变换
- 下一篇： 文巾解题 1433. 检查一个字符串是否