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

HTML

HTML基础做出属于自己的完美网页

發(fā)布時間：2024/7/19 HTML 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML基础做出属于自己的完美网页小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

HTML

HTML解釋：

HTML是英文Hyper?Text Mark-up Language(超文本標(biāo)記語言)的縮寫，他是一種制作萬維網(wǎng)頁面標(biāo)準(zhǔn)語言（標(biāo)記）。相當(dāng)于定義統(tǒng)一的規(guī)則（W3C），大家都來遵守他，這樣就可以讓瀏覽器根據(jù)標(biāo)記語言的規(guī)則去解釋它。

瀏覽器負(fù)責(zé)將標(biāo)簽翻譯成用戶“看得懂”的格式，呈現(xiàn)給用戶！

網(wǎng)頁的組成：

一個網(wǎng)頁一般由兩部分組成即：

HTML（Hypertext Markup Language）
和CSS（Cascade Style Sheets）

HTML負(fù)責(zé)描述網(wǎng)頁的結(jié)構(gòu)和內(nèi)容（如標(biāo)題，導(dǎo)航欄等）?CSS則負(fù)責(zé)網(wǎng)頁的表現(xiàn)（外觀）（如背景顏色，字體樣式等）。

<head>和</head>之間的內(nèi)容，是元信息和網(wǎng)站的標(biāo)題元信息一般是不顯示出來的,但是記錄了你這個HTML文件的很多有用的信息
<body>和</body>之間的內(nèi)容，是瀏覽器呈現(xiàn)出來的，用戶看到的頁面效果。也就是說這里是網(wǎng)頁的主體。也就是body的身體之意
<html></html>是說明這個是一個網(wǎng)頁。告訴瀏覽器這個網(wǎng)頁的開始和結(jié)束。他包含了之后的兩個元素。<head>和</head>|<body>和</body>

文檔結(jié)構(gòu)如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body></body> </html>

DOCTYPE部分

Doctype告訴瀏覽器使用什么樣的html或xhtml規(guī)范來解析html文檔

HTML語言需要一個標(biāo)準(zhǔn)，當(dāng)我們在第一行指定了<!DOCTYPE html>的時候，當(dāng)瀏覽器去訪問我們的代碼的時候就就按照HTML代碼里指定的標(biāo)準(zhǔn)去讀取和渲染給我們展現(xiàn)的頁面。

為什么要使用<!DOCTYPE html>這個去告訴瀏覽器呢？

DOCTYPE模式：

我們先了解一下DOCTYPE的模式

BackCompat：標(biāo)準(zhǔn)兼容模式未開啟（或叫怪異模式[Quirks mode]、混雜模式）
CSS1Compat：標(biāo)準(zhǔn)兼容模式已開啟（或叫嚴(yán)格模式[Standards mode/Strict mode]）

問題產(chǎn)生：

當(dāng)Netscape4（譯注：網(wǎng)景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實(shí)現(xiàn)CSS機(jī)制時，并沒有遵循W3C提出的標(biāo)準(zhǔn)。Netscape4 提供了糟糕的支持，而IE4 雖然接近標(biāo)準(zhǔn)，但依舊未能完全正確的支持標(biāo)準(zhǔn)。盡管IE 5 修復(fù)了IE4 許多的問題（bugs），但是依然延續(xù)CSS實(shí)現(xiàn)中的其它故障（主要是盒模型（box model）問題）。

為了保證自己的網(wǎng)站在不同的瀏覽器中都能正確展現(xiàn)，網(wǎng)頁開發(fā)者不得不依據(jù)各個瀏覽器的自身的規(guī)范來使用CSS。因此大部分網(wǎng)站的CSS實(shí)現(xiàn)并未符合W3C的標(biāo)準(zhǔn)。

然而隨著標(biāo)準(zhǔn)一致性變得越來越重要，瀏覽器開發(fā)商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標(biāo)準(zhǔn)是前進(jìn)的方向。但是改變現(xiàn)有CSS的實(shí)現(xiàn)，完整去遵循標(biāo)準(zhǔn)，會使許多網(wǎng)站或多或少受到破壞。如果瀏覽器突然以正確的方式解析現(xiàn)存的CSS，陳舊的網(wǎng)站顯示必然受到影響。

