當前位置：首頁 > news >正文

5 9:07:16

制作百度移動網(wǎng)站,每日一則新聞?wù)?申請建設(shè)網(wǎng)站的請示,公司網(wǎng)站建設(shè) 阜陽1 何為HTML 用來描述網(wǎng)頁的一種語言超文本標記語言(Hyper Text Markup Language)不是一種編程語言，而是一種標記語言 (markup language) 2 HTML標簽 HTML 標簽是由尖括號包圍的關(guān)鍵詞，比如 <html> 作用是為了“標記”頁面中的內(nèi)容，使…

1 何為HTML

用來描述網(wǎng)頁的一種語言
超文本標記語言(Hyper Text Markup Language)
不是一種編程語言，而是一種標記語言 (markup language)

2 HTML標簽

HTML 標簽是由尖括號包圍的關(guān)鍵詞，比如 <html>
- 作用是為了“標記”頁面中的內(nèi)容，使瀏覽器能夠識別設(shè)計者的要求，正確的在網(wǎng)頁中顯示出來
HTML 標簽通常是成對出現(xiàn)的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結(jié)束標簽
- 開始和結(jié)束標簽也被稱為開放標簽和閉合標簽

3 HTML文檔結(jié)構(gòu)

3.1?文檔類型

在HTML中，文檔類型（DOCTYPE）是一種指令，它告訴瀏覽器文檔的類型和版本，從而使瀏覽器能夠正確地渲染文檔。
DOCTYPE處于HTML文檔的首行，位于<html>標簽之前。

<!DOCTYPE html>

當前最常用的文檔類型聲明，用于HTML5文檔

3.2 開始標簽

在HTML文檔中，<html> 標簽是一個根元素，包圍著整個文檔的其它所有HTML元素。所有的HTML元素必須被這個標簽包裹起來，這也意味著<html>標簽是HTML文檔的最外層元素

<!DOCTYPE html>
<html><head><!-- head部分的內(nèi)容 --></head><body><!-- body部分的內(nèi)容 --></body>
</html>

3.2.1 lang屬性

<html>標簽也可以包含lang屬性，來定義文檔的語言。

<html lang="en"><!-- 頁面內(nèi)容 -->
</html>

在這個例子中，lang="en" 屬性告訴瀏覽器這個文檔是用英語編寫的。
不同的語言代碼會表示不同的語言（例如，“es”為西班牙語，“zh”為中文等）。

3.3 頭標簽 & 頭標簽對象

在HTML文檔中，<head>標簽用于包含文檔的元數(shù)據(jù)（metadata）以及鏈接到腳本和樣式表的引用。
<head>標簽通常包括如下一些子元素：

3.3.1?`<title>`

<title>標簽定義了文檔的標題，這個標題會顯示在瀏覽器的標題欄或標簽上

<title>這是頁面標題</title>

3.3.2 <meta>

<meta>標簽用于提供關(guān)于文檔的元數(shù)據(jù)，如字符集、頁面描述、關(guān)鍵詞和作者信息等。

<meta charset="UTF-8">
<meta name="description" content="這是一個示例網(wǎng)頁">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Author Name">

3.3.3?`<link>`

<link>標簽用于鏈接外部資源，通常是鏈接樣式表（CSS文件）

<link rel="stylesheet" type="text/css" href="styles.css">

3.3.4?`<script>`

<script>標簽用于嵌入或引用執(zhí)行腳本代碼，通常是JavaScript。

<script src="script.js"></script>

3.3.5?`<style>`

<style>標簽用于包含文檔的內(nèi)部樣式信息（CSS）。

<style>body {background-color: lightblue;}
</style>

3.3.6?`<base>`

<base>標簽用于為頁面上所有的相對URL設(shè)置一個基礎(chǔ)URL。這個標簽必須有href或target屬性。

<base href="https://www.example.com/" target="_blank">

3.3.7?`<noscript>`

<noscript>標簽用于定義在瀏覽器不支持腳本時顯示的替代內(nèi)容。

<noscript>您的瀏覽器不支持JavaScript！</noscript>

4? 正文中的HTML標簽

4.1 段落 <P>…</P>

左對齊： left；右對齊：right；中間對齊：center

<!DOCTYPE html>
<html lang="en">
<head><title>這是頁面標題</title><style>body {background-color: lightblue;}</style><noscript>您的瀏覽器不支持JavaScript！</noscript>
</head>
<body><p>這是一個段落</p><p align=right>右對齊的段落</p> <p align=left>右對齊的段落</p> <p align=center>右對齊的段落</p> 
</body>
</html>

（本節(jié)下面的內(nèi)容將隱去head部分的內(nèi)容）?

4.2 折行?<br/>

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

4.3?HTML標題

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

4.4 文字風(fēng)格

<p><font size=“2” color=“purple”> 這是一個段落。</font></p>

4.4.1 HTML中的顏色

4.4.2 其他文字標簽

