前端之HTML知識點整理-html教學-PHP中文網

首頁

web前端

html教學

前端之HTML知識點整理

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 22, 2016 am 10:13 AM

一、html概述

　　htyper text markup language 即超文本標記語言

　　超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程式等非文字元素。

　　標記語言: 標記（標籤）構成的語言.　　

　　網頁==HTML文檔，由瀏覽器解析，用來展示的

　　靜態網頁：靜態的資源，如xxx.html

　　動態網頁：html程式碼是由某種開發語言根據使用者請求動態產生的

　　以下為html檔案的樹狀結構圖

　　標籤的概念：

是由一對尖括號包裹的單字構成例如: *所有標籤中的單字不可能以數字開頭.
標籤不區分大小寫. 和 . 建議使用小寫.
標籤分為兩部分: 開始標籤和結束標籤. 兩個標籤之間的部分我們叫做標籤體.
有些標籤功能比較簡單.使用一個標籤即可.這種標籤叫做自閉和標籤.例如:
標籤可以巢狀.但是不能交叉巢狀.

　　標籤的屬性：　　

通常是以鍵值對形式出現的. 例如 name="alex"
屬性只能出現在開始標籤或自閉和標籤中.
屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹例如 name="alex"
如果屬性值和屬性名稱完全一樣.直接寫屬性名即可. 例如 readonly

二、head主要標籤介紹

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

　　1 name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人查找資訊和分類資訊用的。

　　2 http-equiv顧名思義，相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content， content 　　中的內容其實就是各個參數的變數值。

//(注意後面的引號，分別在秒數的前面和網址的後面)

老男孩

三、body標籤

　　基本標籤：

　　: n的取值範圍是1~6; 從大到小. 用來表示標題.

: 段落標籤. 包裹的內容被換行.並且也上下內容之間有一行空白.

　　 : 加粗標籤.

　　~~: 為文字加上一條中線.~~

　　: 文字變成斜體.

　　^{和_{: 上角標和下角表.}}

　　
:換行.

:水平線

　　块级标签和内联标签

　　块级标签：

　　内联标签：_^>

　　block（块）元素的特点
　　① 总是在新行上开始；

　　
　　② 高度，行高以及外边距和内边距都可控制；
　　③ 宽度缺省是它的容器的100%，除非设定一个宽度。
　　④ 它可以容纳内联元素和其他块元素

　　inline元素的特点
　　① 和其他元素都在一行上；
　　② 高，行高及外边距和内边距不可改变；
　　③ 宽度就是它的文字或图片的宽度，不可改变
　　④ 内联元素只能容纳文本或者其他内联元素

　　对行内元素，需要注意如下
　　设置宽度width 无效。
　　设置高度height 无效，可以通过line-height来设置。
　　设置margin 只有左右margin有效，上下无效。
　　设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

　　特殊字符：

< >；"；©®

　　图形标签：　　

　　src: 要显示图片的路径.

　　alt: 图片没有加载成功时的提示.

　　title: 鼠标悬浮时的提示信息.

　　width: 图片的宽

　　height:图片的高 (宽高两个属性只用一个会自动等比缩放.)

　　超链接标签:　

　　href:要连接的资源路径格式如下: href="http://www.baidu.com"

　　target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.

　　name: 定义一个页面的书签.

　　用于跳转 href : #书签名称.

　　列表标签:　　

:列表中的每一项.

　　
定义列表

列表标题

列表项

　　表格标签

：
　　

　　border: 表格边框.

　　cellpadding: 内边距

　　cellspacing: 外边距.

　　width: 像素百分比.（最好通过css来设置长宽）

: table row

(不常用): 为表格进行分区

　　表单标签

　　表单用于向服务器传输数据。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select、fieldset和 label 元素。

　　1、表单的属性

　　HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.

　　action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web

　　method: 表单的提交方式 post/get 默认取值就是 get（信封）

　　 get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.

　　post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.

　　 get/post是常见的两种请求方式.

　　2.表单元素

　　 type: text 文本输入框

　　password 密碼輸入框

　　 radio 單選框

　　 checkbox 多重選取框

　　submit 提交按鈕

　　 button 按鈕(需搭配js使用.) button與submit的差異？

　　file 提交文件：form表單需加上屬性enctype="multipart/form-data"

<span style="color: #008080;"> 1</span> <span style="color: #0000ff;">def</span><span style="color: #000000;"> index(request):
</span><span style="color: #008080;"> 2</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.POST
</span><span style="color: #008080;"> 3</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.GET
</span><span style="color: #008080;"> 4</span>     <span style="color: #0000ff;">print</span><span style="color: #000000;"> request.FILES
</span><span style="color: #008080;"> 5</span>     <span style="color: #0000ff;">for</span> item <span style="color: #0000ff;">in</span><span style="color: #000000;"> request.FILES:
</span><span style="color: #008080;"> 6</span>         fileObj =<span style="color: #000000;"> request.FILES.get(item)
</span><span style="color: #008080;"> 7</span>         f = open(fileObj.name, <span style="color: #800000;">'</span><span style="color: #800000;">wb</span><span style="color: #800000;">'</span><span style="color: #000000;">)
</span><span style="color: #008080;"> 8</span>         iter_file =<span style="color: #000000;"> fileObj.chunks()
</span><span style="color: #008080;"> 9</span>         <span style="color: #0000ff;">for</span> line <span style="color: #0000ff;">in</span><span style="color: #000000;"> iter_file:
</span><span style="color: #008080;">10</span> <span style="color: #000000;">            f.write(line)
</span><span style="color: #008080;">11</span> <span style="color: #000000;">        f.close()
</span><span style="color: #008080;">12</span>     <span style="color: #0000ff;">return</span> HttpResponse(<span style="color: #800000;">'</span><span style="color: #800000;">ok</span><span style="color: #800000;">'</span>)

登入後複製

View Code　　

　　name: 表單提交項目的鍵.注意和id屬性的區別：name屬性是和伺服器通訊時使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在

　　css和javascript中使用的。

value: 表單提交項目的值.對於不同的輸入類型，value 屬性的用法也不同：

　　type="button", "reset", "submit" - 定義按鈕上的顯示的文字

　　type="text", "password", "hidden" - 定義輸入欄位的初始值

　　type="checkbox", "radio", "image" - 定義與輸入相關聯的值

checked: radio 和 checkbox 預設選取

readonly: 只讀. text 及 password

disabled: 對所用input都好使.

name:表單提交項目的鍵.

size：選項數量

multiple：multiple

為每項加上分組

　　文字域 name:表單提交項目的鍵. cols:文字域預設有多少列 rows:文字域預設有多少行

　　for="www">姓名>
　　　　

> 　　>登入 > 　　

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7857

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1242

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果？ Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中，需要實現一種交互效果：點擊某張圖片，使其周圍的...

HTML，CSS和JavaScript：Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

網頁批註如何實現Y軸位置的自適應佈局？ Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能，特別是如何處理批註之間的間�...

See all articles

: table head cell	: table data cell 　　rowspan: 单元格竖跨多少行　　colspan: 单元格横跨多少列（即合并单元格）	: table header

: table head cell

: table data cell

　　rowspan: 单元格竖跨多少行

　　colspan: 单元格横跨多少列（即合并单元格）

: table header

前端之HTML知識點整理

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題