因此立即遵循標(biāo)準(zhǔn)會產(chǎn)生問題，然而忽略標(biāo)準(zhǔn)則又會維持瀏覽器大戰(zhàn)時（譯注：微軟和網(wǎng)景之間的一段競爭）所產(chǎn)生的混亂。

解決方案：

允許網(wǎng)站開發(fā)者能夠選擇他們所熟知的模式。

依然使用舊式規(guī)則顯示陳舊的網(wǎng)站。

換句話說，所有的瀏覽器需要提供兩種模式：怪異模式（即兼容模式）服務(wù)于舊式規(guī)則，嚴(yán)格模式服務(wù)于標(biāo)準(zhǔn)規(guī)則。Mac平臺的IE瀏覽器最先實(shí)現(xiàn)這兩種模式，Mozilla， Safari、Opera和Windows平臺的IE6也相繼實(shí)現(xiàn)了這兩種模式。WIndows平臺的IE5和Netscape4則只提供了怪異模式。

選擇使用哪種模式需要一個觸發(fā)器，而 “DOCTYP切換” 則用于此目的。依照標(biāo)準(zhǔn)：任何一個(X)HTML文檔必須擁有一個DOCTYPE（譯注：DTD（文檔類型定義）是一組機(jī)器可讀的規(guī)則，它們指示 (X)HTML文檔中允許有什么，不允許有什么，DOCTYPE正是用來告訴瀏覽器使用哪種DTD,一般放在(X)HTML文檔開頭聲明）用以告訴其他人這個文檔的類型風(fēng)格

產(chǎn)生于標(biāo)準(zhǔn)化浪潮以前的網(wǎng)頁并沒有DOCTYPE聲明。因此'沒有DOCTYPE'意味著觸發(fā)怪異模式：既依據(jù)舊式的CSS規(guī)則渲染網(wǎng)頁。

相反，如果開發(fā)者明確知道包含DOCTYPE，他們應(yīng)該明白他們想要怎么做。因此大部分的DOCTYPE聲明將觸發(fā)嚴(yán)格模式：即依據(jù)標(biāo)準(zhǔn)的CSS規(guī)則渲染網(wǎng)頁。

任何新的或未知的DOCTYPE將觸發(fā)嚴(yán)格模式。

head部分

1、Meta(metadata information)

?提供有關(guān)頁面的元信息，例：頁面編碼、刷新、跳轉(zhuǎn)、針對搜索引擎和更新頻度的描述和關(guān)鍵詞

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <meta http-equiv="refresh" content="5"> <metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/aylin1/" /> <meta name="keywords" content="博客,張巖林,帥哥,"> <meta name="description" content="博客園是一個面向開發(fā)者的知識分享社區(qū)。自創(chuàng)建以來，博客園一直致力并專注于為開發(fā)者打造一個純凈的技術(shù)交流社區(qū)，推動并幫助開發(fā)者通過互聯(lián)網(wǎng)分享知識，從而讓更多開發(fā)者從中受益。博客園的使命是幫助開發(fā)者用代碼改變世界。"><title>張巖林</title> <link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" type="image/x-icon"> </head> <body></body> </html>

1>定義編碼格式

2>刷新和跳轉(zhuǎn)頁面

3>關(guān)鍵字

關(guān)鍵字的作用：一般是讓爬蟲之類的收錄程序，當(dāng)他們在爬你的網(wǎng)站的時候，如果你有關(guān)鍵字，那么他們會優(yōu)先把關(guān)鍵字收錄到他們的記錄中，比如百度：如果他們收錄之后，他們搜索你的關(guān)鍵字的時候，就能找到咱們的網(wǎng)站。

4>描述

例如博客園的描述如下：

5>title?

設(shè)置標(biāo)簽為張巖林

6>標(biāo)簽圖標(biāo)Link

7>導(dǎo)入CSS類似python中導(dǎo)入模塊類似

8>、Style

　　1、在當(dāng)前文件中寫Css樣式

　　2、在其他文件中寫Css樣式類似python的模塊導(dǎo)入的方式把Css樣式導(dǎo)入到當(dāng)前文件中使用

9>、Script

　　1、在當(dāng)前文件中寫JS

