當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html学习

發布時間：2023/12/31 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 html学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML(HyperText Markup Language)

前言

軟件架構

B/S

? Browser/Server 網站

C/S

? Client/Server QQ

HTML的簡介、發展史：

萬維網聯盟（W3C）維護。包含HTML內容的文件最常用的擴展名是.html，但是像DOS這樣的舊操作系統限制擴展名為最多3個字符，所以.htm擴展名也被使用。雖然現在使用的比較少一些了，但是.htm擴展名仍舊普遍被支持。

一什么是HTML？

超文本標記語言

? (1) 標簽也叫做標記

? (2) html是由標簽/標記和內容組成的

? (3) 標簽是由標簽名稱和屬性組成的

實例：

<人膚色=“黃色” 眼鏡=“很大”></人>

擴展：

使用協議為 http超文本傳輸協議

普通文本：文字內容

超文本：視頻、音頻、圖片、文字…

二 HTML的主體標簽

實例

<!DOCTYPE html> #H5的頭聲明文檔類型為html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd"> #之前的頭文件現在不用 <html> <head><title>標題內容</title><meta charset="UTF-8"> #設置字符集 </head> <body>放html的主體標簽 </body> </html>

html:文件是網頁，瀏覽器加載網頁，就可以瀏覽
head:頭部分，網頁總體信息
- title:網頁標題
- meta：網頁主體信息，會根據name(author/description/keywords)或者httq-equiv(content-type/expires/refresh)屬性的不同，而設置網頁的不同屬性
- link:引入外部文件和C#中的using異曲同工
- style：寫入CSS
- script：寫入JS
body:身體部分，網頁內容

三 HTML的標簽

標簽分為：單標簽/單標記

如：<br /> /<br >

雙標簽/雙標記

如: <p></p>

(1) 文本標簽

<p></p> 段落標簽自成一段會將上下的文字和它保持一定的距離

<br /> 單標記自閉合換行

<i></i> /<em></em> 斜體/強調斜體

<b></b>/<strong></strong>加粗/強調加粗

<h1>-</h6>標題標簽字體加粗自占一行

注意： 建議一個頁面h1只能出現一次

<sub></sub>/<sup></sup> 下標/上標

<hr />水平分割線

<u></u>下劃線

<del></del>刪除線

<font size="1-7" color="顏色" face="字體"></font> 設置字得大小顏色字體

<span></span> 無意義得行級標簽

行級：可以和我們的內容在一行來顯示不能設置寬高

塊級：自占一行可以設置寬高

(2) 圖片標簽

<img /> 在網頁中插入一張圖片

屬性：

src：圖片名及url地址 (必須屬性)
alt: 圖片加載失敗時的提示信息
title：文字提示屬性
width：圖片寬度
height：圖片高度
border：邊框線粗細

實例:

注意：

如果寬和高只給一個那么為等比縮放如果倆個都給那么會按照你所給的寬和高來顯示

(3) 路徑

相對路徑

./ 當前
…/ 上一級

絕對路徑

一個固定得鏈接地址(如域名)
從根磁盤一直到你的文件得路徑

file協議打開本地磁盤文件得協議（試一下火狐）

(4) 超鏈接

<a href=“鏈接地址” title=“提示信息” target=“打開方式”>點擊顯示得內容</a>

屬性：

href必須，指的是鏈接跳轉地址

target:

? _blank 新建窗口得形式來打開

? _self 本窗口來打開

? _parent 父窗口來打開

? _top 頂級窗口來打開

? framename 分幀名來打開

**title：**文字提示屬性（詳情）

錨點

定義錨點 <a id="錨點名稱”></a> 現在使用id 以前使用得都是 name

使用錨點 <a href="#錨點名"></a>

(5) 列表

無序列表*

有序列表

自定義列表

(6) HTML注釋

多行注釋：

注釋的作用：

代碼的調試

解釋說明

(7) 常用實體化符號標簽

HTML 中有用的字符實體

注釋：實體名稱對大小寫敏感！

顯示結果描述實體名稱

	空格
<	小于號	<
>	大于號	>
&	和號	&
"	引號	"
’	撇號	' (IE不支持)
￠	分（cent）	￠
￡	鎊（pound）	￡
￥	元（yen）	￥
€	歐元（euro）	€
§	小節	§
?	版權（copyright）	?
?	注冊商標	?
?	商標	?
×	乘號	×
÷	除號	÷

四分幀

frameset

定義和用法

frameset 元素可定義一個框架集。它被用來組織多個窗口（框架）。每個框架存有獨立的文檔。在其最簡單的應用中，frameset 元素僅僅會規定在框架集中存在多少列或多少行。您必須使用 cols 或 rows 屬性。

