Web前端 Html部分筆記(三)

2021-08-30 08:57:09 字數 1263 閱讀 3431

給一堆內容新增無序列表語義(乙個沒有先後順序整體),列表中的條目是不分先後

導航條

商品列表

新聞列表

這裡指的無序是指對於主體來說內容沒有先後之分

瀏覽器會給無需列表自動新增先導符號但是一定一定千萬千萬要記住,ul的作用並不是給文字新增小圓點,而是增加無序列表的語義

其實ul還有乙個type屬性,可以修改先導符號的樣式,取值有disc、square、circle幾種,但以後樣式都是通過css來完成,所以了解一下就行

ul是乙個組標籤,一定是一坨一坨的出現,也就是說li標籤不能單獨存在,必須包裹在ul裡面

由於ul和li是乙個整體, 所以ul裡面不推薦包裹其它標籤,永遠記住ul裡面最好只寫li標籤

雖然ul中推薦只能寫li標籤, 但是li標籤是乙個容器標籤, li標籤中可以新增任意標籤, 甚至可以新增ul標籤

新聞導航

商品列表

頂部導航

底部導航

給一堆內容新增有序列表語義(乙個有順序整體),列表中的條目有先後之分。

期中考試排名

張三李四

王五隔壁老王

其實ol應用場景並不多,因為能用ol做的用ul都能做

ol和ul就是語義不一樣,怎麼使用都是一樣的以及注意點都一樣

其實ul還有兩個常見屬性start、type屬性, 可以修改先導符號的樣式和序號

但是由於樣式將來都是通過css來完成,所以了解一下就行

給一堆內容新增列表語義, 通過dt羅列出列表的條目,然後再通過dd給每個條目進行相應的描述

dt英文definition title, 翻譯為定義標題

dd英文definition description, 翻譯為定義描述資訊

但凡看到一堆內容都是用於描述某乙個內容的時候就要想到dl

由於dl和dt、dd是乙個整體, 所以dl裡面不推薦包裹其它標籤

dd和dt和li標籤一樣是容器標籤,裡面可以新增任意標籤

定義列表非常靈活,可以給乙個dt配置多個dd,但是最好不要出現多個dt對應乙個dd,dd的語義是描述離它最近的乙個dt,所以其它dt相當於沒有描述,而定義列表存在的意義就是既可以列出每乙個條目又可以對每乙個條目進行描述

定義列表非常靈活,可以將多個dt+dd組合拆分為多個dl

dt內不能使用h1-h6標籤,也就是說,dt不能放標題標籤如h1、h2、h3、h4等

天貓京東

公司簡介

Web前端 Html部分筆記(二)

作用 用於給文字新增標題語義 格式說明 作用讓內容換行 格式aaaaa bbbbb 說明br的意思是不另起乙個段落進行換行,如果需要另起了乙個段落,則應該使用p標籤來做。作用告訴瀏覽器哪些文字是乙個段落 格式 xx 說明 在瀏覽器中會單獨佔一行且自動換行。p標籤與br標籤的區別 1 相同之處 br和...

前端學習 學習筆記(HTML部分)

1.html是什麼?2.html的用途?使用標籤來描述網頁 3.html例項 doctype html html head meta charset utf 8 title html簡介 title head body h1 我的第乙個標題 h1 p 我的第乙個段落。p body html 例項解析...

Web前端學習筆記 HTML常用標籤

文字標題標籤 h1 h6 特點 有預設樣式 文字會加粗 字型大小不一樣 h2 h6 板塊的標題 一段敘述性文字的標題。注 h1 h6 不能互相巢狀 文字的加粗 文字的傾斜 加粗 語義化 表示強調 傾斜 下劃線 水平線 換行符 下劃線 水平線 換行符 段落標記 一般用來放一段敘述性文字。注 p標籤不能...