當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML前端

發布時間：2025/7/14 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML前端小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

--------------------------習慣真是一種頑強而巨大的力量，它可以主宰人生。因此，人自幼就應該通過完美的教育，去建立一種良好的習慣。

----------------------------------------------------------------------------------------------------------------------------------------------------------

HTML發展史

HTML沒有1.0，因為關于它的初版存在爭議，1995年HTML 2.0面世，1997年由國際官方組織W3C推出了HTML 3.2以及HTML 4.0標準，后面W3C(萬維網聯盟)也漸漸變成Web技術領域的權威，經過漫長的演變，2014年，HTML 5標準最終面世。

HTML 2.0——1995年11月，RFC 1866發布

HTML 3.2——1997年1月14日，W3C發布推薦標準

HTML 4.0——1997年12月18日，W3C發布推薦標準

HTML 4.01——1999年12月24日，W3C發布推薦標準

HTML 5——2014年10月28日，W3C發布推薦標準

HTML結構

HTML的結構一般包括<head>標簽和<body>標簽，<head>和<body>這2個標記符分別表示網頁的頭部和正文。頭部中可包含頁面的標題、關鍵詞、描述說明等內容，它本身不作為內容來顯示，但影響網頁顯示的效果。<body></body>當中是網頁實際顯示的內容，正文標記符又被稱為實體標記。頁面當中通常包含有很多指向其他相關頁面或其他節點的指針，通過點擊，可以很方便地獲取新的網頁，這是HTML獲得廣泛推廣運用最重要的原因之一，而由這些相互之間存在關聯的頁面組成的有機集合便是網站。

究竟HTML為什么會被普及?這就要歸功于互聯網的高速發展，對于編程語言的需求直線上升。而HTML5具有超集方式的簡易性、運用廣泛的可拓展性、靈活應變的平臺適應性以及簡單的通用性。憑借著這些特性，HTML越來越受到人們的喜愛。

HTML5編輯規范

1、文件拓展名默認使用htm或者html，便于操作系統或者程序辨認文件，而圖片則基本上存為gif或jpg

2、瀏覽器默認忽視回車符，不過為了方便閱覽，人們還是會習慣地在寫完一段代碼后進行回車

3、標記符號用尖括號括起來，帶斜杠的元素表示該標記說明結束，大多數標記符必須成對使用，用以說明起始和結束。

4、必須使用半角而不是全角字符

5、HTML注釋的內容不給予顯示。

程序員必須知道的HTML常用代碼有哪些？

由?akuny?創建，Alma 最后一次修改?2018-08-20 14:26:25

HTML即超文本標記語言，是目前應用最為廣泛的語言之一，是組成一個網頁的主要語言。在現今這個HTML5華麗麗地占領了整個互聯網的時候，如果想要通過網頁抓住瀏覽者的眼球光靠因循守舊是不行的，程序猿們需要掌握一些必須知道的HTML常用代碼，因為只有熟悉掌握了常用的HTML代碼，程序猿們在編寫網頁的時候才可以做到流暢美觀，用細膩的思維和創意的細節效果打動并留住網頁瀏覽者。

html+css代碼

文本設置
1、font-size: 字號大小?
2、font-style: 字體格式
3、font-weight: 字體粗細
4、顏色屬性color: 文本顏色
注意使用網頁安全色 ? 超鏈接設置
text-decoration:?參數
參數取值范圍：?
underline：為文字加下劃線?
overline：為文字加上劃線?
line-through：為文字加刪除線?
blink：使文字閃爍?
none：不顯示上述任何效果 ?

背景
1、背景顏色
padding: 0px;">2、背景圖片
background-image: url(URL)
URL就是背景圖片的存放路徑，none表示無。
3、背景圖片重復
background-repeat: 參數

參數取值范圍：
no-repeat：不重復平鋪背景圖片
repeat-x：使圖片只在水平方向上平鋪
repeat-y：使圖片只在垂直方向上平鋪
如果不指定背景圖片重復屬性，瀏覽器默認的是背景圖片向水平和垂直兩個方向平鋪。
4、背景圖片固定

background-attachment: 參數

背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。如果不設置背景圖片固定屬性，瀏覽器默認背景圖片隨網頁的滾動而滾動。為了避免過于花哨的背景圖片在滾動時轉移瀏覽者的注意力，一般都設為固定。