<b>粗體字
</br><i>斜體字</i>
</br><strong> 粗體字，同b<strong>
</br><em>斜體，表強調(diào)</em>
</br><del>文字加橫線</del>
</br><sub>下標字(subscript)</sub>
</br><sup>上標字(superscript)</sup>
</br><big> 大字</big>
</br><small> 小字</small>
</br><u>下劃線 </u>

4.4.5 特殊字符

< &lt
</br> > &gt
</br> &copy

5 文本列表

5.1? 無序列表

無序列表以<ul>標簽開始，至</ul>標簽結(jié)束。

在<ul>標簽中，還需要使用<li>標簽來定義列表的每一行

<ul><li>……</li><li>……</li><li>……</li>
</ul>

5.2 有序列表

有序列表中的條目按照順序依次排列。

它和無序列表的唯一的區(qū)別體現(xiàn)代碼上，即有序列表使用<ol>標簽，以<ol>開始，到</ol>結(jié)束。

有序列表中同樣使用<li>標簽來定義列表的每一行

<ol><li>……</li><li>……</li><li>……</li>
</ol>

5.3 自定義列表

使用<dl>來創(chuàng)建自定義列表。在列表中使用<dt>來定義頁面中的每一行。

與有序列表和無序列表不同的是，在定義列表中，列表中會添加縮進行來展示這個列表的條目，使用<dd>標簽來定義縮進行。
?

<h3>鏡頭畫面的剪輯</h3>
<dl><dt>分剪</dt><dd>一個鏡頭分成兩個鏡頭或者兩個以上的鏡頭使用。</dd><dt>挖剪</dt><dd>將一個完整鏡頭中的動作、人和物運動鏡頭在運動中的某一部位上的多余的部分挖剪去。</dd>
</dl>

5.4 列表嵌套

無論是無序列表嵌套，還是有序列表嵌套，或者是無序列表和有序列表的混合嵌套列表，它們的代碼寫法都是一個原則，就是遵從HTML代碼的使用規(guī)則，將一個列表的標簽完全放入在另一個標簽內(nèi)。這是一種父子級的關(guān)系。這種方法常用來表示復(fù)雜的導(dǎo)航，應(yīng)用廣泛。

<ul> <li> <ol><li>1.1<li>1.2</ol><li>2
</ul>

6 嵌入圖片

<p align="center"><img src="jiuzhai.jpg" height=200 width=300/>

6.1 圖像文本對齊

在編輯圖像的時候，圖像不同于文本的意義在于，圖像都是一個個分開的整體。而編輯圖像時，如果設(shè)計者想在圖片的旁邊放入文本內(nèi)容，就需要考慮如何處理文本和圖像對齊方式

style="vertical-align:text-top"	使圖像的頂部和同一行的文本對齊
style="vertical-align:middle"	使圖像的中部和同一行的文本對齊
style="vertical-align:text-bottom"	使圖像的底部和同一行文本對齊

<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ style="vertical-align:text-top">這是一張拍攝于2020年的九寨溝照片。<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ style="vertical-align:middle">這是一張拍攝于2020年的九寨溝照片。<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ style="vertical-align:text-bottom">這是一張拍攝于2020年的九寨溝照片。

?6.2 圖像和文本的距離

hspace——和左邊的距離
vspace——和上面的距離

<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ hspace=30>這是一張拍攝于2020年的九寨溝照片。<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ vspace=30>這是一張拍攝于2020年的九寨溝照片。

6.3 添加邊框?

border表示邊框?qū)挾?/p>

<p align="center"><img src="jiuzhai.jpg" height=200 width=300/ border=5>這是一張拍攝于2020年的九寨溝照片。

6.4 嵌入網(wǎng)圖

<!DOCTYPE html>
<html lang="en">
<head><title>這是頁面標題</title>
</head>
<body> <img src='https://www.sanguosha.cn/storage/uploads/images/8jzgfkyzAOH7lY7QHHtfH3vIkzQ6cVmNuVCmNeEd.jpeg'
width=1000></body>
</html>

7 body 改變背景色

7.0 優(yōu)先級

<!DOCTYPE html>
<html lang="en">
<head><title>這是頁面標題</title><style>body {background-color: lightblue;}</style><noscript>您的瀏覽器不支持JavaScript！</noscript>
</head>
<body bgcolor="red"> <p align="center"><img src="jiuzhai.jpg" height=200 width=300/ border=5>這是一張拍攝于2020年的九寨溝照片。</body>
</html>

<body>標簽的背景色(bgcolor)被設(shè)置為紅色（red），而在<style>標簽中，body的背景色被設(shè)置為淺藍色（lightblue）。通常來說，CSS樣式（無論是內(nèi)聯(lián)樣式、內(nèi)部樣式還是外部樣式）會覆蓋HTML標簽的屬性。

所以，如果瀏覽器按照現(xiàn)代標準解析這段HTML代碼，背景色應(yīng)該是淺藍色，即lightblue。這是因為CSS樣式通常比HTML屬性有更高的優(yōu)先級。

這一小節(jié)后續(xù)部分中，我們會去掉head中style的部分