可選的屬性

屬性值描述

cols	pixels % *	定義框架集中列的數目和尺寸
rows	pixels % *	定義框架集中行的數目和尺寸
frameborder	1/0	是否顯示邊框
name		給當前分幀窗口起名稱
src		連接的頁面名稱
noresize	noresize	頁面不會被拖拽

實例

注意：

不可以和body在一起需要將body刪掉

五 TABLE表格

table表格

屬性：

width 寬
height 高
border 邊框
cellpadding/cellspacing 內邊距/外邊距
background 背景圖片
bgcolor顏色
align位置 center/left/right
valign規定單元格內容的垂直排列方式。
- top 對內容進行上對齊。
- middle 對內容進行居中對齊（默認值）。
- bottom 對內容進行下對齊。
- baseline 與基線對齊。
rowspan合并行
colspan合并列

標簽：

caption 表格標題

*tr 行標簽

*th 列頭標簽
*td 列標簽

實例：

<table> <caption>我是表格的標題</caption> <tr><th>我是表頭</th><th>我是表頭</th><th>我是表頭</th> </tr> <tr><td>我是單元格</td><td>我是單元格</td><td>我是單元格</td> </tr> </table>

細線表格實例：

六 FORM表單

標簽： <form></form>

(1) form屬性

action 提交的地址 method 提交的方式get(1) 默認不寫為get傳參 url地址欄可見(2) 長度受限制（IE瀏覽器2k火狐8k）(3) 相對不安全post(1) url地址欄不可見長度默認不受限制(2) 相對安全 enctype 提交的類型enctype屬性在表單有文件上傳的時候需要設置值值為multipart/form-data

(2) input 標簽

<input> 表單項標簽input定義輸入字段，用戶可在其中輸入數據。在 HTML 5 中，type 屬性有很多新的值。

具體在下面有詳解：

如：

(3) select 標簽創建下拉列表。

屬性：

*name屬性:定義名稱,用于存儲下拉值的
size：定義菜單中可見項目的數目，html5不支持
disabled 當該屬性為 true 時，會禁用該菜單。
multiple 多選

內嵌標簽：

*<option> 下拉選擇項標簽,用于嵌入到標簽中使用的;

屬性：

*value屬性:下拉項的值
*selected屬性:默認下拉指定項.

(4) *textarea 多行的文本輸入區域

屬性：

* name :定義名稱,用于存儲文本區域中的值。
*cols ：規定文本區內可見的列數。hlc
*rows ：規定文本區內可見的行數。
disabled：是否禁用
readonly：只讀
placeholder 提示信息

注意：
默認值是在兩個標簽之間

(5) *button 標簽定義按鈕。

您可以在 button 元素中放置內容，比如文檔或圖像。這是該元素與由 input 元素創建的按鈕的不同之處。

type:

submit 默認為submit
button 點擊
reset 重置

(6) fieldset html5標簽–fieldset 元素可將表單內的相關元素分組。

**disabled屬性：**定義 fieldset 是否可見。
form屬性： 定義該 fieldset 所屬的一個或多個表單。

(7) legend html5標簽

html5標簽-- 標簽為 b 以及元素定義標題。

實例：

(8) optgroup html5標簽

html5標簽-- 標簽定義選項組。此元素允許您組合選項

實例：

<select><optgroup label="Swedish Cars"><option vanlue="volvo">Volvo</option><option value="saab">Saab</option></optgroup><optgroup label="German Cars"><option value="mercedes">Mercedes</option><option value="audi">Audi</option></optgroup> </select>

(9) datalist html5標簽

html5標簽– 標簽定義可選數據的列表。與 input 元素配合使用，就可以制作出輸入值的下拉列表。
實例：

(10) input 標簽

搭配label標簽使用

label 可以使標簽內的區域指向label標簽for屬性指代的對象的事件。

實例：

*type屬性:表示表單項的類型:

值如下:

text:單行文本框
password:密碼輸入框
checkbox:多選框注意要提供value值
radio:單選框注意要提供value值
file:文件上傳選擇框
button:普通按鈕
submit:提交按鈕
image:圖片提交按鈕

<input type=“image” width=“100” height=“100”border=“2”src=“上傳圖片”/>
reset:重置按鈕, 還原到開始(第一次打開時)的效果
hidden:表單隱藏域,是要和表單一塊提交的信息,但是不需要用戶修改

***name屬性: ** 表單項名,用于存儲內容值的
***value屬性: ** 輸入的值(默認指定值)
**size屬性: ** 輸入框的寬度值
maxlength屬性: 輸入框的輸入內容的最大長度

