日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 前端技术 > HTML >内容正文

HTML

html固定dl高度_HTML入门笔记1

發布時間:2023/12/20 HTML 34 豆豆
生活随笔 收集整理的這篇文章主要介紹了 html固定dl高度_HTML入门笔记1 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML概述:HTML 的全名是“超文本標記語言”(HyperText Markup Language),它是網頁使用的語言,定義了網頁的結構和內容。瀏覽器訪問網站,其實就是從服務器下載 HTML 代碼,然后渲染出網頁。

1.HTML之父

李爵士(Tim Berners-Lee)
  • 李爵士發明了WWW、HTML、HTTP和URL。
  • 李爵士是萬維網的開創者,他寫了世界上第一個網頁瀏覽器(WorldWideWeb)和第一個網頁服務器(httpd),同時也創建了世界上第一個網站“http://info.cern.ch/”,該網站于1991年8月6日運行,它解釋了萬維網是什么,并教會我們該如何使用網頁瀏覽器和如何建立一個網頁服務器。

2.HTML起手式

快捷鍵:感嘆號 ! + Tab鍵<!DOCTYPE html> //文檔類型為HTML <html lang="zh-CN"> //網頁語言為簡體中文<head><meta charset="UTF-8" /> //字符編碼為UTF-8<meta name="viewport" content="width=device-width, initial-scale=1.0" />//禁止縮放,兼容手機<title>我的網頁</title> //網頁標題</head><body>Hello World! //網頁內容</body> </html>

3.章節標簽

表示文章/書的層級
  • 標題 h1~h6:h1~h6標題級數依次遞減,h1級別為最高
  • 章節 section:<section>章節元素表示一個包含在HTML文檔中的獨立部分,一般來說會有包含一個標題。與<article>比較而言,<section>更適用于組織頁面使其按功能(比如迷你地圖、一組文章標題和摘要)分塊。一般的最佳用法是:以標題作為開頭;也可以把一篇<article>分成若干部分并分別置于不同的<section>中,也可以把一個區段<section>分成若干部分并分別置于不同的<article>中,取決于上下文。
  • 段落 p:<p>元素表示文本的一個段落,也被稱為HTML段落元素,該元素通常表現為一整塊與相鄰文本分離的文本,或以垂直的空白隔離或以首行縮進。此外,<p> 是塊級元素(塊級元素中可以包含塊級元素和行內元素,總是從新的一行開始,高度、寬度都是可控的,寬度在沒有設置時,默認為100%)。
  • article 文章:<article>文章元素表示文檔、頁面、應用或網站中的獨立結構,其意在成為可獨立分配的或可復用的結構,如在發布中,它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評論、交互式組件,或者其他獨立的內容項目。??
  • header 頭部:<header>頭部元素用于展示介紹性內容,通常包含一組介紹性的或是輔助導航的實用元素。它可能包含一些標題元素,但也可能包含其他元素,比如 Logo、搜索框、作者名稱等等。
  • footer 腳部 :定義了頁腳,通常包含版權或法律聲明,有時還包含一些鏈接。在部分的情況下,頁腳可能包含切片內容的發布日期,許可證信息等<article>,<section>,<aside>,和<nav>可以有自己的<footer>。盡管有其名稱,但頁腳不一定位于頁面或節的末尾。(&copy;版權聲明符號)
  • main 主要內容:存放每個頁面獨有的內容。每個頁面上只能用一次<main>,且直接位于<body>中。最好不要把它嵌套進其它元素。
  • aside 旁支內容:包含一些間接信息(術語條目、作者簡介、相關鏈接,等等)。
  • div 劃分:<div>元素(或HTML 文檔分區元素) 是一個通用型的流內容容器,在不使用CSS的情況下,其對內容或布局沒有任何影響。

代碼示例

<body><header>頂部內容</header><div><main><h1>HTML入門學習</h1><section><h2>第一章</h2><p>應該如何學習HTML,首先要了解章節標簽和內容標簽,然后要熟記并反復練習。</p><section><h3>第一節</h3><p>HTML中的章節標簽有“標題h1~h6,章節section,段落p,文章article,頭部header,腳部footer,主要內容main,旁支內容aside以及劃分div"。</p></section></section></main><aside>補充知識點:李爵士被稱為互聯網之父</aside></div><footer>&copy;版權聲明</footer></body>

效果對照

4.全局屬性

所有標簽都有的屬性
  • class :以空格分隔的元素的類名列表

class“=”效果展示

class多屬性匹配
  • contenteditable:可以讓所有元素可編輯。<div class="middle bordered" contenteditable>

用戶可通過自己在頁面編輯改變文檔風格
  • hidden:隱藏,比display:block優先級高

  • id: 全局唯一屬性,謹慎使用,不會報錯

  • style:html 的屬性,不是 css 的樣式,也可以通過 js 設置,js 會覆蓋 html 的 style(js 優先級最高,js>html>css)。

  • tabindex:控制Tab鍵訪問的順序。(0 是最后訪問,-1 是不允許訪問,優先級1>2>.....)
<div class = "middle bordered" tabindex=1>
  • title: 包含了表示咨詢信息文本,和它屬于的元素相關。這個信息通常存在,但絕不必要,作為提示信息展示給用戶。可用于溢出省略。

鼠標移動到頂部內容時會出現title中的內容

5.常用的內容標簽

清除樣式(寫在開頭的head之間)

<style>*{margin: 0;padding:0;box-sizing:border-box;}*::after, *::before{box-sizing:border-box;}h1,h2,h3,h4,h5,h6{font-weight:normal;}a{color:inherit;text-decoration:none;}ul,ol{list-style:none;}table{border-collapse:collapse; border-spacing:0; }</style>
  • ol+li: 有序列表,ol不能含有除li外的任何子元素

  • ul+li: 無序列表
  • dl+dt+dd: dl是描述的列表,dt是描述的對象,dd是描述的內容。

  • pre:顯示文本中的空白符

  • code: 包裹的字體等寬,可以與pre搭配寫代碼

  • hr: 分割線

  • br: 換行

  • a: 超鏈接 target="_blank" 用于打開新窗口(常用于國內)

  • em: 強調,默認樣式為斜體(語氣)

  • strong: 重要,默認樣式為加粗(本身內容)

  • quote: 內聯引用

  • blockquote: 塊級引用

總結

以上是生活随笔為你收集整理的html固定dl高度_HTML入门笔记1的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。