HTML

HTML

網(wǎng)頁，是網(wǎng)站中的一個頁面，通常網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是承載各種網(wǎng)站應(yīng)用的平臺，通俗的說，網(wǎng)站就是由網(wǎng)頁組成的。通常我們看到的網(wǎng)頁都是以html或html后綴結(jié)尾的文件，俗稱HTML文件。

一、HTML簡介

1.1 什么是HTML

Hyper Text Markup Language（超文本標記語言）

  • 超文本：頁面內(nèi)可以包含圖片、鏈接、因為、程序等非文字元素
  • 標記：標簽，不同的標簽下實現(xiàn)不同的功能
  • 語言：人與計算機的交互工具

1.2 HTML能做什么

HTML使用標記標簽來描述網(wǎng)頁，展示信息給用戶。

1.3 HTML書寫規(guī)范

  • HTML標簽是以尖括號包圍的關(guān)鍵字
  • HTML標簽通常是成對出現(xiàn)的，又開始就有結(jié)束
  • HTML通常都有屬性，格式：屬性='屬性值'（多個屬性之間用空格隔開）
  • HTML標簽不區(qū)分大小寫，建議全小寫

二、HTML基本標簽

2.1 結(jié)構(gòu)標簽

<!-- 根標簽 -->
<html>
    <!-- 網(wǎng)頁頭標簽 -->
    <head> 
        <!-- 頁面的標題 -->
        <title></title>
    </head>
    <!-- 網(wǎng)頁正文 -->
    <body></body>
</html>
屬性名 代碼 描述
text < body text="#f00" >< /body > 設(shè)置網(wǎng)頁正文中所有文字的顏色
bgcolor < body bgcolor="#f00" >< /body > 設(shè)置網(wǎng)頁的背景色
background < body background="1.jpg" >< /body > 設(shè)置網(wǎng)頁的背景圖

顏色的表達方式：

  1. 用表示顏色的英文單詞。例：red、green、blue
  2. 用16進制表示顏色。例：#fff000

2.2 排版標簽

可用于實現(xiàn)簡單的頁面布局

  • 注釋標簽：< !--注釋-- >

  • 換行標簽：< br >

  • 段落標簽：< p >文本文字< /p >

      特點：段落之間有空行

    ? 屬性：

    • align：對齊方式（left、center、right）

  • 水平線標簽： < hr/ >

      屬性：
    • width：水平線的長度（兩種：像素表示、百分比表示）
    • size：水平線的粗細（像素表示，例如：10px）
    • color：水平線的顏色
    • align：水平線的對齊方式

2.3 塊標簽（容器）

使用CSS+DIV是現(xiàn)下最流行的一種布局方式

標簽 代碼 描述
div < div >< /div > 行級代碼塊標簽，獨占一行，換行
span < span >< /span> 行內(nèi)塊標簽，所有內(nèi)容都在同一行

2.4 基本文字標簽

< font>< /font>，處理網(wǎng)頁中文字的顯示方式

屬性名 代碼 描述
size < font size="7">< /font> 用于設(shè)置字體的大小，最小1號，最大7號
color < font color="red">< /font> 用于設(shè)置字體的顏色
face < font face="宋體">< /font> 用于設(shè)置字體的樣式

2.5 文本格式化標簽

使用標簽實現(xiàn)標簽的樣式處理

標簽 代碼 描述
b < b>< /b> 粗體標簽
strong < strong>< /strong> 加粗
em < em>< /em> 強調(diào)字體
i < i>< /i> 斜體
small < small>< /small> 小號字體
big < big>< /big> 大號字體
sub < sub>< /sub> 上標標簽
sup < sup>< /sup> 下標標簽
del < del>< /del> 刪除線

2.6 標題標簽

隨著數(shù)組增大文字逐漸變小，字體是加粗的，內(nèi)置字號，默認獨占一行

標簽 代碼 描述
h1 < h1>< /h1> 1號標題，最大字號
... ... ...
h6 < h6>< /h6> 6號標題，最小字號

2.7 列表標簽

無序列表：使用一組無序的符號定義， < ul>< /ul>

<ul type="circle">
    <li></li>
</ul>
屬性值 代碼 描述
circle < ul type="circle"> < /ul> 空心圓
dis < ul type="dis"> < /ul> 實心圓
square < ul type="square"> < /ul> 黑色方塊

有序列表：使用一組有序的符號定義，< ol>< /ol>

<ol type="a" start="1">
    <li></li>
</ol>
屬性值 代碼 描述
1 < ol type="1"> < /ol> 數(shù)字類型
A < ol type="A"> < /ol> 大寫字母類型
a < ol type="a"> < /ol> 小寫字母類型
I < ol type="I"> < /ol> 大寫羅馬數(shù)字類型
i < ol type="i"> < /ol> 小寫羅馬數(shù)字類型

2.8 圖形標簽

在頁面指定位置處引入一張圖片，< imag/>

屬性名 描述
src 引入圖片的地址
width 圖片的寬度
height 圖片的高度
border 圖片的邊框
align 與圖片對齊顯示方式
alt 圖片加載失敗后提示的文字
title 鼠標指到圖片時的提示文字
hspace 在圖片左右設(shè)定空白
vspace 在圖片上下設(shè)定空白