7.1 純色?

背景顏色屬性將背景設(shè)置為某種顏色。

屬性值可以是十六進制數(shù)、RGB 值或顏色名。

? <body bgcolor="#000000"> ?
<body bgcolor="rgb(0,0,0)"> ?
<body bgcolor="black">

<!DOCTYPE html>
<html lang="en">
<head><title>這是頁面標題</title>
</head>
<body bgcolor="lightgreen"> <p align="center"><img src="jiuzhai.jpg" height=200 width=300/ border=5>這是一張拍攝于2020年的九寨溝照片。</body>
</html>

7.2 圖像

背景屬性將背景設(shè)置為圖像。屬性值為圖像的URL。

如果圖像尺寸小于瀏覽器窗口，那么圖像將在整個瀏覽器窗口進行復(fù)制。

7.2.1 本地圖像

<!DOCTYPE html>
<html lang="en">
<head><title>這是頁面標題</title>
</head>
<body background="jiuzhai.jpg"> 這是一張拍攝于2020年的九寨溝照片。</body>
</html>

7.2.2 網(wǎng)絡(luò)圖像

<!DOCTYPE html>
<html lang="en">
<head><title>這是頁面標題</title>
</head>
<body background="https://www.sanguosha.cn/storage/uploads/images/jFRfaD6OGALMzUHw4bxO0kN4HN3vNpeaFU2YaTTy.jpeg"> <font color='white'>三國殺 貂蟬-舞惑群心</body>
</html>

7.2.3 調(diào)整圖像大小

背景圖太大了，我們進行調(diào)整，此時需要在head中進行調(diào)整

<!DOCTYPE html>
<html lang="en">
<head><title>這是頁面標題</title><style>body {background-image: url('https://www.sanguosha.cn/storage/uploads/images/jFRfaD6OGALMzUHw4bxO0kN4HN3vNpeaFU2YaTTy.jpeg');background-size: cover; /*控制背景圖像的尺寸,cover 保證背景圖像覆蓋整個元素*/background-position: center;/*center 使背景圖像在元素中居中*/background-repeat: no-repeat;/*no-repeat 指定背景圖像不要平鋪重復(fù)*/height: 100vh;  /* 設(shè)置body高度為視口的100% */margin: 0;      /* 移除邊距 */}</style>
</head>
<body> <font size=30 color='white'>三國殺 貂蟬-舞惑群心</body>
</html>

8 網(wǎng)頁鏈接

8.1 鏈接到外網(wǎng)

HTML中的鏈接語法： <a href=“鏈接對象的路徑”>鏈接錨點對象 </a>

這個路徑所指的不僅僅只是一個頁面地址，也可能是一個文件地址、一個郵箱地址

<!DOCTYPE html>
<html lang="en">
<head><title>這是頁面標題</title>
</head>
<body> <a href='https://www.sanguosha.cn/storage/uploads/images/GX9UMBsFtZChnFngjPNNsVQuJuA3TRjxfzR3k8VE.jpeg'>
三國殺-關(guān)銀屏-步步生花
</a></body>
</html>

點進去后：

8.2 鏈接到本網(wǎng)頁的其他位置

頁面除了和頁面之外的文件或者程序鏈接外，而且也可以和同一頁面中的內(nèi)容進行鏈接
- （1）要確定鏈接的錨點對象，不同于頁面和外部文件鏈接的方式在于，鏈接的路徑由于在同一頁面內(nèi)，這里需要使用“#”來引用同一頁面中的內(nèi)容。代碼寫為： <a href=#...> </a>
- （2）需要在頁面中設(shè)定出鏈接到的目標。使用的就是“id”屬性。 <a id=…></a>
點擊href處的內(nèi)容，跳轉(zhuǎn)到id處的內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head><title>這是頁面標題</title>
</head>
<body> <html>……<a href=#link>鏈接到網(wǎng)頁的其他位置</a><img src='https://www.sanguosha.cn/storage/uploads/images/4Ku8dzet4pub91dMLvuRbfc50TI1qdmlnjAPgMtg.jpeg' width=1400><a id=link></a>從上面鏈接過來…</html></body>
</html>

點擊紅色區(qū)域，就會跳轉(zhuǎn)到綠色區(qū)域

’

8.3 跳轉(zhuǎn)到新網(wǎng)頁

在先前的所有鏈接中，頁面都是在同一頁面中跳轉(zhuǎn)，有時候設(shè)計者希望鏈接的頁面在新的窗口中打開，這時只要在<a>標簽中添加“target=_blank”就行了。

<!DOCTYPE html>
<html lang="en">
<head><title>這是頁面標題</title>
</head>
<body> <html><a href='https://www.sanguosha.cn/storage/uploads/images/3SPA2wJ5R3IL8nbaZncvtdzFL52XNRndGSIG8YP7.jpeg' target=_blank>諸葛瞻-綿竹之殤</a></html></body>
</html>

‘

查看全文

http://www.risenshineclean.com/news/1149.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网