從0開始接觸html--第一天學習內容總結

第一天

總結:

  1. h1-h6 p 段落 hr br
  2. 有序 ol li 無序 ul li 定義列表 dl dt dd
  3. 塊級元素：獨占一行，h1-h6 p hr div
  4. 行內元素：共占一行, em和i strong和b u del和s span
  5. 塊級分區元素：div header nav article footer
  6. 行內分區元素：span
  7. 特殊字符： 空格：&nbsp ? 小于號:<? &lt ? ?大于號:>? &gt
  8. 圖片 <img alt="圖片不能正常顯示的時候顯示此內容" src="路徑" width/height="100px / 50%" title="鼠標懸停時顯示的內容">
  9. 圖片地圖

細節:

文本標簽:

  1. h1-h6 內容標題標簽，內容獨占一行 屬性：align=left/right/center
  2. p 段落標簽 內容獨占一行
  3. hr 水平分割線
  4. br 換行

代碼實現:

<!-- 文檔聲明,告訴瀏覽器使用哪個版本的標準解析此頁面,
此寫法是最高版本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>

?

?

?

列表標簽:

  1. ul 無序列表?子標簽<li></li>
  2. ol 有序列表? 屬性:type=1/a/A/i/I? reverserd="reverserd"? start="10"?子標簽<li></li>
  3. dl?定義列表?子標簽:<dt></dt>? ?<dd></dd>
  4. 有序列表和無序列表之間可以相互嵌套

代碼實現:

<!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>

?

?

?

特殊字符:

  1. 空格:&nbsp;
  2. <? ? ?:&lt;
  3. >? ? ?:&gt;

代碼實現:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊字符</title>
</head>
<body>
我愛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;學習<br>
&lt;我愛學習&gt;
</body>
</html>

?

?

分區標簽:

  1. 分區標簽自身沒有顯示效果，可以充當容器的作用，用于包含多個功能相關元素，可以進行元素的整體控制。

  2. div：塊級分區元素，獨占一行

  3. span：行內分區元素，和其它行內元素共占一行

  4. 開發頁面時通常會分為三大區

    頭部

    體部

    腳部

  5. 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:

  • 路徑分為兩種：

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

  2. 絕對路徑： 訪問其它網站的資源使用絕對路徑，以http開頭，存在風險，如果目標圖片路徑發生改變則不能顯示

  • 常用屬性：

  1. alt: 當圖片不能正常顯示的時候顯示此內容

  2. title： 當鼠標在圖片上懸停的時候顯示此內容

  3. 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>

?

?

圖片地圖:

  • 常用屬性：
  1. shape： 形狀，常用rect矩形 和 circle圓形
  2. coords：坐標 矩形四個值(x1,y1,x2,y2) 圓形三個值(x,y,半徑)
  3. href: 值為路徑，可以寫相對路徑和絕對路徑，路徑可以指向頁面，也可以指向文件，如果瀏覽器支持打開此格式的文件則直接瀏覽（圖片，pdf等）如果不支持打開則下載此文件

代碼實現:

<!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--第一天學習內容總結

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/370907.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/370907.shtml
英文地址，請注明出處：http://en.pswp.cn/news/370907.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

連鎖便利店管理系統有什么用

連鎖便利店管理系統有什么用

連鎖便利店管理系統對于連鎖便利店的運營和管理非常有用。以下是一些常見的用途&#xff1a; 1. 庫存管理&#xff1a;連鎖便利店通常需要管理多個門店的庫存&#xff0c;管理系統可以幫助實時掌握各個門店的庫存情況&#xff0c;包括商品數量、進貨記錄、庫存調撥等。這樣可以…
閱讀更多...
經常使用meta標簽屬性

經常使用meta標簽屬性

《meta》 1.Keywords (keyword)說明&#xff1a;告訴搜索引擎你網頁的keyword是什么。 使用方法&#xff1a;<meta name"keywords" content"SEO優化,SEO優化教程,站點優化,搜索引擎優化教程"> 2. Description (網頁描寫敘述)說明&#xff1a;Descrip…
閱讀更多...
瀏覽器打印設置橫向打印_愛普生打印機無線連接設置

瀏覽器打印設置橫向打印_愛普生打印機無線連接設置