參數取值范圍：
fixed：網頁滾動時，背景圖片相對于瀏覽器的窗口而言，固定不動
scroll：網頁滾動時，背景圖片相對于瀏覽器的窗口而言，一起滾動

區塊
1、單詞間距?
word-spacing: 單詞間距?
2、字母間距?
letter-spacing: 字母間距
3、文本對齊
text-align: 參數
參數的取值：
left：左對齊
right：右對齊
center：居中對齊
justify：相對左右兩端對齊
4、垂直對齊
vertical-align: 參數
top：頂對齊
bottom：底對齊
text-top：相對文本頂對齊
text-bottom：相對文本底對齊
baseline：基準線對齊
middle：中心對齊
sub：以下標的形式顯示
super：以上標的形式顯示
5、文本縮進
text-indent: 縮進距離
12px相當于一個文字距離
6、空格
white-space: 參數

參數取值范圍：?

normal 默認，空白會被瀏覽器忽略

pre 保留空白

nowrap 文本不換行
7、顯示樣式?
display: 參數?
參數取值范圍：?
block：塊級元素，在對象前后都換行?
inline：在對象前后都不換行?
list-item：在對象前后都換行，增加了項目符號?
none：無顯示

? 方框
1、height 高度
2、width 寬度
3、padding 內邊距
4、margin 外邊距
5、float（浮動）：可以讓塊級元素在一行中排列，例如橫向菜單。?
6、clear 清除浮動 ? 邊框
1、樣式
border style 參數
邊框樣式的參數：
none：無邊框?
dotted：邊框為點線
dashed：邊框為長短線
solid：邊框為實線
double：邊框為雙線
2、寬度?border width?
3、顏色?border color ? 列表
list-style-type 列表樣式
不同瀏覽器的列表符可能不相同，可能會影響到網頁，所以網頁中的列表大多都是由背景圖片顯示。
控制用戶界面的樣式 ? 鼠標
cursor：鼠標形狀參數?
CSS鼠標形狀參數表：?
鼠標形狀：CSS代碼
style="cursor:hand" 　　　　　手形
style="cursor:crosshair" 　　十字形
style="cursor:text" 　　　　　文本形
style="cursor:wait" 　　　　　沙漏形
style="cursor:move" 　　　　十字箭頭形：
style="cursor:help" 　　　　　問號形
style="cursor:e-resize" 　　　右箭頭形
style="cursor:n-resize" 　　　上箭頭形
style="cursor:nw-resize" 　　左上箭頭形
style="cursor:w-resize" 　　　左箭頭形
style="cursor:s-resize" 　　　下箭頭形?
style="cursor:se-resize" 　　右下箭頭形?
style="cursor:sw-resize" 　　左下箭頭形

?

HTML常用代碼之：結構性定義

文件類型<HTML></HTML> （放在檔案的開頭與結尾）

文件主題<TITLE></TITLE> （必須放在「文頭」區塊內）

文頭<HEAD></HEAD> （描述性資料，像是「主題」）

文體<BODY></BODY> （文件本體）

標題<H?></H?> （從1到6，有六層選擇）

標題的對齊 <H?ALIGN=LEFT|CENTER|RIGHT></H?>

區分<DIV></DIV>

區分的對齊 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>

引文區塊<BLOCKQUOTE></BLOCKQUOTE> （通常會內縮）

強調<EM></EM> （通常會以斜體顯示）

特別強調<STRONG></STRONG> （通常會以加粗顯示）

引文<CITE></CITE> （通常會以斜體顯示）

碼<CODE></CODE> （顯示原始碼之用）

樣本<SAMP></SAMP>

鍵盤輸入<KBD></KBD>

變數<VAR></VAR>

定義<DFN></DFN> （有些瀏覽器不提供）

地址 <ADDRESS></ADDRESS>

大字<BIG></BIG>

小字<SMALL></SMALL>

與外觀相關的標簽（作者自訂的表現方式）

加粗<B></B>

斜體<I></I>

底線<U></U> （尚有些瀏覽器不提供）

刪除線<S></S> （尚有些瀏覽器不提供）

下標<SUB></SUB>

上標<SUP></SUP>

打字機體<TT></TT> （用單空格字型顯示）

預定格式<PRE></PRE> （保留文件中空格的大小）