minlength屬性： 輸入框的輸入內容的最小長度

**readonly屬性: ** 對輸入框只讀屬性
***disabled屬性: **禁用屬性

readonly 數據還是會提交給服務器端 disabled 將數據作廢掉不會再傳遞給服務器端

***checked屬性: ** 對選擇框指定默認選項
placeholder 提示信息

*required 必填屬性

src和alt是為圖片按鈕設置的

注意：reset重置按鈕是將表單數據恢復到第一次打開時的狀態，并不是清空

image圖片按鈕，默認具有提交表單功能。

(11) 作為了解的input h5的新屬性

type屬性：

time 時間
date 日期
range 區間
email 郵箱
url url地址
color 顏色
number 數值
search 搜索

七、HTML中HEAD頭部設置

設置網頁編碼：

自動刷新：

關鍵字：

描述：

站點作者:

網頁標題：

<title>本網頁標題</title>

導入CSS文件：

CSS代碼：

JS文件或代碼：

設置網頁小圖標:

注意：

頭標簽中的內容不會顯示在瀏覽器中

八、 HTML5多媒體標簽（熟悉）

(1) audio 音頻

HTML5 中的新屬性。

屬性值描述

autoplay	autoplay	如果出現該屬性，則音頻在就緒后馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
loop	loop	如果出現該屬性，則每當音頻結束時重新開始播放。
muted	muted	規定視頻輸出應該被靜音。
preload	preload	如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 “autoplay”，則忽略該屬性。
src	url	要播放的音頻的 URL。

方式一

實例：

<audio src="./images/beidahuang.mp3" controls="controls">你的瀏覽器不支持播放 </audio>

方式二

實例:

<audio controls="controls"><source src="./images/beidahuang.mp3" type="audio/mpeg" />你的瀏覽器不支持播放 </audio>

(2) video 視頻

HTML5 中的新屬性。

屬性值描述

autoplay	autoplay	如果出現該屬性，則視頻在就緒后馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
height	pixels	設置視頻播放器的高度。
loop	loop	如果出現該屬性，則當媒介文件完成播放后再次開始播放。
muted	muted	規定視頻的音頻輸出應該被靜音。
poster	URL	規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。
preload	preload	如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用 “autoplay”，則忽略該屬性。
src	url	要播放的視頻的 URL。
width	pixels	設置視頻播放器的寬度。

方式一

實例：

<video src="res/happy.mp4" controls poster="res/glnz.jpeg" width="200" height="300" loop>您的瀏覽器不支持播放請更換瀏覽器在此播放 </video>

方式二

實例:

<video controls loop poster="tiao.jpg"><source src="movie.webm" type="video/webm"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">您的破瀏覽器該扔了，不支持視頻標簽 </video>

總結

以上是生活随笔為你收集整理的html学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html

上一篇：标定学习笔记（四）-- 手眼标定详解
下一篇：电工基础知识入门必背的知识

编程问答

html学习

HTML(HyperText Markup Language)

前言

軟件架構

B/S

C/S

HTML的簡介、發展史：

相關歷程：

一 什么是HTML？

超文本標記語言

二 HTML的主體標簽

三 HTML的標簽

標簽分為：單標簽/單標記

雙標簽/雙標記

(1) 文本標簽

(2) 圖片標簽

(3) 路徑

(4) 超鏈接

(5) 列表

無序列表*

有序列表

自定義列表

(6) HTML注釋

(7) 常用實體化符號標簽

HTML 中有用的字符實體

四 分幀

定義和用法

可選的屬性

五 TABLE表格

六 FORM表單

(1) form屬性

(2) input 標簽

(3) select 標簽創建下拉列表。

內嵌標簽：

屬性：

(4) *textarea 多行的文本輸入區域

(5) *button 標簽定義按鈕。

type:

(6) fieldset html5標簽–fieldset 元素可將表單內的相關元素分組。

(7) legend html5標簽

(8) optgroup html5標簽

實例：

(9) datalist html5標簽

(10) input 標簽

(11) 作為了解的input h5的新屬性

七、HTML中HEAD頭部設置

八、 HTML5多媒體標簽（熟悉）

(1) audio 音頻

實例:

(2) video 視頻

實例：

實例:

總結

HTML的簡介、發展史：

一什么是HTML？

四分幀

(3) select 標簽創建下拉列表。

(5) *button 標簽定義按鈕。

(6) fieldset html5標簽–fieldset 元素可將表單內的相關元素分組。

七、HTML中HEAD頭部設置