整合營銷服務商

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

          免費咨詢熱線:

          HTML元素介紹(一)

          TML元素介紹(一)

          個人學習總結輸出,持續更新。Day day study!Day day up!

          這里的元素大多數是普通元素。此處的普通指的是:幾乎沒有自己特殊的屬性,只指定通用屬性和各種事件屬性。

          基本元素

          • <!--...-->:定義HTML注釋。
          • <html>:HTML5文檔的根元素,允許省略,但不建議省略。
          • <head>:HTML5文檔的頁面頭部分,允許省略,但不建議省略。
          • <title>:HTML5文檔頁面標題。
          • <body>:頁面主體部分。
          • <title>:定義標題1-標題6。
          • <p>:定義段落。
          • <br>:插入一個換行。
          • <hr>:水平線,主題結束語義。
          • <div>:文檔中的節。
          • <span>:與div類似,表示一般性文本,為內聯元素。
          <!DOCTYPE html>
          <html>
           <head>
           <meta charset="utf-8">
           <title></title>
           </head>
           <body>
           <h1>標題1</h1>
           <h2>標題2</h2>
           <h3>標題3</h3>
           <h4>標題4</h4>
           <h5>標題5</h5>
           <h6>標題6</h6>
           <p>
           <span>
           其后無br
           </span>
           <span>
           其后有br
           </span>
           <br>
           <span>
           其后有hr
           </span>
           <hr>
           <span>
           其后有div
           </span>
           <div id="">
           一般p內不包含div,div內可包含一切,所以以往大量使用,造成了語義化不明確。
           </div>
           </p>
           </body>
          </html>
          

          文本格式相關元素

          • <b>:粗體文本
          • <i>:斜體文本
          • <em>:表示強調,樣式也是斜體
          • <strong>:粗體文本,與<b>用法類似。
          • <small>:小號字體文本。
          • <sup>:上標文本
          • <sub>:下標文本
          • <bdo>:文本顯示方向
          ?
           <p>
           <b>b加粗</b><strong>strong加粗</strong>正常
           <small>縮小</small>2<sup>2</sup>a<sub>2</sub>
           <hr >
           <bdo dir="ltr">左向右</bdo>
           <hr >
           <bdo dir="rtl">左向右</bdo>
           </p>
          

          舊的語義相關元素

          • <abbr>:表示縮寫,
          • title:屬性代表全稱。
          • <address>:表示地址
          • <blockquote>:表示長文本引用。
          • cite:屬性指定出處
          • <q>:表示短文本引用。
          • <cite>:作品標題。
          • <code>:代碼文本。
          • <dfn>:用于定義專業術語。
          • <del>:待刪除線文本。
          • cite:屬性指定原因、
          • datetime:屬性標注修改時間
          • <ins>:表示插入的文本。
          • cite:屬性指定原因、
          • datetime:屬性標注修改時間
          • <pre>:預格式化。內部可直接使用本來需要轉移的文本。
          • <samp>:示范文本。
          • <kbd>:用于定義鍵盤文本。
          • <var>:表示變量。
          ?
           <p>
           <abbr title="中華人民共和國">中國</abbr>
           <address>西安市雁塔區幸福小區3單元403室</address>
           <cite>作品標題</cite>
           <blockquote cite="www.baidu.com">表示長文本引用。通常帶有`cite`屬性指定出處(可以使url)</blockquote>
           <q>表示短文本引用。</q>
           <code>
           let tempDom=document.querrySelect('#id');
           dom.hidden=true;
           </code>
           <dfn>牛頓第三定理:</dfn>
           <br>
           <del>待刪除線文本。通常帶有`cite`屬性指定原因、通常帶有`datetime`屬性標注修改時間</del>
           <br>
           <ins>表示插入的文本。常帶有`cite`屬性指定原因、通常帶有`datetime`屬性標注修改時間</ins>
           <pre>/\'''"""</pre>
           <samp>示范文本。</samp>
           <kbd>ctrl</kbd>
           <var>i</var>
           </p>
          ?
          

          H5新增語義元素

          • <mark>:標記重點。
          • <time>:標注時間。
          • datetime:提供格式化的時間,內容本身格式標準,可以不使用此屬性。
          • pubdate:boolean 是否是發布日期
          • <details>與<summary>:摘要與詳情,如果摘要放在詳情里,摘要可見,點擊摘要顯示詳情。
          • <ruby>、<rtc>、<rb>、<rt>和<rp>元素:用于為東亞文字定義解釋。
          • <bdi>:將一段文本隔離出來設置屬性。
          • <wbr>:建議換行。(可使得瀏覽器在單詞中間換行)
          • <menu>和<menuitem>:用來定義菜單和菜單項。暫無瀏覽器支持。支持如下屬性:
          • type:三個值,radio、checkbox、command(默認值)
          • label:指定菜單項文本
          • icon:指定菜單項圖標。
          • disabled:指定菜單項是否不可用。
          • checked:type為checkbox或radio時候有意義
          • radiogroup:type為radio時候有意義,指定菜單項所屬分組。
          • default:指定默認菜單項。
          這是一個<mark>重點</mark>
           <time pubdate="true" datetime="2019-10-14 22:05">2019-10-14 22:05</time>
           <details>
           <summary>摘要</summary>
           這是詳情、、、、
           </details>
           <ruby>
           <rb>饕</rb>
           <rp>(</rp>
           <rt>tao</rt>
           <rp>)</rp>
           <rb>餮</rb>
           <rp>(</rp>
           <rt>tie</rt>
           <rp>)</rp>
           </ruby>
          

          H5新增結構元素

          沒啥好說的,見名知其意,解決以前全用div語義化缺失的問題。

          • <article>:一塊獨立內容;
          • <section>:幾塊分開內容;
          • <header>、<footer>、<header>、<nav>、<aside>
          • <figure>和<figcaption>:定義圖片區域,<figcaption>是標題

          看到這里了,關注吧,由淺入深,持續更新一起學習進步。如果有什么建議和補充,請積極評論。

          素類型

          根據css顯示分類,XHTML元素被分為 ?

          三種類型:

          塊狀元素,內聯元素,可變元素 ?


          && ?


          三種類型: 塊狀元素,內聯元素,內聯塊元素(css2.1增加)

          塊狀元素的特點

          A:塊狀元素在網頁中就是以塊的形式顯示,所謂塊狀就是元素顯示為矩形區域,

          B:默認情況下,塊狀元素都會占據一行,通俗地說,兩個相鄰塊狀元素不會出現并列顯示的現象;默認情況下,塊狀元素會按順序自上而下排列。

          C:塊狀元素都可以定義自己的寬度和高度。

          D:塊狀元素一般都作為其他元素的容器,它可以容納其它內聯元素和其它塊狀元素。我們可以把這種容器比喻為一個子。

          內聯元素的特點

          A:內聯元素的表現形式是始終以行內逐個進行顯示;

          B:內聯元素沒有自己的形狀,不能定義它的寬和高,它顯示的寬度、高度只能根據所包含內容的高度和寬度來確定,它的最小內容單元也會呈現矩形形狀;

          C:內聯元素也會遵循盒模型基本規則,如可以定義padding,border,margin,background等屬性,但個別屬性不能正確顯示;(padding-top:;margin-top/bottom:;)

          可變元素

          需要根據上下文關系確定該元素是塊元素或者內聯元素。

          常見的標簽

          div -最常用的塊級元素
          dl - 和dt-dd 搭配使用的塊級元素
          form - 交互表單
          h1 -h6- 大標題
          hr - 水平分隔線
          ol – 有序列表
          p - 段落
          ul - 無序列表
          li
          fieldset - 表單字段集
          colgroup-col - 表單列分組元素
          table-tr-td  表格及行-單元格

          內聯

          a –超鏈接(錨點)                               
          b - 粗體(不推薦) 
          br - 換行                             
          i - 斜體
          em - 強調                             
          img - 圖片                         
          input - 輸入框               
          label - 表單標簽                  
          span - 常用內聯容器,定義文本內區塊
          strong - 粗體強調
          sub - 下標   
          sup - 上標
          textarea - 多行文本輸入框
          u - 下劃線
          select - 項目選擇  

          元素類型的轉換

          display屬性

          盒子模型可通過display屬性來改變默認的顯示類型

          A、大部分塊元素display屬性值默認為block,其中列表li的默認值為list-item。

          B、大部分內聯元素的display屬性值默認為inline,其中img,input,默認為inline-block(行內塊元素)。


          inline-block ( 行內塊元素 )

          設置一個元素在一個容器中垂直居中,必須更改默認的display屬性值為inline-block;并加上同級元素(標尺)

          (同級元素[標尺]樣式設置為vertical-align:middle;width:0;height:100%;display:inline-block;)

          三個條件:

          1. 必須給容器(父元素)加上text-align:center;
          2. 必須給當前元素轉成行內塊元素(display:inline-block;)再給當前元素加上vertical-align:middle;
          3. 在當前元素的后面(沒有回車)加上同級元素span;并對span進行vertical-align:middle;width:0;height:100%;display:inline-block

          元素類型案例

          置換元素

          一、引題

          在之前的淺談HTML中的塊級元素和內聯元素中了解到了內聯元素一般是不能設置寬高的,但是也有特殊。比如img是內聯元素,但可以設置寬高,這肯定讓不少人迷惑。這樣我們就要引入HTML中置換元素的概念(非置換元素在w3c中沒有給出明確的解釋,姑且我們就把除置換元素外的元素當作非置換元素吧)。

          二、置換元素與非置換元素

          a) 置換元素:瀏覽器根據元素的標簽和屬性,來決定元素的具體顯示內容。 例如:瀏覽器會根據<img>標簽的src屬性的值來讀取圖片信息并顯示出來,而如果查看(x)html代碼,則看不到圖片的實際內容;<input>標簽的type屬性來決定是顯示輸入框,還是單選按鈕等。 (x)html中的<img>、<input>、<textarea>、<select>都是置換元素。這些元素往往沒有實際的內容,即是一個空元素。


          ? 置換元素在其顯示中生成了框,這也就是有的內聯元素(img,input)能夠設置寬高的原因。


          ? b) 不可替換元素(非置換元素):(x)html 的大多數元素是不可替換元素,即其內容直接表現給用戶端(如瀏覽器)。



          本文轉自知乎號:千鋒HTML5學院

          號持續更新前端面試題和答案......

          以下是一些HTML基礎面試題:

          1. 請解釋一下HTML是什么以及它的作用。
          2. 什么是HTML標簽(Tag)?舉例說明幾個常見的HTML標簽及其作用。
          3. HTML中的塊級元素(Block-level elements)和內聯元素(Inline elements)有什么區別?請舉例說明。
          4. 請解釋一下HTML5和HTML之間的區別。
          5. HTML中的元數據(Metadata)是什么?請舉例說明幾個常見的HTML元數據標簽。
          6. HTML中的超鏈接(Hyperlink)是什么?請解釋一下如何創建超鏈接。
          7. HTML中的表單(Form)是什么?請解釋一下如何創建一個基本的表單。
          8. HTML中的圖像(Image)是如何插入的?請解釋一下如何在HTML中插入圖像。
          9. 請解釋一下HTML中的無序列表(Unordered List)和有序列表(Ordered List)的區別,并舉例說明。
          10. HTML中的特殊字符(Special Characters)是什么?請舉例說明如何使用特殊字符。
          11. HTML中的表格(Table)是什么?請解釋一下如何創建一個簡單的HTML表格。
          12. HTML中的注釋(Comment)是什么?請解釋一下如何在HTML中添加注釋。
          13. HTML中的DOCTYPE是什么?請解釋一下DOCTYPE的作用和用法。
          14. HTML中的元素(Element)和標簽(Tag)有什么區別?請解釋一下它們之間的關系。
          15. HTML中的語義化(Semantic HTML)是什么?請解釋一下語義化的重要性和如何實現語義化。
          1. HTML5中的新特性有哪些?請舉例說明其中幾個新特性及其作用。
          2. HTML中的元素可以有哪些全局屬性(Global Attributes)?請解釋一下其中幾個全局屬性的作用。
          3. HTML中的表單元素有哪些常見的類型(Type)?請解釋一下其中幾個類型的作用。
          4. HTML中的音頻(Audio)和視頻(Video)是如何嵌入的?請解釋一下如何在HTML中嵌入音頻和視頻。
          5. HTML中的元素可以有哪些事件屬性(Event Attributes)?請解釋一下其中幾個事件屬性的作用。
          6. HTML中的語義化標簽(Semantic Tags)有哪些?請解釋一下其中幾個語義化標簽的作用。
          7. HTML中的響應式設計(Responsive Design)是什么?請解釋一下如何使用HTML實現響應式設計。
          8. HTML中的地理定位(Geolocation)是什么?請解釋一下如何使用HTML獲取用戶的地理位置信息。
          9. HTML中的離線存儲(Offline Storage)是什么?請解釋一下如何使用HTML實現離線存儲。
          10. HTML中的元素可以有哪些媒體屬性(Media Attributes)?請解釋一下其中幾個媒體屬性的作用。
          11. HTML中的元素可以有哪些表單屬性(Form Attributes)?請解釋一下其中幾個表單屬性的作用。
          12. HTML中的可訪問性(Accessibility)是什么?請解釋一下如何使用HTML實現可訪問性。
          13. HTML中的SVG是什么?請解釋一下SVG在HTML中的使用方法和優勢。
          14. HTML中的IFrame是什么?請解釋一下IFrame的作用和用法。
          15. HTML中的字符編碼(Character Encoding)是什么?請解釋一下字符編碼的作用和常見的字符編碼方式。

          主站蜘蛛池模板: 国产精品乱码一区二区三| 韩国一区二区三区视频| 日产一区日产2区| 日韩AV在线不卡一区二区三区| 国产精品无码一区二区在线| 亚洲日韩AV无码一区二区三区人 | 变态调教一区二区三区| 福利片免费一区二区三区| 一区二区三区视频在线播放| 一区二区三区免费高清视频| 亚洲一区综合在线播放| 麻豆AV无码精品一区二区| 国产主播一区二区三区| 亚洲色精品aⅴ一区区三区| 久久综合九九亚洲一区| 成人免费视频一区| 国产亚洲一区二区三区在线不卡| 久久久无码一区二区三区| 免费高清在线影片一区| 亚洲日本精品一区二区| 亚洲A∨精品一区二区三区| 精品视频一区二区三区四区| 精品一区二区三区在线观看l | av无码一区二区三区| 亚洲一区二区三区AV无码| 亚洲A∨精品一区二区三区| 久久久99精品一区二区| 国产在线精品观看一区| 日本高清天码一区在线播放| 无码人妻视频一区二区三区| 亚洲bt加勒比一区二区| 国产无人区一区二区三区| 三级韩国一区久久二区综合| 无码精品一区二区三区在线| 精品人妻一区二区三区浪潮在线| 亚洲av福利无码无一区二区| 国产拳头交一区二区| 国产人妖视频一区二区| 中文字幕精品亚洲无线码一区| 日本精品一区二区三区视频| 91视频一区二区三区|