前端基礎-- HTML

番茄西紅柿發布于2019-04-23 13:18 / 3937人閱讀

摘要：知識介紹服務本質瀏覽器發請求協議服務端接收請求服務端返回響應服務端把文件內容發給瀏覽器瀏覽器渲染頁面是什么超文本標記語言是一種用于創建網頁的標記語言。主要是通過樣式為其賦予不同的表現。這兩個元素是專門為定義樣式而生的。

HTML知識

HTML介紹

Web服務本質

瀏覽器發請求 --> HTTP協議 --> 服務端接收請求 --> 服務端返回響應 --> 服務端把HTML文件內容發給瀏覽器 --> 瀏覽器渲染頁面

HTML是什么？

超文本標記語言（Hypertext Markup Language, HTML）是一種用于創建網頁的標記語言。
本質上是瀏覽器可識別的規則，我們按照規則寫網頁，瀏覽器根據規則渲染我們的網頁。對于不同的瀏覽器，對同一個標簽可能會有不同的解釋。（兼容性問題）
網頁文件的擴展名： .html或.htm

HTML不是什么？

HTML是一種標記語言（markup language），它不是一種編程語言。

HTML使用標簽來描述網頁

HTML文檔結構

DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
    body>
html>

通過觀察我們發現, HTML基本結構中所有的標簽都是成對出現的, 這些成對出現的標簽中有一個帶/有一個不帶/, 那么這些不帶/的標簽我們稱之為開始標簽, 這些帶/的我們稱之為結束標簽

聲明為HTML5文檔

html標簽

作用：用于告訴瀏覽器這是一個網頁，也就是說告訴瀏覽器我是一個HTML文檔
注意：其它所有的標簽都必須寫在html標簽里面, 也就是寫在html開始標簽和結束標簽中間

head標簽

作用：用于給網站添加一些配置信息
列如：外掛一些外部的css/js文件；添加一些瀏覽器適配相關的內容
注意：一般情況下，寫在head標簽內部的內容不會顯示給用戶查看，也就是說一般情況下寫在head標簽內部的內容我們都看不到

title標簽

作用：專門用于指定網站的標題，并且這個指定的標題將來還會作為用戶保存網站的默認標題
注意：title標簽必須寫在head標簽里面

body標簽

作用：專門用于定義HTML文檔中需要顯示給用戶查看的內容（文字/圖片/音頻/視頻）
注意：雖然說有時候將內容寫到了別的地方在網頁中也能看到，但是千萬不要這么干，一定要將需要顯示的內容寫在body中；一對html標簽中（一個html開始標簽和一個html標簽結束）只能有一對body標簽

HTML標簽

HTML標簽格式

HTML標簽是有尖括號包圍的關鍵字，如,
等
HTML標簽通常是陳規定出現的，比如：
和
, 第一個標簽是開始，第二個標簽是結束。結束標簽會有斜線。
也有一部分標簽是多帶帶呈現的，比如：
、
、等。
標簽里面可以有若干屬性，也可以不帶屬性。

標簽的語法

<標簽名屬性1="屬性值1" 屬性2="屬性值2"......>內容部分
<標簽名屬性1="屬性值1" 屬性2="屬性值2"....../>

幾個很重要的屬性

id：定義標簽的唯一ID，HTML文檔樹中唯一
class：為html元素定義一個或多個類名(classname)（CSS樣式類名）
style：規定元素的行內樣式（CSS樣式）

HTML標簽分類

單標簽：只有開始標簽沒有結束標簽，也就是由一個<>組成的
```
<meta charset="UTF-8" />
```
雙標簽：有開始標簽和結束標簽，也就是由一個<>和一個組成的
```
<html>
html>
```

HTML標簽關系分類

并列關系（兄弟/平級）
```
<head>
head>
<body>
body>
```

嵌套關系（父子/上下級）

<head>
        <meta charset="UTF-8" />
        <title>百度一下,你就知道123title>
head>

HTML注釋

注釋是代碼之母。

HTML常用標簽

head內常用的標簽

標簽	意義
	定義網頁標題
	定義內部樣式表
	定義JS代碼或引入外部JS文件
	引入外部樣式表文件
	定義網頁原信息

Meta標簽

Meta標簽介紹：

元素可提供有關頁面的元信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
標簽位于文檔的頭部，不包含任何內容。
提供的信息是用戶不可見的。

meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同網頁的功能。

http-equil屬性：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
```
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">

<meta http-equiv="content-Type" charset=UTF8">

<meta http-equiv="x-ua-compatible" content="IE=edge">
```
name屬性：主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。
```
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩教育Python學院">
```

