整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Web前端入門:html元素解析

          個網頁對應于一個html文件,HTML文件以.htm或.html為擴展名??梢允褂萌魏文軌蛏蒚XT類型源文件的文本編輯來產生HTML文件。標準的HTML文件都具有一個基本的整體結構,即HTML文件的開頭與結尾標志和HTML的頭部與實體2大部分。有3個雙標記符用于頁面整體結構的確認。

          1、HTML元素
          a、從開始標簽到結束標簽的所有代碼
          b、開始(開放)標簽<p>、結束(閉合)標簽</p>、標簽內的東西:元素內容
          c、<br/>空元素,換行的意思
          d、用p標簽行之間間隔較大,用br標簽行之間間隔較小
          e、HTML元素語法:
          (1)元素內容是開始標簽與結束標簽之間的內容
          (2)空元素在開始標簽中進行關閉
          (3)大多數HTML元素可擁有屬性
          f、嵌套的HTML元素:大多數的HTML元素都是可以嵌套使用的

          2、HTML屬性
          a、標簽可以擁有屬性為元素提供更多信息
          b、屬性以鍵值對的形式出現:例如a標簽里面 href="www.baidu.com"
          c、常用標簽類型:
          (1)<h1 align = " ">對齊方式,例如center中間
          (2)<body bgcolor=" ">背景顏色
          (3)<a target = " ">規定在何處打開鏈接,_self本地默認打開
          屬性:
          (1)默認,覆蓋原標簽頁
          (2)_blank,打開為新標簽頁
          (4)<body backgroud=" ">設置背景圖片
          d、通用屬性:
          (1)class:規定元素的類名
          (2)id:規定元素的唯一ID
          (3)style:規定元素的樣式,一般引用css
          (4)title:規定元素的額外信息

          3、HTML格式化
          a、定義粗體文本
          b、<big>定義大號字,HTML5會被css代替
          c、<em>定義著重問題
          d、定義斜體字
          e、<small>定義小號字
          f、<strong>定義加重語氣
          g、<sub>定義下標字
          h、<sup>定義上標字
          i、<ins>定義插入字,有下劃線
          j、<del>定義刪除字,有刪除線

          每種HTML標記符在使用中可帶有不同的屬性項,用于描述該標記符說明的內容顯示不同的效果。正文標記符中提供以下屬性來改變文本的顏色及頁面背景。

          挑戰30天在頭條寫日記#

          HTML是一種用于創建網頁結構和內容的標記語言,其中包含了許多標簽,可以用于排版、布局和展示內容。本文將詳細介紹HTML中的<tr>和<td>標簽的使用方法,并通過示例展示如何創建表格。


          1. <tr>標簽的作用: <tr>標簽代表HTML表格中的一行(行數據),它可以包含一個或多個<td>元素作為單元格。


          2. <td>標簽的作用: <td>標簽用于定義表格中的一個單元格(列數據),可以包含文本、圖像、鏈接等內容。

          3. 如何使用<tr>和<td>: 在使用<tr>和<td>標簽時,首先需要創建一個<table>元素作為表格的容器,然后在其中嵌套<tr>和<td>標簽,如下所示:

          htmlCopy code<table>
            <tr>
              <td>單元格1</td>
              <td>單元格2</td>
            </tr>
            <tr>
              <td>單元格3</td>
              <td>單元格4</td>
            </tr>
          </table>
          

          4. 表格樣式: 可以使用CSS來為表格添加樣式,如設置邊框、背景顏色等。以下是一個簡單的示例:

          htmlCopy code<style>
            table {
              border-collapse: collapse;
              width: 100%;
            }
            td {
              border: 1px solid black;
              padding: 8px;
              text-align: center;
            }
          </style>
          


          5. 示例應用: 以下示例演示了如何使用<tr>和<td>標簽創建一個包含姓名、年齡和城市的簡單表格:

          htmlCopy code<!DOCTYPE html>
          <html>
          <head>
            <style>
              table {
                border-collapse: collapse;
                width: 100%;
              }
              td {
                border: 1px solid black;
                padding: 8px;
                text-align: center;
              }
            </style>
          </head>
          <body>
          
          <table>
            <tr>
              <td>姓名</td>
              <td>年齡</td>
              <td>城市</td>
            </tr>
            <tr>
              <td>張三</td>
              <td>25</td>
              <td>北京</td>
            </tr>
            <tr>
              <td>李四</td>
              <td>30</td>
              <td>上海</td>
            </tr>
            <tr>
              <td>王五</td>
              <td>28</td>
              <td>廣州</td>
            </tr>
          </table>
          
          </body>
          </html>
          

          6. 書籍參考:

          • "HTML and CSS: Design and Build Websites" by Jon Duckett
          • "Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins


          7. 總結: 通過本文的介紹,我們了解了HTML中<tr>和<td>標簽的基本用法,以及如何創建簡單的表格和添加樣式。使用這些標簽,我們可以輕松地創建具有結構和內容的網頁表格,提升頁面的可讀性和可視性。

          眾號【傳智播客博學谷】回復關鍵詞:前端 PS Java(100G) Python(80G) 大數據 區塊鏈 測試 PPT JS(40g+300教程) HTML 簡歷 領取相關學習資料!

          一、HTML

          1、<image>標簽上title屬性與alt屬性的區別是什么?

          alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。

          這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶,視覺障礙的用戶和使用屏幕閱讀器的用戶等。

          title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》

          2、分別寫出以下幾個HTML標簽:文字加粗、下標、居中、字體

          加粗:<b>、<strong>

          下標:<sub>

          居中:<center>

          字體:<font>、<basefont>、參考《HTML標簽列表》

          3、請寫出至少5個html5新增的標簽,并說明其語義和應用場景

          section:定義文檔中的一個章節

          nav:定義只包含導航鏈接的章節

          header:定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。

          footer:定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。

          aside:定義和頁面內容關聯度較低的內容——如果被刪除,剩下的內容仍然很合理。

          參考《HTML5 標簽列表》

          4、請說說你對標簽語義化的理解?

          a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

          b. 有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標簽來確定上下文和各個關鍵字的權重;

          c. 方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)以意義的方式來渲染網頁;

          d. 便于團隊開發和維護,語義化更具可讀性,遵循W3C標準的團隊都遵循這個標準,可以減少差異化。

          5、Doctype作用? 嚴格模式與混雜模式如何區分?它們有何意義?

          聲明位于文檔中的最前面,處于 標簽之前。告知瀏覽器以何種模式來渲染文檔。

          嚴格模式的排版和 JS 運作模式是,以該瀏覽器支持的最高標準運行。

          在混雜模式中,頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

          DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

          6、你知道多少種Doctype文檔類型?

          標簽可聲明三種 DTD 類型,分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

          HTML 4.01 規定了三種文檔類型:Strict、Transitional 以及 Frameset。

          XHTML 1.0 規定了三種 XML 文檔類型:Strict、Transitional 以及 Frameset。

          Standards (標準)模式(也就是嚴格呈現模式)用于呈現遵循最新標準的網頁,

          Quirks(包容)模式(也就是松散呈現模式或者兼容模式)用于呈現為傳統瀏覽器而設計的網頁。

          7、HTML與XHTML——二者有什么區別

          a. XHTML 元素必須被正確地嵌套。

          b. XHTML 元素必須被關閉。

          c. 標簽名必須用小寫字母。

          d. XHTML 文檔必須擁有根元素。

          參考《XHTML 與 HTML 之間的差異》

          8、html5有哪些新特性、移除了那些元素?

          a. HTML5 現在已經不是 SGML 的子集,主要是關于圖像,位置,存儲,多任務等功能的增加。

          b. 拖拽釋放(Drag and drop) API

          c. 語義化更好的內容標簽(header,nav,footer,aside,article,section)

          d. 音頻、視頻API(audio,video)

          e. 畫布(Canvas) API

          f. 地理(Geolocation) API

          g. 本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉后數據不丟失

          h. sessionStorage 的數據在頁面會話結束時會被清除

          i. 表單控件,calendar、date、time、email、url、search

          j. 新的技術webworker, websocket等

          移除的元素:

          a. 純表現的元素:basefont,big,center, s,strike,tt,u;

          b. 對可用性產生負面影響的元素:frame,frameset,noframes;

          9、iframe的優缺點?

          優點:

          a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

          b. iframe無刷新文件上傳

          c. iframe跨域通信

          缺點:

          a. iframe會阻塞主頁面的Onload事件

          b. 無法被一些搜索引擎索引到

          c. 頁面會增加服務器的http請求

          d. 會產生很多頁面,不容易管理。

          參考《iframe的一些記錄》

          10、Quirks模式是什么?它和Standards模式有什么區別?

          在寫程序時我們也會經常遇到這樣的問題,如何保證原來的接口不變,又提供更強大的功能,尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD,所以IE6就假定 如果寫了DTD,就意味著這個頁面將采用對CSS支持更好的布局,而如果沒有,則采用兼容之前的布局方式。這就是Quirks模式(怪癖模式,詭異模式,怪異模式)。

          區別:總體會有布局、樣式解析和腳本執行三個方面的區別。

          a. 盒模型:在W3C標準中,如果設置一個元素的寬度和高度,指的是元素內容的寬度和高度,而在Quirks 模式下,IE的寬度和高度還包含了padding和border。

          b. 設置行內元素的高寬:在Standards模式下,給等行內元素設置wdith和height都不會生效,而在quirks模式下,則會生效。

          c. 設置百分比的高度:在standards模式下,一個元素的高度是由其包含的內容來決定的,如果父元素沒有設置百分比的高度,子元素設置一個百分比的高度是無效的用

          d. 設置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下卻會失效。

          11、請闡述table的缺點

          a. 太深的嵌套,比如table>tr>td>h3,會導致搜索引擎讀取困難,而且,最直接的損失就是大大增加了冗余代碼量。

          b. 靈活性差,比如要將tr設置border等屬性,是不行的,得通過td

          c. 代碼臃腫,當在table中套用table的時候,閱讀代碼會顯得異?;靵y

          d. 混亂的colspan與rowspan,用來布局時,頻繁使用他們會造成整個文檔順序混亂。

          e. 不夠語義

          參考《為什么說table表格布局不好?》

          12、簡述一下src與href的區別

          src用于替換當前元素;href用于在當前文檔和引用資源之間確立聯系。

          src是source的縮寫,指向外部資源的位置,指向的內容將會嵌入到文檔中當前標簽所在位置

          href是Hypertext Reference的縮寫,指向網絡資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接

          公眾號【傳智播客博學谷】回復關鍵詞:前端 PS Java Python 大數據 區塊鏈 測試 PPT JS HTML 簡歷 領取相關學習資料!


          主站蜘蛛池模板: 久久一区二区免费播放| 国产福利一区二区在线视频 | 无码少妇一区二区| 精品人妻无码一区二区三区蜜桃一| 亚洲福利视频一区二区| 麻豆精品人妻一区二区三区蜜桃| 精品无码日韩一区二区三区不卡| 国产AV国片精品一区二区| 日韩美女在线观看一区| 毛片无码一区二区三区a片视频 | 亚洲国产AV无码一区二区三区| 无人码一区二区三区视频| 国产乱码精品一区三上| 国产在线精品一区二区| 精品国产乱子伦一区二区三区| 日韩一区二区三区无码影院| 精品伦精品一区二区三区视频| 四虎精品亚洲一区二区三区| 国产韩国精品一区二区三区久久| 亚洲一区二区三区四区在线观看| 国产成人精品无码一区二区| 国产激情з∠视频一区二区| 内射女校花一区二区三区| 综合人妻久久一区二区精品| 亚洲一区二区三区国产精品| 精品成人av一区二区三区| 日本一区二区三区高清| 美女啪啪一区二区三区| 秋霞无码一区二区| 亚洲熟女综合色一区二区三区| 亚无码乱人伦一区二区| 波多野结衣一区二区三区高清在线 | 3D动漫精品啪啪一区二区下载| 2021国产精品视频一区| 韩国精品福利一区二区三区| 国产一区二区在线观看麻豆| 亚洲美女高清一区二区三区 | 国产一区在线观看免费| 成人区人妻精品一区二区不卡视频 | 国产91大片精品一区在线观看 | 无码人妻一区二区三区免费视频|