預定格式的寬度<PRE WIDTH=?></PRE>（以字元計算）

向中看齊<CENTER></CENTER> （文字與圖片都可以）

閃耀<BLINK></BLINK> （有史以來最被嘲弄的標簽）

字體大小 <FONTSIZE=?></FONT>（從1到7）

改變字體大小 <FONTSIZE=+|-?></FONT>

基本字體大小 <BASEFONTSIZE=?> （從1到7; 內定為3）

字體顏色 <FONTCOLOR="#$$"></FONT>（$$為顏色代碼）

?

HTML常用代碼之：修改頁面的實用性HTML代碼

貼圖：<img src="圖片地址">

加入連接：<a href="所要連接的相關地址">寫上你想寫的字</a>

在新窗口打開連接：<a href="相關地址" target="_blank">寫上要寫的字</a>

移動字體(走馬燈)：<marquee>寫上你想寫的字</marquee>

字體加粗：<b>寫上你想寫的字</b>

字體斜體：<i>寫上你想寫的字</i>

字體下劃線: <u>寫上你想寫的字</u>

字體刪除線: <s>寫上你想寫的字</s>

字體加大: <big>寫上你想寫的字</big>

字體控制大小：<h1>寫上你想寫的字</h1> (其中字體大小可從h1-h5,h1最大，h5最小)

