當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

从0开始接触html--第一天学习内容总结

發(fā)布時間：2023/12/2 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了从0开始接触html--第一天学习内容总结小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

第一天

總結(jié):

h1-h6 p 段落 hr br

有序 ol li 無序 ul li 定義列表 dl dt dd

塊級元素：獨占一行，h1-h6 p hr div

行內(nèi)元素：共占一行, em和i strong和b u del和s span

塊級分區(qū)元素：div header nav article footer

行內(nèi)分區(qū)元素：span

特殊字符：空格：&nbsp ? 小于號:<? &lt ? ?大于號:>? &gt

圖片 <img alt="圖片不能正常顯示的時候顯示此內(nèi)容" src="路徑" width/height="100px / 50%" title="鼠標(biāo)懸停時顯示的內(nèi)容">

圖片地圖

細(xì)節(jié):

文本標(biāo)簽:

h1-h6 內(nèi)容標(biāo)題標(biāo)簽，內(nèi)容獨占一行屬性：align=left/right/center

p 段落標(biāo)簽內(nèi)容獨占一行

hr 水平分割線

br 換行

代碼實現(xiàn):

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>文本標(biāo)簽</title></head><body><h1 align="center">我是老大</h1><h2 align="right">我是老二</h2><h3>我是老三</h3><h4>我是老四</h4><h5>我是老五</h5><h6>我是老六</h6><hr><p>我是段落標(biāo)簽1</p><p>我是段落標(biāo)簽2</p><p>我是段落標(biāo)簽3</p>開始學(xué)習(xí)HTML了<br>你開心嗎?</body> </html>

列表標(biāo)簽:

ul 無序列表?子標(biāo)簽<li></li>

ol 有序列表? 屬性:type=1/a/A/i/I? reverserd="reverserd"? start="10"?子標(biāo)簽<li></li>

dl?定義列表?子標(biāo)簽:<dt></dt>? ?<dd></dd>

有序列表和無序列表之間可以相互嵌套

代碼實現(xiàn):

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表標(biāo)簽</title> </head> <body><h3>無序列表:</h3><ul type="square"><li>劉備</li><li>貂蟬</li><li>項羽</li><li>狄仁杰</li><li>呂布</li></ul><h3>有序列表:</h3>把大象關(guān)進冰箱需要幾步?<ol reversed="reversed" start="10"><li>打開冰箱門</li><li>把大象裝進冰箱</li><li>關(guān)上冰箱門</li></ol><h3>定義列表</h3><dl><dt>涼菜</dt><dd>大拌菜</dd><dd>花毛一體</dd><dd>拍黃瓜</dd><dt>炒菜</dt><dd>宮保雞丁</dd><dd>木須肉</dd><dd>小炒肉</dd></dl><h3>列表嵌套:</h3><ol><li>ol1</li><li>ol2<ul><li>第二層1</li><li>第二層2</li><ol><li>第三層1</li><li>第三層2</li><li>第三層3</li></ol><li>第二層3</li></ul></li><li>ol3</li></ol> </body> </html>

特殊字符:

空格: 

<? ? ?:<

>? ? ?:>

代碼實現(xiàn):

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>特殊字符</title> </head> <body> 我愛     學(xué)習(xí)<br> <我愛學(xué)習(xí)> </body> </html>

分區(qū)標(biāo)簽:

分區(qū)標(biāo)簽自身沒有顯示效果，可以充當(dāng)容器的作用，用于包含多個功能相關(guān)元素，可以進行元素的整體控制。

div：塊級分區(qū)元素，獨占一行

span：行內(nèi)分區(qū)元素，和其它行內(nèi)元素共占一行

開發(fā)頁面時通常會分為三大區(qū)

頭部

體部

腳部

H5標(biāo)準(zhǔn)中新增的分區(qū)標(biāo)簽作用和div一樣但是更直觀

　　　　頭部

　　　　導(dǎo)航

　　　　文章，正文腳部

代碼實現(xiàn):

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>塊級元素和行內(nèi)元素</title> </head> <body> <h3>分區(qū)標(biāo)簽</h3><div>div1</div><div>div2</div><div>div3</div><span>span1</span><span>span2</span><span>span3</span><h3>H5新增分區(qū)標(biāo)簽</h3><header>頭部區(qū)域</header><nav>導(dǎo)航區(qū)域</nav><article>正文區(qū)域</article><footer>腳步區(qū)域</footer> </body> </html>

圖片img:

路徑分為兩種：

相對路徑：訪問站內(nèi)資源使用相對路徑 a.圖片和頁面同一目錄，直接寫圖片名稱 b.圖片在頁面的上級目錄, ../圖片名 c.圖片在頁面的下級目錄, 文件夾名/圖片名

