HTML常見標簽及其屬性一

HTML 為由一對尖括號(<>)所括起來的內容以特定含義. 這樣的標識稱為一個 標簽開始標簽可能包含一些信息,這些信息叫做元素的屬性,包括兩部分:

  1. 屬性名
  2. 屬性值
    (html5中一些元素可以只有元素名沒有元素值。它們的元素名類似“是非”,“有或沒有”,所以可以省略元素值)
    換行:<br/>
    注:
    1.多個br標簽可以連續使用,是用了多少br標簽就會換多少行
    2.由于HTML的作用就是用來給文本添加語義的,而br標簽的語義是另起一個段落換行,而在企業開發中一般情況下需要換行都是因為需另起一行段落,所以在企業開發中很少使用br標簽。

橫線:<hr/>

一、標題 h1~h6

<h1>h1</h1>
<h4>h4</h4>
<h6>h6</h6>

二、文本突出

mark:幾乎和內容無關,就是為了標示(匹配搜索項,拼寫錯誤等)
strong:表示強調標簽文本內容,不改變其含義
em:表示感情上的強調,增強了語氣

<mark>Text</mark>
<strong>Text</strong>
<em>Text</em>

三、段落和塊

<p>Text</p>
<div>Text</div>
  • 區別:
  1. div就是普通的塊標簽,多用于布局;p是語義化的段落標簽,用于文章分段
  2. div默認沒有邊距,p標簽為了表示文章分段,有默認的間距
  • 行內書寫
    <span>Text</span>
    使用 <span>來組合行內元素,以便通過樣式來格式化它們

四、IMG標簽

1.作用:告訴瀏覽器我們需要顯示一張圖片
2.img標簽格式:
<img src="xxx.jpg" alt="找不到圖片時顯示的內容"/>

  • 屬性:
  1. src:圖片地址
  2. alt: 英文alternate(交替)的縮寫,它的作用是用于告訴瀏覽器,當需要顯示的圖片顯示不出來時顯示出什么內容
  3. width/height:可以是像素值或者相對于父容器的百分比,兩個屬性僅設置一個,另外一個值會按相應等比縮放
  4. title:用于告訴瀏覽器,當鼠標懸停在圖片上時,需要彈出的描述框中顯示什么內容

五、a標簽

  1. a標簽的作用:用于控制頁面于頁面之間的跳轉
  2. a標簽的格式:<a href=" 指定需跳轉的目標界面 ">需要展現給用戶查看的內容</a>
<a target="_blank" >百度</a>
<a href="mailto:xxx@qq.com">聯系我們</a>
<a href="#menu1">聯系我們</a>
  • 補充
    1、target: 打開頁面方式
    2、_self: 在當前選項卡打開,替換當前頁面(默認)
    3、_blank:新的選項卡打開
    4、_parent:在父框架中打開
    5、_top: 在最頂層打開
    6、framename

注意點:

  1. a標簽不僅可以讓文字可以點擊,還可以讓圖片可能夠被點擊
  2. 一個a標簽必須有一個href屬性,否則a標簽不知道要跳轉到什么地方
  3. 如果通過a標簽的href屬性指定一個URL地址,那必須在地址前面加上http://https://
  4. a標簽的href屬性除了可以指定一個網絡地址以外,還可以指定一個本地地址

六、base標簽

base標簽就是專門用來統一指定當前網頁中所有的超鏈接(a標簽)如要如何打開
例:<base target="_blank">

注意點:

  1. base標簽必須寫在head標簽的開始標簽和結束標簽之間
  2. 如果即在base中指定了target又在a標簽中指定了target,那么瀏覽器會按照a標簽中指定的來執行

七、錨點

  1. 想要通過a標簽跳轉到指定的位置,那么必須告訴a標簽一個獨一無二的身份證號碼,這樣a標簽才能在當前界面中找到需要的跳轉目標位置
  2. 如何在HTML中的標簽綁定獨一無二的身份證呢?
    在HTML中,每一個標簽都有一個名稱叫做id屬性,這個屬性就是用來給標簽指定一個獨一無二的身份證號碼的
  3. 所以想要實現通過a標簽跳轉到指定的位置分兩步
  1. 給目標未知的標簽添加一個id屬性,然后指定一個獨一無二的值
  2. 告訴a標簽你需要跳轉到的目標標簽對應的獨一無二的身份證號碼是多少?

格式:

<a href="#center">跳到中間</a>
<h2 id="center">我是中間</h2>

****文章著作權歸饑人谷_Shirley和饑人谷所有,轉載須說明來源****

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容