　　2、在其他文件中寫JS類似python的模塊導(dǎo)入的方式把JS導(dǎo)入到當(dāng)前文件中使用

body部分

body里面分為兩類標(biāo)簽：塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽。

1、塊級標(biāo)簽：<p><h1><table><ol><ul><form><div>

2、內(nèi)聯(lián)標(biāo)簽：<a><input><img><sub><sup><textarea><span>

塊級標(biāo)簽元素的特點(diǎn)
　?、?總是在新行上開始；
　?、?高度，行高以及外邊距和內(nèi)邊距都可控制；
　?、?寬度缺省是它的容器的100%，除非設(shè)定一個寬度。
　?、?它可以容納內(nèi)聯(lián)元素和其他塊元素

內(nèi)聯(lián)標(biāo)簽元素的特點(diǎn)
　　① 和其他元素都在一行上；
　?、?高，行高及外邊距和內(nèi)邊距不可改變；
　　③ 寬度就是它的文字或圖片的寬度，不可改變
　　④ 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

對行內(nèi)元素，需要注意如下?
　　設(shè)置寬度width 無效。
　　設(shè)置高度height 無效，可以通過line-height來設(shè)置。
　　設(shè)置margin 只有左右margin有效，上下無效。
　　設(shè)置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內(nèi)容是沒影響的。

?1、基本標(biāo)簽

　　<hn>: n的取值范圍是1~6; 從大到小. 用來表示標(biāo)題.

　　<p>: 段落標(biāo)簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白.

　　<b> <strong>: 加粗標(biāo)簽.

　　<strike>: 為文字加上一條中線.

　　<em>: 文字變成斜體.

　　<sup>和<sub>: 上角標(biāo) 和下角表.

　　<br>:換行.

　　<hr>:水平線

?　　<div><span>

?廢話不多說，直接擼碼分析

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>張巖林</title> </head> <body><br><hr><h1>張巖林</h1><h2>張巖林</h2><h3>張巖林</h3><h4>張巖林</h4><h5>張巖林</h5><h6>張巖林</h6><hr><p>段落標(biāo)簽1</p><p>段落標(biāo)簽2</p><hr><b>加粗文字方法一</b><br><strong>加粗文字方法二</strong><hr><p>原價：<strike>299 </strike> 現(xiàn)價：10 文字中間加橫線</p><p><em>斜體字</em></p><p> 2<sup>n</sup> 上角標(biāo)</p><p>h<sub>2</sub>o 下角標(biāo)</p><p>< 小于號</p><p>> 大于號</p><p>© </p><p>®</p></body> </html>

效果如下：

2、圖形標(biāo)簽<img>

　　src: 要顯示圖片的路徑.

　　alt: 圖片沒有加載成功時的提示.

　　title: 鼠標(biāo)懸浮時的提示信息.

　　width: 圖片的寬

　　height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

3、超鏈接標(biāo)簽(錨標(biāo)簽)<a>:

　　href:要連接的資源路徑格式如下: href="http://www.baidu.com"?

　　target: _blank : 在新的窗口打開超鏈接. 框架名稱: 在指定框架中打開連接內(nèi)容.

　　name: 定義一個頁面的書簽.

　　用于跳轉(zhuǎn) href : #書簽名稱.

還有一種本頁標(biāo)簽跳轉(zhuǎn)，通過定義ID來進(jìn)行查找到內(nèi)容

<a href="#a">李白</a> <div id="a" style="background-color: #197991">床前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉(xiāng)。</div>

4、列表標(biāo)簽：

　　<ul>: 無序列表

　　<ol>:有序列表

? ? ? 　　? ?<li>:列表中的每一項.

　　<dl> 定義列表

? ? ? 　　? ?<dt> 列表標(biāo)題

? ? ? ? ?　　<dd> 列表項

效果如下：

5、表格標(biāo)簽: <table>:

　　border: 表格邊框.

　　cellpadding: 內(nèi)邊距

　　cellspacing: 外邊距.

　　width: 像素百分比.（最好通過css來設(shè)置長寬）

　　<tr>: table row

? ? ?　　 ? ?<th>: table head cell

? ? ? ? ?　　<td>: table data cell

　　rowspan: 單元格豎跨多少行

