文计笔记７：HTML与CSS
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)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽。（開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽） ? HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如 ? 幾個主要的標(biāo)簽： ——開始標(biāo)簽，定義頁面從哪里開始到哪里結(jié)束。 ——頭標(biāo)簽 ——文體標(biāo)簽，用來表現(xiàn)網(wǎng)頁的主體內(nèi)容。1.1 HTML示例
注：HTML不要求縮進
2 CSS
? 定義如何顯示網(wǎng)頁上的內(nèi)容，如顏色、字體、位置等 ? 可以放在HTML標(biāo)簽內(nèi)部，也可以放在單獨的.css文件中2.1 CSS實例
3 HTML使用
3.0 設(shè)置標(biāo)題
<head><title>hello title</title> </head>這樣就有了一個叫hello title的標(biāo)題
3.1 設(shè)置多級標(biāo)題
標(biāo)題可以從h1一直到h6
<body><h1>一級標(biāo)題</h1><h2>二級標(biāo)題</h2><h3>三級標(biāo)題</h3></body>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表示藍色
用16進制的數(shù)值表示RGB的顏色值。RGB每個 原色：0~255，即16進制的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>斜體，表強調(diào)</em> <del>文字加橫線</del> <sub>下標(biāo)字</sub> <sup>上標(biāo)字</sup><big>大字</big><small>小字</small><u>下劃線</u></body> </html>3.3 注釋
可以一行，也可以多行
<!--這是注釋--><!--<p>１２３４５</p> -->3.4 特殊字符
具體特殊字符可見?https://www.w3school.com.cn/charsets/ref_html_8859.asp?，這里舉幾個例子：
<p>特殊字符：¥©®¼¾</p>3.5 超鏈接
鏈接錨點對象
<p>歡迎訪問：<a href="http://www.pku.edu.cn">北京大學(xué)</a></p>用括起來的部分就是超鏈接。
herf等于的部分是超鏈接指向的網(wǎng)址（不一定是網(wǎng)址，圖片，郵箱什么的都可以），之后的部分是超鏈接對應(yīng)的文字
3.5.1 target="blank"
默認(rèn)情況下，會在相同的框架中打開被鏈接文檔。如果我們指定了target="blank"，那么會在新窗口中打開被鏈接文檔。
<p><a href="http://www.pku.edu.cn" target="_blank">北京大學(xué)</a><a href="http://www.tsinghua.edu.cn">清華大學(xué)</a> </p>其中點擊“北京大學(xué)”的話，會彈出新窗口。點擊“清華大學(xué)”的話，則會在原窗口顯示情話的網(wǎng)站。
3.6 顯示圖片
<p>這里有一張圖片: <img alt="圖片未顯示" src="./data/baidu_logo.png"></p>如果圖片確實在這個指定的路徑（路徑是src定義的圖片的路徑）上，那么我們的網(wǎng)頁會顯示圖片。
alt屬性指定關(guān)于圖像的描述性文本。如果瀏覽者不能看到圖像時，將看到alt屬性注釋的文本。
圖片這一條指令還可以定義圖片的對齊方式 （align='left' ; 'center' ; 'right'）
3.6.1 圖片與超鏈接相結(jié)合
<p><a href="http://www.baidu.com"><img alt="圖片未顯示" src="./data/baidu_logo.png"></a></p>此時不管網(wǎng)頁顯示的是圖片還是alt對應(yīng)的東西，點擊它都會轉(zhuǎn)跳到href定義的網(wǎng)站中。
3.6.2 路徑為url
src也可以不是本地圖片，可以是一個網(wǎng)址。
<p>這里有一張圖片: <img alt="圖片未顯示" src="https://www.baidu.com/img/bd_logo1.png"></p>3.6.3 圖片加邊框
編輯圖像時，有一種使用頻度很高的修飾圖片的方式：給圖像添加邊框。
雖然這是對圖片小小的修飾，但是帶來的效果是相當(dāng)突出的。
在標(biāo)簽中添加“border”屬性和“bordercolor”屬性。
我們現(xiàn)在有一張這個圖片
<body><img src="dov.jpeg" border=5 bordercolor='red'> </body>現(xiàn)在在網(wǎng)頁中就有了一個邊框
3.7 輸入
<form><input type="text" name="text_in"><input type="submit"><!--點擊“提交”按鈕后，注意瀏覽器地址欄的變化--><!--對照：百度搜索時，瀏覽器地址欄的變化--> </form>text表示輸入的是文本格式，輸入的內(nèi)容是“text_in"
submit 格式會出來“提交”這個按鈕
在我們還沒有輸入東西的時候，網(wǎng)址最后是這樣子的
輸入了內(nèi)容之后，網(wǎng)址變?yōu)?#xff1a;
3.7.1 輸入應(yīng)用：實現(xiàn)簡易百度跳轉(zhuǎn)
我們先看一個結(jié)論：如果網(wǎng)址是https://www.baidu.com/s?wd=...，那么我們將來到關(guān)于...的百度搜索中
利用這個結(jié)論，我們就可以實現(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)跳到這個網(wǎng)站，然后在這個王章后面拼接上？wd=...的內(nèi)容
點擊后會轉(zhuǎn)跳至
3.8 列表
????????3.8.1 無序列表
沒有編號的列表就是無序列表。如項目說明，這是一種并列關(guān)系的列表。
無序列表以
- 標(biāo)簽開始，至
在
- 標(biāo)簽中，還需要使用標(biāo)簽
- 來定義列表的每一行，具體的寫法如下所示
- ： <ul><li>……</li><li>……</li><li>……</li>
</ul>
3.8.2 有序列表
有序列表中的條目按照順序依次排列。
它和無序列表的唯一的區(qū)別體現(xiàn)代碼上，即有序列表使用
- 開始，以 結(jié)束。（ol代表ordered list
- ： <ul><li>……</li><li>……</li><li>……</li>
</ul>
- 有序列表中同樣使用標(biāo)簽
- 來定義列表的每一行，具體的寫法如下： <ol><li>……</li><li>……</li><li>……</li></ol>
3.8.3 定義列表
定義列表是一種縮進樣式的列表，設(shè)計的本意是要用于定義術(shù)語。
使用
來定義頁面中的每一行。和有序列表、無序列表不同的是，在定義列表中，列表中會添加縮進行來展示這個列表的條目，使用
標(biāo)簽來定義縮進行。它的代碼寫法如下： <dl><dt>…</dt><dd>…</dd><dt>…</dt><dd>…</dd> </dl>例子：
<html><head><title>制作定義列表</title></head><body ><h3>鏡頭畫面的剪輯</h3><dl><dt>分剪</dt><dd>一個鏡頭分成兩個鏡頭或者兩個以上的鏡頭使用。</dd><dt>挖剪</dt><dd>將一個完整鏡頭中的動作、人和物運動鏡頭在運動中的某一部位上的多余的部分挖剪去。</dd></dl></body> </html>效果：
3.8.4 嵌套列表
????????在使用列表時經(jīng)常會遇到需要將一個列表放入另一個列表中的情況，也就是以一個列表做另一個列表的一行的情況。
????????這種情況稱之為列表嵌套。列表嵌套就是列表里還有列表。
????????無論是無序列表嵌套，還是有序列表嵌套，或者是無序列表和有序列表的混合嵌套列表，它們的代碼寫法都是一個原則，就是遵從HTML代碼的使用規(guī)則，將一個列表的標(biāo)簽完全放入在另一個標(biāo)簽內(nèi)。
????????這是一種父子級的關(guān)系。這種方法常用來表示復(fù)雜的導(dǎo)航，應(yīng)用廣泛。
3.9 水平線
????????經(jīng)常在設(shè)計頁面的時候，需要在網(wǎng)頁中插入一條水平線來隔開文本，或者是為了起到美化頁面的作用。
????????水平線是設(shè)計頁面中的一個特殊的小部分，使用頁面標(biāo)簽可以實現(xiàn)這個功能，代碼的寫法是：
<hr align="…" width="…" size="…">
標(biāo)簽即是放入水平線的意思。在編輯水平線的時候，可以使用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 改變背景
擁有兩個配置背景的標(biāo)簽。背景可以是顏色或者圖像。3.10.1 改變背景顏色
背景顏色屬性將背景設(shè)置為某種顏色。
屬性值可以是十六進制數(shù)、RGB 值或顏色名。
<html><body bgcolor='green'><p> hello </p></body> </html>3.10.2 設(shè)置背景圖像
背景屬性將背景設(shè)置為圖像。屬性值為圖像的URL。
如果圖像尺寸小于瀏覽器窗口，那么圖像將在整個瀏覽器窗口進行復(fù)制。
<html><body background="dov.jpeg"><p> hello </p></body> </html>4 CSS 使用
一個CSS看上去是這樣的：? ? ?
body {font-family: 黑體; //字體樣式font-size: 80%; //字體大小color: black; //字體顏色background-color:blue; //背景顏色}它定義了HTML文檔的Body部分，以上面所定義的格式進行顯示。
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里面
如果這幾個標(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
如果我們一個網(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>但注意一點，無論是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四個類（定義的時候，每個類前面需要加一個.）
使用的時候，就是在p里面聲明我們使用那個類就好了。效果如下：
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中使用這個CSS，達到一樣的效果：
<!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>這個本地的文件我們稱之為外部樣式表。它的存在可以極大地提高效率
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文檔中的某個標(biāo)簽，定義它的顯示格式
4.4.3 class選擇器 ?
?對于HTML文檔中的某類標(biāo)簽，定義它的顯示格式
總結(jié)
以上是生活随笔為你收集整理的文计笔记７：HTML与CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GNN笔记：傅里叶变换
- 下一篇： web浏览器录音：web audio a