當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

一天教会三岁表弟HTML，你值得拥有

發布時間：2024/10/14 HTML 147 豆豆

生活随笔收集整理的這篇文章主要介紹了一天教会三岁表弟HTML，你值得拥有小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

目錄:
1.HTML基本骨架
2.head內部的可放標簽
3.文本所用標簽
4.列表標簽
5.表格標簽
6.表單標簽
7.導入圖片和超鏈接
8.行內元素和塊元素
9. 特殊符號在網頁中的轉換和注釋
10.框架

1. HTML基本骨架

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body> </html>

對于骨架各部分的概述

骨架部分概述

<!doctype html>	是一個文檔聲明，表示這是一個HTML頁面，也表示表示網頁是按照html5標準編寫的
<html> </html>	是最根本的標簽表示整個網頁，是一個雙標簽
<head></head>	網頁的頭部里邊是一些網頁的配置除了title標簽其余都不可見，是一對雙標簽，標簽內容是幫瀏覽器解析頁面的
<meta>	里邊是一個網頁使用的字符集
<title> </title>	表示網頁的標題
<body></body>	用戶所能看到的內容區域

有時候我們會在html這個標簽里邊，看到一條屬性：

xmlns是html的第一個屬性是一個命名空間，規定不同用戶在瀏覽器中標簽語義遵循的統一標準，第二個屬性就是lang代表所有的標簽語言都是英文

2. head標簽內部的可放標簽

2.1title標簽

<title></title>：雙標簽，放置網頁的標題

2.1meta標簽

meta標簽有兩個屬性：
1.name屬性：常用取值只有2個：keywords、description,結合content一起用，屬性keywords主要是網頁的關鍵字，description則是對網頁的描述

2.http-equiv屬性：常用屬性值Content-Type和refresh，結合content一起用，Content-Type是定義網頁所用的編碼
refresh是定義網頁自動刷新跳轉：

注意在HTML5中定義網頁所用編碼可以直接用：<meta charset=“utf-8”/>

2.2其他標簽

2.3script標簽

2.3link標簽

3.文本所用標簽

3.1h標簽

<h1~6></h1~6>：分別對應六種標題1~6從大到小,h1標題所占權重最高最便利搜索引擎搜索，一個頁面一般要有一個h1標簽一般將這個標簽給logn(能代表整個網頁的圖標)

3.2p標簽

<p></p>：段落標簽

3.3兩個單標簽

<br/>：單標簽，換行標簽
<hr/>：單標簽，水平線標簽

3.4文本標簽(雙標簽)

標簽名作用

strong或者b	粗體標簽
i或者em或cite	斜體標簽
sup	上標標簽(比如5的平方，那么平方的2就可以使用sup修飾)
sub	下標標簽(化學方程式用的較多)
s	中劃線標簽
u	下劃線標簽
big	大字號標簽
small	小字號標簽

3.5div標簽span標簽

<div></div>：可以在網頁劃分區域，可以用于網頁的整體的布局，無特殊含義
<span></span>：沒有特殊含義，代表小的范圍，文本級標簽，不能放容器級標簽,通常和CSS連用

4. 列表標簽

4.1有序列表

比如我們使用a,b,c進行排序：

注意：ol標簽和li標簽需要配合使用，不能單獨使用，而且ol的子標簽只能是li標簽

4.2無序列表

//可用ul>li*4這種快捷鍵生成如下代碼 <ul><li></li><li></li><li></li><li></li> </ul>

注意ul標簽里邊只能是li標簽，文本不能直接放在ul標簽內，而是放在標簽內

4.3定義列表

舉個例子

注意：dt后邊可以有多個dd對dt進行解釋，dt后邊也可以不跟dd也不會影響整體結構

5.表格標簽

5.1表格標簽

標簽作用

table	表格
tr	代表行
td	代表單元格
caption	表格標題
th	表頭單元格
thead	劃分表頭部分
tbody	劃分表身部分
tfoot	表腳

行，單元格等都需要放在table標簽里邊，其實th和td在本質上都是單元格，但是瀏覽器會對th進行加粗居中，但是不會對td一居中加粗，后三個標簽沒有語義就是把表格分為三個部分，讓表格的代碼更具有可讀性

例子：

table標簽屬性border：代表整個表格邊框顏色的深度，0代表沒有邊框(默認是0)，以后邊框深度依次加深比如：

5.2合并單元格

標簽作用

rowspan	合并行
colspan	合并列

例子：

6.表單標簽

6.1form標簽

我們把表單標簽都放在form標簽中

form標簽屬性

屬性作用

name	表單的名字
method	提交方式
action	提交地址

這里的提交方式指指表單元素使用哪一種http提交方式，method的屬性值有兩個，一個是get一個是post

提交地址用于指定表單數據提交到哪一個地址處理

6.2input標簽

是一個單標簽

關于input的type屬性

6.3單行文本框

input屬性值為text

從上邊的介紹，我們可以看到，單行文本框的瀏覽器效果，我們還可以給單行文本框設置屬性，常用的單行文本的屬性為：

