HTML筆記

html

HTML的相關定義

  1. 什么是HTML?

HTML是負責描述文檔語義的語言

  1. HTML的語言特征

HTML是以標簽對的形式出現(xiàn)的,我們將被描述的文檔寫在對應標簽對之間

下面是HTML的標準框架

  <!DOCTYPE html> <!--定義文檔類型-->
  <html>
  <head>  
  <!--html頭,這里是做文件配置的,例如編碼格式-->
              <title></title>  <!--文檔標題-->
          </head> <!--這里是<head>對應的標簽值-->
      <body> <!--主要的文檔就寫在這,這里是文檔主體-->
      
      </body> 
  </html> 

body里面存放內(nèi)容,body里面可以有很多的標簽對,一對對的的標簽對的作用,是給文本添加語義(段落,標題,文字等內(nèi)容)

html提供了很多標簽對,可以給純文本增加不同的語義。比如

```html
<h1> </h1> <!--標簽對:主標題-->
<h2> </h2> <!--二級標題-->
<p> </p> <!--定義段落-->
```

標簽對是有起始標簽和結束標簽組成的

現(xiàn)在的業(yè)界標準的,網(wǎng)頁技術嚴格的三層劃分:

html:就是負責定義頁面的語義

css:負責描述頁面的樣式

js:負責描述頁面的動態(tài)效果

  1. 編碼方式、關鍵字和頁面描述

    • 字符集

字符集使用meta標簽定義,meta表示“元”,就是表示項目當前的基本配置;中文能夠使用的字符集有兩種:1:utf-8(這個用的范圍比后面一個廣,但占的內(nèi)存較大);2gb2312(這個只適用于中文,占的內(nèi)存相對較小)

  • 關鍵字和頁面描述

meta除了可以設置編碼,還可以設置關鍵字和頁面描述;只要設置了description頁面描述,那么百度搜索的百度快照,就能顯示這些語句,這個技術叫做SEO,search engine optimization

<!--名字就是關鍵字, 內(nèi)容就是你要在百度快照中寫的東西-->
<meta name="名字" content="內(nèi)容">
  1. 圖片的加載
    HTML插入圖片的時候,有兩個文件,一個是HTML文件,一個JPG的文件,插入圖片的時候要寫兩個文件的相對位置,這樣當將項目拷貝給別人的時候,也可以正常顯示,最好是將圖片和HTML文件擋在同一個路徑
  • 如果圖片文件在HTML的上層路徑

<img src="../1.jpg"/>
<!--使用../后退一層,../可以疊加使用-->

  • 如果圖片文件在HTML的下層路徑

<img src="下層路徑的文件名/1.jpg"/>

  1. 超鏈接

一般來說一個網(wǎng)站,是有很多個HTML網(wǎng)頁組成,HTML網(wǎng)頁能夠通過超鏈接互相跳轉(zhuǎn),形成“網(wǎng)”

  • 語法格式
<a href="網(wǎng)頁地址">顯示跳轉(zhuǎn)網(wǎng)頁的內(nèi)容</a>

a指的是英語中anchor“錨”,就好像這個網(wǎng)頁往其它網(wǎng)頁跳轉(zhuǎn)。文本級標簽 href hypertext reference 縮寫 超文本鏈接

  • a標簽的屬性

title:懸浮文本(提示性文字)


<a href="url" title="提示性文字">點擊還未跳轉(zhuǎn)的時候效果</a>

target:是否在新窗口中打開


<a href="url" target="_blank">開啟新的界面</a>

  1. 頁面中的錨點
    所謂錨點,就是一個小標記,這個小標記使用戶不可察覺的,用戶不知道為何有這個點
  • 一般錨點也是用a標簽來設置,不過是使用name/id屬性

<a name="first">首頁</a>
<a id="second">頁面一</a>

  • 如何調(diào)用錨點

<a href="first">錨點</a>
<a href="second">錨點</a>

  • 為什么要使用錨點

首先這個錨點在頁面最頂端顯示;在HTML頁面內(nèi)容過的情況下,用戶可以直接看到頁面上指定的內(nèi)容,用戶體驗會好一點

  1. 列表
  • 列表分為有序列表和無序列表

無序列表,用來表示一個列表的語義,并且每個項目各每個項目之間是不分先后的

ul就是英語unordered list(無序列表)的縮寫

li就是英語list item(列表項)的縮寫

所有的li不能單獨存在,必須包裹在ul里面;反過來說,ul的“兒子”不能是別的東西,只能是li;ul的作用是增加無序列表的“語義”的


有序列表,用來表示一個列表的語義,列表中的每一個項目都是有序的

ol和ul就是語義不一樣,使用方法都是一樣的

ol里面只能有l(wèi)i,li必須被ol包裹。li是容器級

ol這個東西用的不多,如果想表達順序,一般用ul


有序列表和無序列表的差別不大,無序列表用的相對多一點

  1. 定義列表

    定義列表也是一個組列表,不過比較復雜,有三個標簽

    dl表示definition list 定義列表
    dt表示definition title 定義標題
    dd表示definition description 定義表述詞
    

    dt、dd只能在dl里面;dl里面只能有dt、dd

    <!--仿京東首頁最底部-->
    <dl>
        <dt>購物指南</dt>
        <dd>
        <a href="#">購物流程</a> </br>
           <a href="#">會員介紹</a> </br>
              <a href="#">生活旅行/團購</a> </br>
                 <a href="#">常見問題</a> </br>
                    <a href="#">大家電</a> </br>
                       <a href="#">聯(lián)系客服</a>
         </dd>
    </dl>
        
    
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • HTML需要掌握標簽 標簽(空格分隔): H5+CSS [TOC] 常用標簽 img 注意點 和H系列標簽/p標簽...
    袁俊亮技術博客閱讀 2,136評論 1 8
  • 什么是瀏覽器 常見主流瀏覽器有5種: IE、谷歌、火狐、Safarri、歐朋; 瀏覽器主要有2個功能 1:將網(wǎng)頁渲...
    Sky_Boss閱讀 697評論 0 0
  • W3C簡介 萬維網(wǎng)聯(lián)盟(World Wide Web Consortium,W3C),又稱W3C理事會. 萬維網(wǎng)的...
    wdsea閱讀 288評論 0 0
  • <! Doctype html>聲明文檔類型 向搜索引擎表示該頁面是html語言,并且語言為英文網(wǎng)站,其"lang...
    深眸靈瞳閱讀 1,119評論 1 1
  • momo無聞閱讀 259評論 8 2

友情鏈接更多精彩內(nèi)容