html的一些基礎(chǔ)入門資料或者筆記？
時(shí)間：2024-02-09 16:30:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2024-02-09 16:30:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
html的一些基礎(chǔ)入門資料或者筆記？：自己整理了好多天 希望能給大家的學(xué)習(xí)帶來(lái)幫助
編寫工具：aptana/dreamweaver/
常用的標(biāo)記與格式：
<html>
<head>
<title>標(biāo)題標(biāo)記</title> <!--網(wǎng)頁(yè)標(biāo)記對(duì)-->
</head>
* <body>
<!--以下是標(biāo)題對(duì)-->
<h1>標(biāo)題1</h1> <!--有六種字號(hào) 號(hào)越小字越大-->
<p>這里表示段落</p> <!--內(nèi)容多了之后會(huì)自動(dòng)換行-->
<p>空 格</p>
<p><font size="+3">空格 123</p> <!--空格-->
<p>在本條代<br>碼中出現(xiàn)<br>了多條強(qiáng)制換行符</p> <!--回車--> 標(biāo)準(zhǔn)寫法為<br />
<hr />橫線
<!--
這里放第一行注釋
這里放第二行注釋 但是你能看到么？！
-->
物理字體：
<b>這個(gè)是粗體</b>
<u>這個(gè)是下劃線</u>
<i>這個(gè)是斜體</i>
<s>這個(gè)是刪除線</s> <strike>
這個(gè)是<sup>上標(biāo)</sup>
這個(gè)是<sub>下標(biāo)</sub>
邏輯字體：
<em>這個(gè)是強(qiáng)調(diào)</em>
<strong>這個(gè)是加重</strong>
<small>這個(gè)是小字</small>
<big>這個(gè)是大的</big>
字體標(biāo)記：
<font size="+3"> html </font> <!--字體大小的調(diào)整1~7 也可以是減號(hào)-->
<font color="red"> html lalallalala </font> <!--可以是顏色的單詞 也可以是RGB的顏色值例如#000000 W#W標(biāo)準(zhǔn)-->
<font color=#cccccc> html lalallalala </font>
face="黑體" 字體設(shè)置
* <pre> 格式文本化 在網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中可能會(huì)向用戶展示一部分計(jì)算機(jī)代碼，而展示計(jì)算機(jī)代碼較長(zhǎng)時(shí)或許會(huì)用到這一個(gè)指令
其中<xmp>…</xmp>相似 但是這條語(yǔ)句會(huì)進(jìn)行html代碼的解釋
<code>…</code> 代碼式的小型固定寬度字體顯示的文本
<kbd>…</kbd> 代碼樣式固定寬度字體渲染
<tt>…</tt> 代碼樣式固定寬度字體渲染文本
<var>…</var> 代碼樣式斜體渲染
<smp>…</smp> 字體相對(duì)要細(xì)一點(diǎn)
文字布局：
文字一<p>文字二 <p>兩行文字之間空出一行的作用 <p />是<p></p>的簡(jiǎn)寫但是由于<p></p>里面沒有內(nèi)容所以說(shuō)會(huì)出現(xiàn)空格
<br>如果存在多個(gè) 會(huì)出現(xiàn)多個(gè)空行
<nobr> 不換行控制
fjakdjfkjalkdfj
dsfadfdsagafdsg
</nobr>
文字對(duì)齊：
<p align="right">HTMl啦啦啦</p> left right center 左對(duì)齊 右對(duì)齊 居中 align可放在<p>與<div>里面
列表：
<ul> 無(wú)序列表 有序?yàn)?lt;ol type="#">…<ol> 其中#可以用a A i I 1等來(lái)表示
<li>表項(xiàng)1</li>
<li>表項(xiàng)2</li>
<li>表項(xiàng)3</li>
</ul>
文字滾動(dòng)事例：<marquee direction="right">做人要厚道</marquee> right left down up 可以在txt編輯隨便找一個(gè)瀏覽器運(yùn)行
scrollamount="500"表示速度
behavior可以用來(lái)設(shè)置滾動(dòng)屬性 alternate表示來(lái)回循環(huán)滾動(dòng) slide表示內(nèi)容滾動(dòng)一次就停止 loop="3"表示循環(huán)三次
scrolldelay="10" 設(shè)置滾動(dòng)的時(shí)間間隔 走一走停一停
bgcolor="red" 滾動(dòng)的背景顏色
width="250" height="55"
圖片移動(dòng)： <marquee width="600px" height="200px" bgcolor="#666666">
<img scr="html.jpg">圖片的大小在marquee中移動(dòng)
</marquee>
圖像：
<img scr="cn.jpg"> scr表示的是路徑 width="200px" height 表示寬度和高度
alt="hello world"表示鼠標(biāo)指針在圖片上的時(shí)候顯示交互的文字
align 表示對(duì)其方式 top right bottom left middle 頂 右 底（默認(rèn)） 左 中間 表示圖像和文本的關(guān)系
border="10px" 邊框大小 也可以選擇去除邊框
target="_blank"目標(biāo)為空 或者可以設(shè)置為_self等
http://www.baidu.com"><a href="mailto:lalall@163.com"> </a> <作者的郵箱>
錨點(diǎn)
<a href="#htmlbook">點(diǎn)擊到錨點(diǎn)處</a>
<a name="htmlbool">在這里設(shè)置一個(gè)錨點(diǎn)。在網(wǎng)頁(yè)第一頁(yè)做錨點(diǎn)</a> 在同一網(wǎng)頁(yè)可以加多個(gè)錨點(diǎn) 鏈接可以設(shè)置在本網(wǎng)頁(yè)外 在URL地址后加“#”后再加錨點(diǎn)名稱
有時(shí)候單擊圖像的不同位置會(huì)出現(xiàn)不同的鏈接，矩形，圓形，多邊形，這些分別用rect circle poly實(shí)現(xiàn)。 在<img>里放的是usermap，后面接的是地圖的名字。
在聲明地圖的時(shí)候，用<map></map>包圍。map里面放的是name的名稱，以便在其他地方調(diào)用。在<map></map>里有區(qū)域，由<area>屬性指定用什么形狀，后面緊跟Shape
Shape后面接rect circle poly之中的一個(gè)，coords里面是像素 href里面是連接的地址。
相對(duì)路徑： C:/Users/dezha/Desktop/html.jpg 絕對(duì)路徑
頁(yè)面不存在_百度搜索
<map name="Face">
<area shape="rect" href="page.html" coords="140,20,280,60">
<area shape="poly" href="image.html" coords="100,100,180,80,200,140">
<area shape="circle" href="new.html" coords="80,100,60">
</map>
表單：
<form>…</form>
<form action="show.aspx" method="get"> action表示表單提交后發(fā)送的地址 發(fā)送方式method有GET和POST兩種 基本區(qū)別是POST傳輸?shù)闹当容^大 值可以傳給數(shù)據(jù)庫(kù)可以是URL后臺(tái)
<input type="text"> *text password checkbox多選 radio單選 hidden submit reset
<br>
<input type="password">
<br>
多選單選框
<input type="checkbox" name=book>html知識(shí)
<input type="checkbox" name=book checked>css知識(shí) checked表示選中狀態(tài)
<input type="checkbox" name=book>html+css知識(shí)
<br>
下拉列表
<select>
<option>選項(xiàng)一</option>
<option selected>選項(xiàng)二</option5>
…………
</select>
<input type="button" value="提交 ">
圖片域
<input type="image" src="圖片路徑"/> 用來(lái)代替提交按鈕
文件域
<input type="file" /> 點(diǎn)擊瀏覽可以瀏覽本地文件
隱藏域： 在頁(yè)面內(nèi)看不見 但是可以用來(lái)裝載需傳輸?shù)臄?shù)據(jù)
<input type="hidden" name="name" value="我是隱藏域里的值" />
表格： 其中每個(gè)格子被稱為單元格
<table> </table> <tr></tr>表示對(duì)一行做標(biāo)記 <td>表示對(duì)表元標(biāo)記 <th>表示表頭，可以省略
<th rowspan=3></th>表格中的跨多行
<td rowspan=3></td>表格中的td跨多行
<th colspan=3></th> 或者下面表示跨多列
<td colspan=3></td>
<table border="1" width="300"> border表示邊框?qū)挾戎?height width表示高度和寬度
<th align="#"></th>表示表格中的對(duì)齊方式 center left right
<table align="#"><table>表示表格在網(wǎng)頁(yè)中的對(duì)齊 cellspacing 表示的單元格之間的間距 cellpadding 表示單元格的邊距
</form>
文本域
<textarea name=book rows=6 cols=60> 名稱 行 高 在需要輸入多行文字或者是需要填寫大量文字時(shí)用到 沒有用到<input>標(biāo)簽
……
</textarea>
框架： 可用于向?yàn)g覽器窗口中裝載多個(gè)html網(wǎng)頁(yè)文件，每個(gè)frame（幀 每個(gè)html文件占據(jù)一個(gè)）里的網(wǎng)頁(yè)都是相互獨(dú)立的。當(dāng)網(wǎng)站的每個(gè)網(wǎng)頁(yè)部分是不變的時(shí)候比較適合
通常在一個(gè)幀里面導(dǎo)航鏈接，將需要變化的文件放到另一個(gè)幀里面
框架型網(wǎng)頁(yè)：如果一個(gè)網(wǎng)頁(yè)的導(dǎo)航菜單是固定的，在頁(yè)面中的信息可以上下移動(dòng)，這就可以認(rèn)為該頁(yè)面是一個(gè)框架型的網(wǎng)頁(yè)。其基本語(yǔ)法為<frameset></frameset>放在<head>標(biāo)記對(duì)后面
與之并列。其中又有frame標(biāo)簽<frame></frame>來(lái)表示在框架內(nèi)放入什么文件
<frameset cols="25%,50%,*"> rows為水平分割 *b表示剩下的 frameborder="no"表示隱藏邊框
http://www.biadu.com" scrolling="no"> scrolling表示滾動(dòng)條 有auto yes和no三種屬性
http://www.hao123.com">
http://www.163.com"> 網(wǎng)頁(yè)不可更改大小
</frameset>
<noframes>對(duì)不起您的網(wǎng)頁(yè)不支持框架</frames>
<frameset>在<html>標(biāo)記對(duì)內(nèi)，不能夠與<body>并列
可以用來(lái)制作導(dǎo)航框架
內(nèi)聯(lián)框架：存在于<body></body>之中，也叫做浮動(dòng)框架 用<iframe></iframe>或者<iframe />來(lái)表示
http://www.sina.com.cn" />
網(wǎng)頁(yè)中的多媒體：可以播放flash mid waw mp3等格式的多媒體文件
<embed src=url > url表示多媒體的路徑，可以是絕對(duì)路徑也可以是相對(duì)路徑 src可以插入midi wav aiff au mp3格式 自動(dòng)播放格式 autostart=true|false
循環(huán)播放格式 loop=true|false|一個(gè)數(shù)字 hidden=true|false 設(shè)置面板的隱藏 height width設(shè)置面板的大小單位為px
對(duì)齊方式align=top bottom center baseline left right texttop控制面板的頂部與當(dāng)前行中最高的文字頂部對(duì)齊 middle中間與當(dāng)前行的基準(zhǔn)線對(duì)齊 absmiddle absbottom與當(dāng)前文本對(duì)齊
</body>
</html>
DIV層 用來(lái)進(jìn)行網(wǎng)頁(yè)的布局 可以與<table>做替換 可以有多層 最外層的別成為容器
代碼舉例：
<html>
<head>
<title>DIV布局</title>
<style type="text/css">
/*設(shè)置層的樣式*/
#header
{
background:blue;
height;100px;
}
#content{}
#right
{
width:33%;
height:250px;
float:right;
background:green;
}
#left
{
width:33%;
height:250px;
float:left;
background:orangr;
}
#middle
{
width:33%;
height:250;
float:left;
background:yellow;
}
#bottom
{
height:80px;
background:grey;
clear:both;
}
</style>
</head>
<body>
<div id="header">頭部</div>
<div id="content">
<div id=“right”>網(wǎng)頁(yè)體右邊</div>
<div id=”left“>網(wǎng)頁(yè)體左邊</div>
<div id="middle">網(wǎng)頁(yè)中間</div>
</div>
<div id="bottom">網(wǎng)頁(yè)底部</div>
</body>
</html>
其中地址部分scr有可能寫錯(cuò)。參考資料來(lái)源于《HTML+CSS從入門到精通》
關(guān)鍵詞：資料,筆記,入門,基礎(chǔ)
在線咨詢