body內常用的標簽

基本標簽(塊級標簽和內聯標簽)

<b>加粗b>
<i>斜體i>
<u>下劃線u>
<s>刪除s>


<p>段落標簽p>


<h1>標題1h1>
<h2>標題2h2>
<h3>標題3h3>
<h4>標題4h4>
<h5>標題5h5>
<h6>標題6h6>


<br>


<hr>

特殊字符

內容	對應代碼
空格
>	>
<	<
&	&
¥	¥
版權	©
注冊	®

div標簽和span標簽

div：div標簽用來定義一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現。
span：span標簽用來定義內聯（行內）元素，并無實際的意義。主要是通過CSS樣式為其賦予不同的表現。

div和span有什么區別?

1.div會多帶帶的占領一行,而span不會多帶帶占領一行
2.div是一個容器級的標簽, 而span是一個文本級的標簽

塊級元素與行內元素的區別

所謂塊級元素，是以另起一行開始渲染的元素，行內元素則不需要另起一行。如果多帶帶在網頁中插入這兩個元素，不會對頁面產生任何的影響。

這兩個元素是專門為定義CSS樣式而生的。

注意：

關于標簽嵌套：通常塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。

p標簽不能包含塊級標簽，p標簽也不能包含p標簽。

img標簽

作用：在網頁上插入一張圖片

格式：

<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息" width="寬" height="高(寬高兩個屬性只用一個會自動等比縮放)">

屬性：

屬性名稱	作用
src(source)	告訴瀏覽器需要`插入`的圖片路徑, 以便于瀏覽器到該路徑下找到需要插入的圖片
alt(alternate)	規定圖像的替代文本, `只有`在src指定的路徑下`找不到圖片`,才會顯示alt指定的文本
title	懸停文本(介紹這張圖片, 只有在鼠標移動到圖片上時才會顯示)
height	設置圖片顯示的高度
width	設置圖片顯示的寬度

注意點：img標簽添加的圖片默認的不是占一整行空間；如果想讓圖片等比拉伸，只寫高度或者寬度即可；如果img標簽沒有指定需要顯示的圖片的寬高, 那么系統會按照圖片默認的寬高來顯示；如果img標簽指定的寬高, 那么系統會按照指定的寬高來顯示。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img標簽title>
head>
<body>


<img src="images/QRCode.jpg">

<img src="images/QRCode.jpg" width="300" height="478">

<img src="images/QRCode.jpg" width="100" height="478">

<img src="images/QRCode.jpg" height="178">
<img src="images/QRCode.jpg" width="100">

<img src="images/QRCode.jpg" width="100" title="這個是圖片">

<img src="images/QRCode1.jpg" width="100" alt="對不起, 你需要查看的圖片不見了">
body>
html>

img示例

a標簽

作用：用于從一個頁面鏈接到另一個頁面
格式：
```
<a href="http://www.baidu.com">百度a>
```

屬性：

屬性名稱	作用
href(hypertext reference)	指定跳轉的目標地址
target	告訴瀏覽器是否保留原始界面, _blank表示在新標簽頁中打開目標網頁, _self表示在當前標簽頁中打開目標網頁
title	懸停文本(介紹這個鏈接, 只有在鼠標移動到超鏈接上時才會顯示)

注意點：在a標簽之間一定要寫上文字, 如果沒有, 那么在頁面上找不到這個標簽；a標簽也叫做超級鏈接或者超鏈接；a標簽不僅可以讓文字可以點擊, 還可以讓圖片也能夠被點擊；一個a標簽必須有一個href屬性, 否則a標簽不知道要跳轉到什么地方；如果通過a標簽的href屬性指定一個URL地址, 那么必須在地址前面加上http://或https://；a標簽的href屬性除了可以指定一個網絡地址以外, 還可以指定一個本地地址

a標簽的其它用法：

假鏈接（本質是跳轉到當前頁面）

格式<a href="#">百度a>
格式<a href="javascript:">百度a>

跳轉到當前頁面指定位置（錨點鏈接）

格式<a href="#location">跳轉到指定位置a>
在頁面的指定位置給任意標簽添加一個id屬性
例如 <p id="location">這個是目標p>

跳轉到指定頁面的指定位置

格式: <a href="01-錨點鏈接.html#location">跳轉到指定位置a>
只需要在01-錨點鏈接.html頁面添加一個id位置即可

下載（極力不推薦使用）

例如<a href="girl.zip">下載福利資源<a/>

