从0开始接触html--第一天学习内容总结
生活随笔
收集整理的這篇文章主要介紹了
从0开始接触html--第一天学习内容总结
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一天
總結:
細節:
文本標簽:
代碼實現:
<!-- 文檔聲明,告訴瀏覽器使用哪個版本的標準解析此頁面, 此寫法是最高版本h5的寫法 --> <!DOCTYPE html> <html><!-- 除了聲明所有的標簽都在html標簽內部 --><head><!-- 頭:里面的內容是給瀏覽器看的 --><!-- 告訴瀏覽器頁面的字符集 --><meta charset="UTF-8"><!-- 頁面標題,顯示在瀏覽器的選項卡中 --><title>文本標簽</title></head><body><!-- 體:里面的內容是給用戶看的 --><h1 align="center">我是老大</h1><h2 align="right">我是老二</h2><h3>我是老三</h3><h4>我是老四</h4><h5>我是老五</h5><h6>我是老六</h6><hr><p>我是段落標簽1</p><p>我是段落標簽2</p><p>我是段落標簽3</p>開始學習HTML了<br>你開心嗎?</body> </html>?
?
?
列表標簽:
代碼實現:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表標簽</title> </head> <body><h3>無序列表:</h3><ul type="square"><!-- type="square/circle/disc"前面的小標記樣式 --><li>劉備</li><li>貂蟬</li><li>項羽</li><li>狄仁杰</li><li>呂布</li></ul><h3>有序列表:</h3>把大象關進冰箱需要幾步?<ol reversed="reversed" start="10"><!-- 從10開始倒序 --><li>打開冰箱門</li><li>把大象裝進冰箱</li><li>關上冰箱門</li></ol><h3>定義列表</h3><dl><!-- defined定義 list列表 --><dt>涼菜</dt><!-- defined title標題 --><dd>大拌菜</dd><!-- defined data數據 --><dd>花毛一體</dd><dd>拍黃瓜</dd><dt>炒菜</dt><dd>宮保雞丁</dd><dd>木須肉</dd><dd>小炒肉</dd></dl><h3>列表嵌套:</h3><!-- 嵌套有兩種方式 --><ol><li>ol1</li><li>ol2<!-- 1.嵌套在<li></li>里面 --><ul><li>第二層1</li><li>第二層2</li><!-- 2.嵌套在<li></li>下面 --><ol><li>第三層1</li><li>第三層2</li><li>第三層3</li></ol><li>第二層3</li></ul></li><li>ol3</li></ol> </body> </html>?
?
?
特殊字符:
代碼實現:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>特殊字符</title> </head> <body> 我愛 學習<br> <我愛學習> </body> </html>?
?
分區標簽:
分區標簽自身沒有顯示效果，可以充當容器的作用，用于包含多個功能相關元素，可以進行元素的整體控制。
div：塊級分區元素，獨占一行
span：行內分區元素，和其它行內元素共占一行
開發頁面時通常會分為三大區
頭部
體部
腳部
H5標準中新增的分區標簽 作用和div一樣 但是更直觀
頭部
導航
文章，正文腳部
代碼實現:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>塊級元素和行內元素</title> </head> <body> <h3>分區標簽</h3><div>div1</div><div>div2</div><div>div3</div><span>span1</span><span>span2</span><span>span3</span><h3>H5新增分區標簽</h3><header>頭部區域</header><nav>導航區域</nav><article>正文區域</article><footer>腳步區域</footer> </body> </html>?
?
?
圖片img:
-
路徑分為兩種：
相對路徑： 訪問站內資源使用相對路徑 a.圖片和頁面同一目錄，直接寫圖片名稱 b.圖片在頁面的上級目錄, ../圖片名 c.圖片在頁面的下級目錄, 文件夾名/圖片名
絕對路徑： 訪問其它網站的資源使用絕對路徑，以http開頭，存在風險，如果目標圖片路徑發生改變則不能顯示
-
常用屬性：
alt: 當圖片不能正常顯示的時候顯示此內容
title： 當鼠標在圖片上懸停的時候顯示此內容
width/height: 設置圖片的寬度和高度，可以設置像素px或百分比%，如果只設置寬度則高度等比例縮放
-
支持的圖片格式： jpg/jpeg不支持透明色 png支持透明色 GIF動圖
代碼實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <!-- 當圖片不能正常顯示的時候顯示此內容 --> <!-- 圖片路徑 1.相對路徑:顯示站內資源使用相對路徑a.圖片和頁面同一目錄,直接寫圖片名稱 a.jpgb.圖片在頁面的上級目錄, ../water.jpg(上兩級../../xxx)c.圖片在頁面的下級目錄, abc/tiger.jpg 2.絕對路徑:通常以http開頭,訪問站外資源使用絕對路徑,訪問站外資源也稱為圖片盜鏈目標圖片路徑發生改變,則不能正常顯示--><!-- 支持的圖片格式:jpg/jpeg不支持透明色 png支持透明色 gif動圖 --><!-- title:鼠標懸停時顯示的內容 --><!-- width/height 值為像素px或百分比,如果只設置寬,則高度會等比縮放 --> <img alt="這是一個美女" src="a.jpg"> <img alt="這是一片風景" title="這是標題" 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>?
?
圖片地圖:
- 常用屬性：
代碼實現:
<!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:區域 shape:形狀 rect:矩形 coords:坐標對角線兩個點的坐標(x1,xy1,x2,y2) --> <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>?
?
?
回顧練習:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>回顧總結練習</title> </head> <body><h1>這是h1</h1><h2>這是h2</h2><h3>這是h3</h3><h4>這是h4</h4><h5>這是h5</h5><h6>這是h6</h6><hr><!-- 水平分割線 --> <p>段落標簽1</p><p>段落標簽2</p><p>段落標簽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>張學友</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>我的優惠券</li><li>收貨地址</li><ul><li>地址管理</li></ul><li>賬號管理</li><ul><li>我的信息</li><li>安全管理</li></ul></ul><h3>分區標簽</h3><div>div1</div><div>div2</div><div>div3</div><span>span1</span><span>span2</span><span>span3</span><h3>H5新增分區標簽</h3><header>頭部區域</header><nav>導航區域</nav><article>正文區域</article><footer>腳步區域</footer><h3>塊級元素</h3>div,h1-h6,p,hr<h3>行內元素</h3>span,<em>斜體</em> <i>斜體</i><strong>加粗</strong> <b>加粗</b><u>下劃線</u><del>刪除線</del> <s>刪除線</s><br><h3>圖片標簽</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>?
本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=hii0i0j&title=從0開始接觸html--第一天學習內容總結
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的从0开始接触html--第一天学习内容总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css3总结之居中
- 下一篇： 微信小程序APP（商超营销类）经验总结