2.9 鏈接標簽

  • 在頁面中使用鏈接標簽跳轉(zhuǎn)到另一頁面

  • 標簽：< a href="xxxx">< /a>

  • 屬性：

      href：跳轉(zhuǎn)頁面的地址（跳轉(zhuǎn)到外網(wǎng)需要添加協(xié)議）

    ? target：設(shè)置跳轉(zhuǎn)頁面時的頁面打開方式

    ? _blank 在新窗口打開

    ? _self在原窗口打開

  • 指向同一頁面中指定位置：

      定義位置：< a name="hello">< /a>

    ? 指向：< a href="#hello">< /a>

2.10 表格標簽

普通表格：（table：聲明表格、tr：聲明行、td：聲明列）

<table>
    <tr>
        <td></td>
    </tr>
</table>

表格的列標簽：（th：內(nèi)容有加粗和居中的效果，多用于表頭）

<table>
    <tr>
        <th></th>
    </tr>
</table>

表格的合并屬性：（colspan：在同一行內(nèi)合并多個列、rowspan：在同一列內(nèi)合并多個行）

<table>
    <tr>
        <!-- 表示該單元格獨占7列 -->
        <th colspan="7"></th>
        
    </tr>
    <tr>
        <!-- 表示該單元格獨占3行 -->
        <th colspan="7"></th>
    </tr>
    <tr>
    </tr>
</table>

三、HTML表單標簽

HTML表單標簽用于收集不同類型的用戶輸入數(shù)據(jù)

3.1 form元素常用屬性

  • action：表示動作，值為服務(wù)器地址，把表單的數(shù)據(jù)提交到該地址上去處理

  • method：請求方式（get或post）

  • enctype：表示表單是提交類型

      默認值：application/x-www-form-urlencoded 普通表單

      multipart/form-data 多部分表單（一般用于文件上傳）

3.2 input元素

作為表單中的重要元素，可根據(jù)不同的type值呈現(xiàn)為不同的狀態(tài)

屬性值 代碼 描述
text < input type="text">< /input> 單行文本框
password < input type="password">< /input> 密碼框
radio < input type="radio">< /input> 單選按鈕
checkbox < input type="checkbox">< /input> 復(fù)選框
date input type="date">< /input> 日期框
time < input type="time">< /input> 時間框
datetime < input type="datetime">< /input> 日期和時間框
email < input type="email">< /input> 電子郵件輸入
number < input type="number">< /input> 數(shù)值輸入
file < input type="file">< /input> 文件上傳
hidden < input type="hidden">< /input> 隱藏域
range < input type="range">< /input> 取值范圍
color < input type="color">< /input> 取色按鈕
submit < input type="submit">< /input> 提交按鈕

3.3 select按鈕（下拉列表）

  • 單選下拉列表：< select>< /select>
  • 默認選中屬性：selected="selected"
<select>
    <option selected="selected">內(nèi)容</option>
</select>
  • 多選下拉列表：< select>< /select>
  • 多選列表屬性：multiple="multiple"
<select multiple="multiple">
    <option>內(nèi)容</option>
</select>

3.4 textarea元素（文本域）

多行文本框：可以輸入多行數(shù)據(jù)的文本框

<!-- cols和rows表示該文本框的寬度和高度 -->
<textarea cols="10" rows="5"></textarea>

四、HTML框架標簽

  • 通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面，每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架。
  • 使用框架的缺點：
    • 開發(fā)人員必須同時跟蹤更多的HTML文檔
    • 很難打印整張頁面

4.1 框架解構(gòu)標簽frameset

  • 框架結(jié)構(gòu)標簽（< frameset>< /frameset>）用于定義如何將窗口分割為框架
  • 每個frameset定義了被劃分為幾行/列展示網(wǎng)頁
    • < frameset rows="">< /frameset>（rows為劃分為N行，cols為劃分為N列）

4.2 框架標簽frame

每個frame引入一個html頁面

<!-- cols="*,*"表示將一個瀏覽器頁面劃分為2列顯示 -->
<frameset cols="*,*">
    <frame src="info1.html"/>
    <frame src="info2.html">
</frameset>

4.3 基本注意事項

  • 不能將< body>< /body>標簽與< frameset>< /framset>標簽同時使用
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • 第1章 html基本結(jié)構(gòu) 認識HTML： html不是一種編程語言，是一種標志語言 標記語言是由一套標識標簽組成的...
    不喝可樂_7889閱讀 735評論 0贊 0
  • HTML5< !--...--> 標簽 comment 注釋標簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示。...
    野小寶閱讀 1,407評論 0贊 10
  • 第一部分 HTML 第一章 職業(yè)方向和規(guī)劃定位 職業(yè)方向規(guī)劃定位： web前端開發(fā)工程師 web網(wǎng)站架構(gòu)師 自己創(chuàng)...
    走到天邊去閱讀 259評論 0贊 0
  • HTML5 標簽comment 注釋標簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,250評論 1贊 25
  • HTML 注釋 HTML 標簽分類（按照功能）： 文本的修飾，文字排版，圖片，鏈接，表格，列表，表單，框架 ,語音...
    Ethan_Lan閱讀 520評論 0贊 0

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