列表標簽

列表標簽的作用：給一堆數據添加列表語義，也就是告訴搜索引擎告訴瀏覽器這一堆數據是一個整體

分類：無序列表；有序列表；定義列表

無序列表

給一堆數據添加列表語義, 并且這一堆數據中所有的數據都沒有先后之分

<ul type="disc">
  <li>第一項li>
  <li>第二項li>
ul>

type屬性

disc （實心圓點，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）

注意

ul標簽和li標簽是一個整體, 是一個組合. 所以一般情況下ul標簽和li標簽都是一起出現, 不會單個出現. 也就是說不會多帶帶使用一個ul標簽或者多帶帶使用一個li 標簽, 都是結合在一起使用；由于ul標簽和li標簽是一個組合, 所以ul標簽中不推薦包含其它標簽, 也就是說以后你在ul標簽中只會看到li標簽

應用場景：1.新聞列表；2.商品列表；3導航條

有序列表

有序列表的作用: 給一堆數據添加列表語義, 并且這一堆數據中所有的數據都有先后之分

<ol type="1" start="2">
  <li>第一項li>
  <li>第二項li>
ol>

type屬性

1 數字列表，默認值
A 大寫字母
a 小寫字母
I 大寫羅馬
i 小寫羅馬

定義列表

給一堆數據添加列表語句；先通過dt標簽定義列表中的所有標題，然后再通過dd標簽給每個標題添加描述信息

<dl>
  <dt>標題1dt>
  <dd>內容1dd>
  <dt>標題2dt>
  <dd>內容1dd>
  <dd>內容2dd>
dl>

注意

dl和dt/dd是一個整體，所以他們一般情況下不會多帶帶出現，都是一起出現；由于dl和dt/dd是一個組合標簽，所以dl中建議只放dt和dd標簽。

應用場景：做網站尾部的相關信息；做圖文混排。

表格標簽

表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式（即按行和列組織）的數據。

完整結構

<table>
    <caption>表格的標題caption>
    <thead>
        <tr>
            <th>每一列的標題th>
        tr>
    thead>
    <tbody>
        <tr>
            <td>數據td>
        tr>
    tbody>
    <tfoot>
        <tr>
            <td>數據td>
        tr>
    tfoot>
table>

caption作用: 指定表格的標題
thead作用:   指定表格的表頭信息
tbody作用:   指定表格的主體信息
tfoot作用:   指定表格的附加信息

格式

table定義表格
tr定義行
td定義單元格

<table>
  <thead>
  <tr>
    <th>序號th>
    <th>姓名th>
    <th>愛好th>
  tr>
  thead>
  <tbody>
  <tr>
    <td>1td>
    <td>Egontd>
    <td>杠娘td>
  tr>
  <tr>
    <td>2td>
    <td>Yuantd>
    <td>日天td>
  tr>
  tbody>
table>

屬性

border：默認情況下表格的邊框寬度為0看不到, 通過border屬性給表格指定邊框寬度
width：默認情況下表格的寬度是由內容自動計算出來的, 可以通過width屬性指定表格的寬度
height：默認情況下表格的高度是由內容自動計算出來的, 可以通過height屬性指定表格的高度
cellspacing：外邊距. 默認情況下單元格之間有2個像素的間隙, 可以通過cellpadding指定表格之間的間隙
cellpadding：內邊距. 默認情況下單元格邊緣距離內容有1個像素的內邊距, 可以通過cellpadding屬性指定單元格邊緣和內容之間的內邊距
rowspan：單元格豎跨多少行
colspan：單元格橫跨多少列（即合并單元格）

form標簽

功能：

表單用于向服務器傳輸數據，從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標簽。

表單屬性

屬性	描述
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
action	規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete	規定瀏覽器應該自動完成表單（默認：開啟）。
enctype	規定被提交數據的編碼（默認：url-encoded）。
method	規定在提交表單時所用的 HTTP 方法（默認：GET）。
name	規定識別表單的名稱（對于 DOM 使用：document.forms.name）。
novalidate	規定瀏覽器不驗證表單。
target	規定 action 屬性中地址的目標（默認：_self）。

表單元素

基本概念：
HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，并要求糾正錯誤。當數據完整無誤后，服務器反饋一個輸入完成的信息。

from django.conf.urls import url
from django.shortcuts import HttpResponse


def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, wb) as f:
            for chunk in request.FILES[file].chunks():
                f.write(chunk)
            return HttpResponse(上傳成功)
    return HttpResponse("收到了！")

urlpatterns = [
    url(r^upload/, upload),
]