　　colspan: ?單元格橫跨多少列（即合并單元格）

　　<th>: table header <tbody>(不常用): 為表格進(jìn)行分區(qū).

<table border="" cellspacing="1" cellpadding="20" style="text-align: center;height: 100px"><tr><td>編號</td><td>姓名</td><td>班級</td><td>數(shù)學(xué)</td><td>語文</td><td>英文</td></tr><tr><td>001</td><td>張巖林</td><td>S1</td><td>120</td><td>109</td><td>120</td></tr><tr><td>001</td><td>張林</td><td>S1</td><td>100</td><td>19</td><td>100</td></tr><tr><td>001</td><td>小康</td><td>S1</td><td>89</td><td>100</td><td>10</td></tr><tr><td>001</td><td>小虎</td><td>S1</td><td>10</td><td>19</td><td>12</td></tr></table> code

效果如下：

表格中還有合并單元格:

6、表單標(biāo)簽（django）<form>:

? ? ? 表單用于向服務(wù)器傳輸數(shù)據(jù)。

? ? ? 表單能夠包含?input 元素，比如文本字段、復(fù)選框、單選框、提交按鈕等等。

? ? ? 表單還可以包含textarea、select、fieldset和?label 元素。

1>.表單屬性

　　HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互。表單標(biāo)簽, 要提交的所有內(nèi)容都應(yīng)該在該標(biāo)簽中.

　　action: 表單提交到哪. 一般指向服務(wù)器端一個程序,程序接收到表單提交過來的數(shù)據(jù)（即表單元素值）作相應(yīng)處理，比如https://www.sogou.com/web　　

　　method: 表單的提交方式 post/get 默認(rèn)取值就是 get（信封）

　　get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內(nèi)容的長度有限制.

　　post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內(nèi)容的長度理論上無限制.

　　get/post是常見的兩種請求方式.

2>.表單元素

? ? ?<input> ? ? type: ? ? text 文本輸入框

? ? ?password 密碼輸入框

? ? ?radio 單選框

? ? ?checkbox 多選框 ?

? ? ?submit 提交按鈕 ? ? ? ? ? ?

? ? ?button 按鈕(需要配合js使用.) button和submit的區(qū)別？

? ? ?file 提交文件：form表單需要加上屬性enctype="multipart/form-data"

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>知乎</title></head> <body><div style="background-color: aquamarine;height: 590px;width: 292px; margin: 0 auto;margin-top: 6%"><img src="QQ圖片20160624092733.png"><br><p style="text-align: center">與世界分享你的知識、經(jīng)驗(yàn)和見解</p><hr><form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data"><p> 用戶 <input type="text" name="username"></p><p> 密碼 <input type="password" name="passwd"></p><hr><p> 性別男<input type="radio" name="sex" value="man"> 女<input type="radio" name="sex" value="woman"></p><hr><p> 愛好籃球<input type="checkbox" name="lanqiu" value="籃球">足球<input type="checkbox" name="zuqiu" value="足球">排球<input type="checkbox" name="paiqiu" value="排球">臺球<input type="checkbox" name="taiqiu" value="臺球"></p><hr><br>城市<select name="language" ><optgroup label="河北省"><option value="保定市">保定市</option><option value="邯鄲市">邯鄲市</option><option value="承德市">承德市</option></optgroup><optgroup label="河南省"><option value="洛陽市">洛陽市</option><option value="信陽市">信陽市</option><option value="鄭州市">鄭州市</option></optgroup><br></select><hr><p style="text-align: center">備注<textarea name="qq" style="height: 60px;width: 220px"></textarea></p><p><input type="file" name="file_name" ></p><hr><p style="text-align: center"><input type="button" value="提交"> <input type="button" value="猛戳這里"></p></form></div> <table ><tr><td>1</td><td>2</td></tr><tr><td>1</td><td>2</td></tr> </table></body> </html> from表單

效果有點(diǎn)low，講究看吧

?下面咱就來分析一下每個代碼的意義：

轉(zhuǎn)載于:https://www.cnblogs.com/aylin/p/5617438.html

總結(jié)

以上是生活随笔為你收集整理的HTML基础做出属于自己的完美网页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：阶段性思考
下一篇： hibernate映射-单向n-n关联关