HTML前端

時間 2019-11-17

標籤 html 前端欄目 HTML 简体版

原文原文鏈接

--------------------------習慣真是一種頑強而巨大的力量，它能夠主宰人生。所以，人自幼就應該經過完美的教育，去創建一種良好的習慣。javascript

----------------------------------------------------------------------------------------------------------------------------------------------------------css

HTML發展史

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

HTML 2.0——1995年11月，RFC 1866發佈java

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愈來愈受到人們的喜好。app

HTML5編輯規範

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

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

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

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

五、HTML註釋的內容不給予顯示。

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

由 akuny 建立，Alma 最後一次修改 2018-08-20 14:26:25

HTML即超文本標記語言，是目前應用最爲普遍的語言之一，是組成一個網頁的主要語言。在現今這個HTML5華麗麗地佔領了整個互聯網的時候，若是想要經過網頁抓住瀏覽者的眼球光靠因循守舊是不行的，程序猿們須要掌握一些必須知道的HTML經常使用代碼，由於只有熟悉掌握了經常使用的HTML代碼，程序猿們在編寫網頁的時候才能夠作到流暢美觀，用細膩的思惟和創意的細節效果打動並留住網頁瀏覽者。

html+css代碼

文本設置
一、font-size: 字號大小
二、font-style: 字體格式
三、font-weight: 字體粗細
四、顏色屬性color: 文本顏色
注意使用網頁安全色

超連接設置
text-decoration: 參數
參數取值範圍：
underline：爲文字加下劃線
overline：爲文字加上劃線
line-through：爲文字加刪除線
blink：使文字閃爍
none：不顯示上述任何效果

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

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

background-attachment: 參數

背景圖片固定控制背景圖片是否隨網頁的滾動而滾動。若是不設置背景圖片固定屬性，瀏覽器默認背景圖片隨網頁的滾動而滾動。爲了不過於花哨的背景圖片在滾動時轉移瀏覽者的注意力，通常都設爲固定。

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

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

參數取值範圍：

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

pre 保留空白

nowrap 文本不換行
七、顯示樣式
display: 參數
參數取值範圍：
block：塊級元素，在對象先後都換行
inline：在對象先後都不換行
list-item：在對象先後都換行，增長了項目符號
none：無顯示

方框
一、height 高度
二、width 寬度
三、padding 內邊距
四、margin 外邊距
五、float（浮動）：可讓塊級元素在一行中排列，例如橫向菜單。
六、clear 清除浮動

邊框
一、樣式
border style 參數
邊框樣式的參數：
none：無邊框
dotted：邊框爲點線
dashed：邊框爲長短線
solid：邊框爲實線
double：邊框爲雙線
二、寬度 border width
三、顏色 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"> 取消選取、防止複製

onpaste="return false" 不許粘貼

oncopy="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.onkeydown=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">