Django接收上傳文件代碼

input標簽

元素會根據不同的 type 屬性，變化為多種形態。如果說td是表格最核心的標簽, 那么input就是表單最核心的標簽. nput標簽有一個type屬性, 這個屬性有很多類型的取值, 取值的不同就決定了input標簽的功能和外觀不同

type屬性值	表現形式	對應代碼
text	單行輸入文本
password	密碼輸入框
date	日期輸入框
checkbox	復選框
radio	單選框
submit	提交按鈕
reset	重置按鈕
button	普通按鈕
hidden	隱藏輸入框
file	文本選擇框

屬性說明：

name：表單提交時的“鍵”，注意和id的區別
value：表單提交時對應項的值
- type="button", "reset", "submit"時，為按鈕上顯示的文本年內容
- type="text","password","hidden"時，為輸入框的初始值
- type="checkbox", "radio", "file"，為輸入相關聯的值
checked：指定radio和checkbox默認值, 前提是同一組內容必須設置相同name屬性
readonly：text和password設置為只讀
disabled：所有input均適用


"en">

    "UTF-8">
    34-表單練習



"http://www.baidu.com">
    
        注冊界面
        
            賬號: "text" name="account">
        
        
            密碼: "password" name="pwd">
        
    
        
            性別:
            "radio" name="gender" value="male">男
            "radio" name="gender" value="female">女
            "radio" checked="checked" name="gender" value="yao">保密
        
        
            愛好:
            "checkbox" name="sport" value="basketball">籃球
            "checkbox" name="sport" value="football">足球
            "checkbox" checked="checked" name="sport" value="crazy">足浴
        
        
            簡介:
            "</span><span style="color: #800000;">30</span><span style="color: #800000;">"</span> rows=<span style="color: #800000;">"</span><span style="color: #800000;">10</span><span style="color: #800000;">"</span> name=<span style="color: #800000;">"</span><span style="color: #800000;">desc</span><span style="color: #800000;">"</span>>
        
        
            生日:
            "date" name="birthday">
        
        
            郵箱:
            "email" name="email">
        
        
            電話:
            "number" name="phone">
        
        
            "submit" value="注冊">     &nbsp;
            "reset" value="清空">

表單和input標簽練習

label標簽

作用：label標簽不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性

注意：表單元素要有一個id，然后label標簽就有一個for屬性，for屬性和id相同就表示綁定了；所有表單元素都可以通過label綁定


for="account">賬號:
"text" id="account" />


"radio" name="sex" id="man" /> for="man">男


"checkbox" id="basketball" />
for="basketball">籃球

datalist標簽

作用：給輸入框綁定待選項


"en">

    "UTF-8">
    31-Datalist標簽




請輸入你的車型: "text" list="cars">

"cars">

示例

select標簽

<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京option>
    <option selected="selected" value="2">上海option>
    <option value
                 
                                                                                                                    
                         GPU云服務器
                                             
                         云服務器
                                                                                                                                                 
                                      
                     
                    
                                                                                               前端基礎
                                                                                                           前端基礎教程
                                                                                                           前端零基礎
                                                                                                           零基礎前端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1694.html

「前端早讀君010」重學前端day1: HTML基礎

摘要：前言鑒于平時業務代碼寫多了，筆者對前端的一些基礎知識都開始生疏。同理，對于而言，的標簽也是具有容器含義的，譬如標簽顧名思義就是尾部標簽，存放內容的結尾塊，標簽表示頭部。前言鑒于平時業務代碼寫多了，筆者對前端的一些基礎知識都開始生疏。有鑒于此，加上又到了一年一度的春招時間，在接下來的一段時間內筆者將對整個前端體系的知識進行一些梳理，同時會附帶上相關基礎知識中常見的面試題。在筆者復習的...

wwq0327 2019-08-23 15:37 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

JerryWangSAP 2019-08-02 15:21 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

shadajin 2019-08-19 11:45 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

asoren 2019-07-01 14:01 評論0 收藏0

發表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關注我要私信

TA的文章

tensor

閱讀 713·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3910·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3784·2021-11-30 14:52
VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區

閱讀 3852·2021-11-29 11:00
百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

閱讀 3783·2021-11-29 11:00
Linux系統和寶塔面板如何啟用禁ping功能?

閱讀 3869·2021-11-29 11:00
301重定向怎么做?301重定向設置方法有幾種

閱讀 3558·2021-11-29 11:00
wordpress網站重定向次數過多的解決方法

閱讀 6105·2021-11-29 11:00

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！