更改字體顏色：<font color="#value">寫上你想寫的字</font>(其中value值在000000與ffffff(16位進制)之間

消除連接的下劃線：<a href="相關地址" style="text-decoration:none">寫上你想寫的字</a>

貼音樂：<embed src="音樂地址" width="寬度" height="高度" autostart=false>

貼flash: <embed src="flash地址" width="寬度" height="高度">

貼影視文件：<img dynsrc="文件地址" width="寬度" height="高度" start=mouseover>

換行：<br>

段落：<p>段落</p>

原始文字樣式：<pre>正文</pre>

換帖子背景：<body background="背景圖片地址">

固定帖子背景不隨滾動條滾動：<body background="背景圖片地址" body?bgproperties=fixed>

定制帖子背景顏色：<body bgcolor="#value">(value值見10)

帖子背景音樂：<bgsound="背景音樂地址" loop=infinite>

貼網頁：<iframe. src="相關地址" width="寬度" height="高度"></iframe>

?

HTML常用代碼之：常常會遇到的問題

點擊關閉窗口
<a href="javascript.:top.window.close();">點擊關閉窗口</a>！

請問如何去掉主頁右面的滾動條？
<body scroll="no">

如何做到讓一個網頁自動關閉.
<html>

<head>
<OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
</head>
<body >
這個窗口會在10秒過后自動關閉,而且不會出現提示. </body>

如何在不刷新頁面的情況下刷新css?
<style>
button{ color:#000000;}
</style>
<button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘>點擊按鈕直接修改style標簽里button選擇符使按鈕改為　　紅色</button>
　　

請問如何讓網頁自動刷新？
在head部記入<META. HTTP-EQUIV="Refresh" c>其中20為20秒后自動刷新，你可以更改為任意值。
如何讓頁面自動刷新？
方法一，用refresh

HTML 代碼片段如下:
<head>
<meta. http-equiv="refresh" c>
</head>
5表示刷新時間
[Ctrl+A 全部選擇提示:你可先修改部分代碼，再按運行]

方法二，使用setTimeout控制
<img src=/logo.gif>
<script>
function rl(){
document.location.reload()
}
setTimeout(rl,2000)
</SCRIPT>

如何讓超鏈接沒有下劃線
在源代碼中的<HEAD>…</HEAD>之間輸入如下代碼：
<style. type="text/css">  </style>

請問如何去掉IE的上下滾動條？
<body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘>
</body>

怎樣才能把RealPlayer文件在網頁做一個試聽連接？
<embed height=25　src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c>

如何用html實現瀏覽器上后退按鈕的功能？
<a href="java script.:history.go(-1)">點擊后退</a>
或者
<script> history.back() </SCRIPT>

?

HTML常用代碼之：你不一定知道的技巧

?ncontextmenu="window.event.returnValue=false" 將徹底屏蔽鼠標右鍵
<table borderncontextmenu=return(false)><td>no</table> 可用于Table

<body nselectstart="return false"> 取消選取、防止復制

οnpaste="return false" 不準粘貼

οncοpy="return false;" ncut="return false;" 防止復制

<inputstyle="ime-mode:disabled"> 關閉輸入法

永遠都會帶著框架
<script. language="JavaScript"></script>

?防止被人frame.

<SCRIPT. LANGUAGE=JAVASCRIPT></SCRIPT>

?網頁將不能被另存為

?查看網頁源代碼

刪除時確認

屏蔽功能鍵Shift,Alt,Ctrl
<script>
function look(){
if(event.shiftKey)
alert("禁止按Shift鍵!");//可以換成ALT　CTRL
}
document.οnkeydοwn=look;
</script>

?網頁不會被緩存
<META. HTTP-EQUIV="pragma" CONTENT="no-cache">
<META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate">
<META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
或者<META. HTTP-EQUIV="expires"CONTENT="0">

怎樣讓表單沒有凹凸感？
<input type=text style="border:1 solid #000000">
<input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"></textarea>

不要滾動條?
讓豎條沒有:
<body style="overflow:scroll;overflow-y:hidden">
</body>　　

讓橫條沒有:
<body style="overflow:scroll;overflow-x:hidden">
</body>
兩個都去掉？更簡單了
<body scroll="no">
</body>

怎樣去掉圖片鏈接點擊后，圖片周圍的虛線？

電子郵件處理提交表單

<form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain">
<input type=submit>
</form>

在打開的子窗口刷新父窗口的代碼里如何寫？
window.opener.location.reload()

如何設定打開頁面的大小
<body nload="top.resizeTo(300,200);">
打開頁面的位置<bodynload="top.moveBy(300,200);">

在頁面中如何加入不是滿鋪的背景圖片,拉動頁面時背景圖不動
<STYLE>
body
{background-image:url(logo.gif); background-repeat:no-repeat;
background-position:center;background-attachment: fixed}
</STYLE>

?檢查一段字符串是否全由數字組成
<script. language="Javascript"></script>

獲得一個窗口的大小
document.body.clientWidth; document.body.clientHeight

怎么判斷是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有漢字");
else alert("全是字符");

TEXTAREA自適應文字行數的多少
<textarea rows=1 name=s1 cols=27npropertychange="this.style.posHeight=this.scrollHeight">
</textarea>

?日期減去天數等于第二個日期
<script. language=Javascript>
function cc(dd,dadd)
{
//可以加上錯誤處理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")
} cc("12/23/2002",2)
</script>

?選擇了哪一個Radio
<HTML><script. language="vbscript">
function checkme()
for each ob in radio1
if ob.checked then window.alert ob.value
next
end function
</script><BODY>
<INPUT name="radio1" type="radio"value="style" checked>Style.
<INPUT name="radio1" type="radio"value="barcode">Barcode
<INPUT type="button" value="check"nclick="checkme()">
</BODY></HTML>

腳本永不出錯
<SCRIPT. LANGUAGE="JavaScript">

</SCRIPT>

ENTER鍵可以讓光標移到下一個輸入框
<input nkeydown="if(event.keyCode==13)event.keyCode=9">

全方位詳解HTML常用標簽

由?akuny?創建，Carrie 最后一次修改?2017-11-17 17:32:44

HTML是所有網頁制作技術的核心和基礎，也是每個網頁制作者必須掌握的基本知識，而HTML標簽是HTML語言中最基本的單位，是HTML最重要的組成部分。

初學者首先要知道html標簽的一些特點：

HTML標簽是與大小寫無關的，例如“主體”跟表示的意思是一樣的，推薦使用小寫。類似“<p>”這樣由尖括號包關鍵字組成，例如,

<h1>標題</h1>就是HTML標簽。HTML標簽一般是成對出現的，由開始標簽類似<h1>，左邊標簽一邊叫開始標簽，右邊</h1>叫結束標簽，有始有終，除了一些個別是單閉合標簽的，下面列舉HTML單閉合標簽。

單閉合標簽

1.<br />

2.<hr />

3.<area />

4.<base />

5.<img />

6.<input />

7.<link />

8.<meta />

9.<basefont />

10.<param />

11.<col />

12.<frame />

13.<embed />

轉載于:https://www.cnblogs.com/dealdwong2018/p/10121959.html

總結

以上是生活随笔為你收集整理的HTML前端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html

上一篇：网络概念小结
下一篇： docker开机启动和docker-co