1、首先&#xff0c;把epsonl385打印機插上電源通電&#xff0c;待自檢完成后&#xff0c;便可以設置。如果用戶家里的無線路由器帶有WPS(Wi-Fi Protected Setup)或QSS(又稱快速安全設置)功能&#xff0c;那就簡單多了。2、通過WPS或QSS無線路由器按鈕連接&#xff0c;給無線路…
閱讀更多...
linux python定時任務調度,Python下定時任務框架APScheduler的使用

linux python定時任務調度,Python下定時任務框架APScheduler的使用

1.APScheduler簡介&#xff1a;APScheduler是Python的一個定時任務框架&#xff0c;可以很方便的滿足用戶定時執行或者周期執行任務的需求&#xff0c;它提供了基于日期date、固定時間間隔interval 、以及類似于Linux上的定時任務crontab類型的定時任務。并且該框架不僅可以添加…
閱讀更多...
圖片和文件上傳js剖析

圖片和文件上傳js剖析

/** * 商戶資質信息模塊js * * 涉及頁面組件 { * 上傳組件&#xff08;UploadFileComponent&#xff09; * } * * * 初始化工具&#xff08;init&#xff09; * * Author:Waver */var qualificationInfoModule (function() { // 上傳文件類型 var UPLOAD_FILE_TYPE…
閱讀更多...
研究僵局–第1部分

研究僵局–第1部分

我敢肯定我們都去過那里&#xff1a;太晚了&#xff0c;您餓了&#xff0c;服務器已掛起&#xff0c;或者應用程序正在以蝸牛的速度運行&#xff0c;并且有人喘著氣想要您解決問題&#xff0c;然后再去解決。 您的應用程序意外掛起的可能原因之一是稱為死鎖的線程問題。 無需贅…
閱讀更多...
前端的學習之旅

前端的學習之旅

Html學習筆記1 特殊符號&#xff1a;html中對換行縮進空格不敏感&#xff0c;都只會解析成一個空格 空格&#xff1a; < : < > :$gt; 版權符號&#xff1a;&copy&#xff1b; 表格&#xff1a;1 表示表格&#xff1a;table表示表格 tr&#xff1a;…
閱讀更多...
使用Vue.js和Axios從第三方API獲取數據 — SitePoint

使用Vue.js和Axios從第三方API獲取數據 — SitePoint

更多的往往不是&#xff0c;建立你的JavaScript應用程序時&#xff0c;你會想把數據從遠程源或消耗一個[ API ]&#xff08;https&#xff1a;/ /恩。維基百科。org /維基/ application_programming_interface&#xff09;。我最近看了一些[公開]&#xff08;https://github.co…
閱讀更多...
區位碼怎么知道點陣里的起始點_自身免疫疾病的GAPS起始飲食改良版

區位碼怎么知道點陣里的起始點_自身免疫疾病的GAPS起始飲食改良版

寫這篇文章的原因如果您已經關注我的博客一段時間&#xff0c;您知道我開始使用GAPS飲食&#xff0c;然后轉換到AIP飲食&#xff0c;因為我仍在努力治療炎癥和自身免疫的發作。 Katy Haldiman 有同樣的經歷&#xff0c;我們并不孤單。許多患有自身免疫性疾病的人在 GAPS 上掙扎…
閱讀更多...
Linux存儲保護,談談Linux中的存儲保護

Linux存儲保護,談談Linux中的存儲保護

談談Linux中的存儲保護以下討論的內容是以i386平臺為基礎的Linux將4G的地址劃分為用戶空間和內核空間兩部分。在Linux內核的低版本中(2。0。X)&#xff0c;通常0-3G為用戶空間&#xff0c;3G-4G為內核空間。這個分界點是可以可以改動的。正是這個分界點的存在&#xff0c;限制了…
閱讀更多...
004-JQuery屬性

004-JQuery屬性

添加與刪除屬性CSS類HTML代碼/文本/值添加與刪除屬性 attr(name|properties|key,value|fn) &#xff1a;設置或返回被選元素的屬性值 removeAttr(name) &#xff1a;從每一個匹配的元素中刪除name屬性 prop(name|properties|key,value|fn) &#xff1a;獲取在匹配的元素集中的第…
閱讀更多...
預熱您的JVM –超快速生產服務器和IDE

預熱您的JVM –超快速生產服務器和IDE

幾個月前&#xff0c;我正在閱讀Java中的復雜事件處理以及實現低延遲的方法。 在我長達一個小時的研究結束時&#xff0c;我發現即使您的應用程序編寫正確并且您的方法主要在0&#xff08;log n&#xff09;的時間內運行&#xff0c;并且您正在使用某些前沿的硬件解決方案&…
閱讀更多...
微信小程序APP（商超營銷類）經驗總結

微信小程序APP（商超營銷類）經驗總結

項目介紹 這是一款主打門店營銷的小程序。包括首頁、門店、營銷、個人設置、登錄、數據統計展示、營銷設置等。 本來要獨立完成整個項目&#xff0c;包括前后端一套的&#xff0c;有些意外因素&#xff0c;項目臨時收尾&#xff08;說明&#xff1a;只完成了前端的部分&#…
閱讀更多...
excel不顯示0_Excel數字過長不能完整顯示？超長數字變為0

excel不顯示0_Excel數字過長不能完整顯示？超長數字變為0

Excel中計算規則和限制設定數值精確度為15位&#xff01;超過15位后&#xff0c;數字會顯示為0excel數字超過15位&#xff0c;會顯示為0&#xff0c;超過10位&#xff0c;默認采用科學計數法顯示1、如何解決超長數字輸入&#xff0c;全部顯示問題&#xff1f;&#xff08;單元格…
閱讀更多...
Android天氣預報設計

Android天氣預報設計

——嵌入式軟件開發 名字功能模塊代碼行數備注謝燦輝Widget200桌面小程序李楊敏GPS定位&#xff0c;百度地圖API100-150獲取當前所在城市丁小芳城市選擇Activity&#xff0c;天氣API獲取天氣100-200包括數據庫交互本軟件是一個天氣類應用軟件&#xff0c;帶有widget&#xff0c…
閱讀更多...
linux vi后不保存退出,linux下退出VI的方法：不保存退出

linux vi后不保存退出,linux下退出VI的方法：不保存退出

當編輯完文件&#xff0c;準備退出Vi返回到shell時&#xff0c;可以使用以下幾種方法之一。在命令模式中&#xff0c;連按兩次大寫字母Z&#xff0c;若當前編輯的文件曾被修改過&#xff0c;則Vi保存該文件后退出&#xff0c;返回到shell&#xff1b;若當前編輯的文件沒被修改過…
閱讀更多...
算法筆記_164:算法提高 最小方差生成樹(Java)

算法筆記_164:算法提高 最小方差生成樹(Java)

目錄 1 問題描述 2 解決方案 1 問題描述 問題描述給定帶權無向圖&#xff0c;求出一顆方差最小的生成樹。輸入格式輸入多組測試數據。第一行為N,M&#xff0c;依次是點數和邊數。接下來M行&#xff0c;每行三個整數U,V,W&#xff0c;代表連接U,V的邊&#xff0c;和權值W。保證圖…
閱讀更多...
番石榴分配器vs StringUtils

番石榴分配器vs StringUtils

因此&#xff0c;我最近寫了一篇有關舊的&#xff0c;可靠的Apache Commons StringUtils的文章 &#xff0c;該文章引起了一些評論&#xff0c;其中之一是Google Guava提供了更好的連接和拆分字符串的機制。 我必須承認&#xff0c;這是我尚未探索的番石榴的一個角落。 因此&am…
閱讀更多...
layui數據表格（一：基礎篇，數據展示、分頁組件、表格內嵌表單和圖片）

layui數據表格（一：基礎篇，數據展示、分頁組件、表格內嵌表單和圖片）

表格展示神器之一&#xff1a;layui表格 前言&#xff1a;在寫后臺管理系統中使用最多的就是表格數據展示了&#xff0c;使用表格組件能提高大量的開發效率&#xff0c;目前主流的數據表格組件有bootstrap table、layui table、easyUI table等.... 博主個人比較傾向于layui&am…
閱讀更多...
算法設計與分析_算法設計與分析（第2版）第2章分治策略回顧

算法設計與分析_算法設計與分析（第2版）第2章分治策略回顧

YI時間&#xff5c;外刊&#xff5c;MM-DFW&#xff5c;機器學習系列點擊上方藍字&#xff0c;關注給你寫干貨的松子茶分治策略是通用算法設計技術之一&#xff0c;很多有效的算法是它的特殊實現,顧名思義就是分而治之。一個問題能夠用分治法求解的要素是問題能夠按照某種方式分…
閱讀更多...
最新文章

Copyright @ 2022~2023