屬性說明

value	設置單行文本框的默認值，也就是默認情況下單行文本框顯示的內容
size	設置單行文本框的長度
maxlength	設置單行文本框最多可以輸入的字符數

例子：

6.4密碼文本框

input屬性值為password

同樣的我們可以為密碼文本框設置屬性

屬性說明

value	設置密碼文本框的默認值，也就是默認情況下密碼文本框顯示的文字
size	設置密碼文本框的長度
maxlength	設置最大輸入字符數

6.5單選框

input屬性值為radio

我們單選框是必備兩個屬性的：

屬性作用

name	表示單選框按鈕所在的組名
value	表示單選框的可取值

舉個例子：

當name屬性一樣的時候，我們只能勾選一個，但是當name屬性不一致的時候，那么就都可以勾選，所以name屬性的一致性需要特別注意。還有一個缺點，那么就是只要我們不手動勾選，那么系統是不會默認勾選的，所以我們這里還有一個屬性可以為我們默認勾選，那就是checked，有兩種寫法都會默認的勾選女：

<input type="radio" name="a" value="女" checked />女<input type="radio" name="a" value="女" checked="checked"/ >女

6.6復選框

input屬性值為checkbox

和單選框一致我們復選框也是三個屬性的：

屬性作用

name	表示單選框按鈕所在的組名
value	表示單選框的可取值
checked	默認勾選

6.7按鈕

input屬性值分為三個button，submit，reset,分別表示普通按鈕，提交按鈕，重置按鈕

和value屬性搭配使用，value里邊的內容就是按鈕上的內容

按鈕類型說明

普通按鈕	一般都是搭配js操作
提交按鈕	給服務器提交數據
重置按鈕	重置用戶在表單輸入的內容(重置按鈕只能重置它所在的form標簽)

6.8多行文本框

多行文本框不是放在input標簽里，他有自己的標簽textarea

兩個屬性：

屬性屬性值

row	行數
cols	列數

6.9下拉列表

同樣的不需要input標簽，是靠著select和option兩個標簽來完成的

1.關于select標簽：

他有兩種屬性：

屬性作用

multiple	設置下拉列表可以選擇多項(無屬性值)
size	設置下拉列表顯示幾個列表項，取值為整數

想要多選需要按住ctrl加鼠標左鍵

2.option標簽：
兩個屬性：

屬性作用

selected	是否選中(默認選中)
value	選項值(可以不加，他是和js配合使用)

我們使用一下select屬性：

可以看到默認的jQuery被選中

6.10文件上傳

input屬性值為file

6.11綜合：

7.導入圖片和超鏈接

7.1導入圖片

<img/>：單標簽

三個屬性：

屬性作用

src	指定圖片路徑，可以是相對和絕對路徑
alt	用于圖片描述，這個描述是給搜索引擎看的，當我們的圖片無法顯示的時候，頁面會顯示alt屬性的內容
title	也是用于圖片描述，不過是描述給用戶看的，當我們鼠標移動到圖片上的時候會顯示title上的文字

7.2超鏈接

<a herf="鏈接地址">文本或者圖片</a>：實現頁面的跳轉，有兩個屬性，第一個是是herf，第二個是target

herf就不用多說了，關于target的屬性值：

屬性值作用

_self	在原來窗口打開鏈接(默認值)
_blank	在新的窗口打開鏈接

如果我們在一個項目下面有多個網頁，同樣也可以在這些網頁之間實現相互跳轉

7.3錨點跳轉

這個比如博主寫博客，點擊博主的目錄就會跳到本頁面對應的位置，這個就叫做錨點跳轉(跳轉到本頁面的指定位置)

h標簽內有一個id屬性可以設置一個id值，可以讓a標簽的屬性href等于#+id值,這樣就可以實現頁面內的跳轉

比如：

8. 行內元素和塊元素

1.塊元素：獨占一行的元素，不管有多少內容，都會獨占一行
2.行內元素：只占自身大小，不會占一行

常見的塊元素：

塊元素說明

h1~h6	標題元素
p	段落元素
div	div無特殊含有，與網頁布局有關
hr	水平線
ol	有序列表
ul	無序列表

塊元素的特點：

塊元素獨占一行，排斥其他元素（包括塊元素和行內元素）與其位于同一行；
塊元素內部可以容納其他塊元素和行內元素

行內元素：
常見行內元素:

行內元素說明

strong	粗體元素
em	斜體元素
a	超鏈接
span	常用行內元素，結合css定義樣式

9.特殊符號在網頁中的轉換和注釋

9.1特殊符號在網頁中的轉換

特殊符號代碼

>	>
<	&It;
&	&
空格

9.2注釋

第一種：
第二種：ctrl+/

10.框架

框架的意思是從頁面里邊再嵌套頁面

格式及說明：

我們舉個例子：

總結

以上是生活随笔為你收集整理的一天教会三岁表弟HTML，你值得拥有的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：详解Linux的压缩解压缩命令
下一篇： 2017年html5行业报告,云适配发布