絕對路徑：訪問其它網(wǎng)站的資源使用絕對路徑，以http開頭，存在風(fēng)險，如果目標(biāo)圖片路徑發(fā)生改變則不能顯示

常用屬性：

alt: 當(dāng)圖片不能正常顯示的時候顯示此內(nèi)容

title：當(dāng)鼠標(biāo)在圖片上懸停的時候顯示此內(nèi)容

width/height: 設(shè)置圖片的寬度和高度，可以設(shè)置像素px或百分比%，如果只設(shè)置寬度則高度等比例縮放

支持的圖片格式： jpg/jpeg不支持透明色 png支持透明色 GIF動圖

代碼實現(xiàn)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body>   <img alt="這是一個美女" src="a.jpg"> <img alt="這是一片風(fēng)景" title="這是標(biāo)題" width="50%" src="../water.jpg"> <img alt="這是一只老虎" width="50%" src="abc/tiger.jpg"> <img src="https://goss.veer.com/creative/vcg/veer/800water/veer-152360031.jpg"> </body> </html>

圖片地圖:

常用屬性：

shape：形狀，常用rect矩形和 circle圓形

coords：坐標(biāo) 矩形四個值(x1,y1,x2,y2) 圓形三個值(x,y,半徑)

href: 值為路徑，可以寫相對路徑和絕對路徑，路徑可以指向頁面，也可以指向文件，如果瀏覽器支持打開此格式的文件則直接瀏覽（圖片，pdf等）如果不支持打開則下載此文件

代碼實現(xiàn):

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <img src="a.jpg" width="500px" usemap="#mymap">  <map name="mymap" id="mymap">  <area alt="文字介紹" shape="rect" coords="0,0,100,100" href="demo06.html"> <area alt="文字介紹" shape="circle" coords="200,200,100" href="../water.jpg"> </map> </body> </html>

回顧練習(xí):

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>回顧總結(jié)練習(xí)</title> </head> <body><h1>這是h1</h1><h2>這是h2</h2><h3>這是h3</h3><h4>這是h4</h4><h5>這是h5</h5><h6>這是h6</h6><hr> <p>段落標(biāo)簽1</p><p>段落標(biāo)簽2</p><p>段落標(biāo)簽3</p>測試換行<br>測試換行 <h3>無序列表</h3><ul type="circle"><li>吃飯</li><li>睡覺</li><li>敲代碼</li></ul><h3>有序列表</h3><ol type="1" start="8" reversed="reversed"><li>HTML</li><li>CSS</li><li>JavaScript</li><li>JQuery</li></ol><h3>定義列表</h3><dl><dt>歌星</dt><dd>周杰倫</dd><dd>劉德華</dd><dd>張學(xué)友</dd><dt>影星</dt><dd>周星馳</dd><dd>成龍</dd><dd>李連杰</dd></dl><h3>列表嵌套</h3><ul><li>我的訂單</li><ul><li>全部訂單</li><li>待付款</li><li>待收貨</li><li>待評價</li><li>退貨退款</li></ul><li>我的優(yōu)惠券</li><li>收貨地址</li><ul><li>地址管理</li></ul><li>賬號管理</li><ul><li>我的信息</li><li>安全管理</li></ul></ul><h3>分區(qū)標(biāo)簽</h3><div>div1</div><div>div2</div><div>div3</div><span>span1</span><span>span2</span><span>span3</span><h3>H5新增分區(qū)標(biāo)簽</h3><header>頭部區(qū)域</header><nav>導(dǎo)航區(qū)域</nav><article>正文區(qū)域</article><footer>腳步區(qū)域</footer><h3>塊級元素</h3>div,h1-h6,p,hr<h3>行內(nèi)元素</h3>span,<em>斜體</em> <i>斜體</i><strong>加粗</strong> <b>加粗</b><u>下劃線</u><del>刪除線</del> <s>刪除線</s><br><h3>圖片標(biāo)簽</h3><img alt="這是圖片" title="圖片" width="50%" src="../water.jpg" usemap="#mymap"><h3>圖片地圖</h3><map name="mymap" id="mymap"><area shape="rect" coords="0,0,100,100" href="http://www.baidu.com"><area shape="circle" coords="150,50,50" href="http://www.baidu.com"></map></body> </html>

本文轉(zhuǎn)載于:猿2048https://www.mk2048.com/blog/blog.php?id=hii0i0j&title=從0開始接觸html--第一天學(xué)習(xí)內(nèi)容總結(jié)

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的从0开始接触html--第一天学习内容总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

html
内容

上一篇： css3总结之居中
下一篇：微信小程序APP（商超营销类）经验总结