一天教会三岁表弟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這個標簽里邊,看到一條屬性:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">xmlns是html的第一個屬性是一個命名空間,規定不同用戶在瀏覽器中標簽語義遵循的統一標準,第二個屬性就是lang代表所有的標簽語言都是英文
2. head標簽內部的可放標簽
2.1title標簽
<title></title>:雙標簽,放置網頁的標題
2.1meta標簽
<meta>:單標簽,一般用于定義頁面的特殊信息,如頁面關鍵字,頁面描述等,提供給搜索引擎,告訴搜索引擎這個頁面是做什么的
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其他標簽
<style type="text/css"></style>:標簽內寫CSS的代碼
2.3script標簽
<script></script>:標簽內寫JavaScript代碼
2.3link標簽
<link type="text/css" rel="stylesheet" href="css/index.css" >:導入css文件
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有序列表
<ol><li></li><li></li><li></li><li></li></ol>比如我們使用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定義列表
<dl>//定義列表<dt>名詞</dt>//定義標題<dd>描述</dd>//定義解釋.... </dl>舉個例子
注意: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 | 提交地址 |
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,有兩種寫法都會默認的勾選女:
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值,這樣就可以實現頁面內的跳轉
比如:
<a href="#a1" >1.簡介<a href="#a2" >2.說明 <h1 id="a1">1.簡介</h1> <h1 id="a2">2.說明</h1>8. 行內元素和塊元素
1.塊元素:獨占一行的元素,不管有多少內容,都會獨占一行
2.行內元素:只占自身大小,不會占一行
常見的塊元素:
| h1~h6 | 標題元素 |
| p | 段落元素 |
| div | div無特殊含有,與網頁布局有關 |
| hr | 水平線 |
| ol | 有序列表 |
| ul | 無序列表 |
塊元素的特點:
- 塊元素獨占一行,排斥其他元素(包括塊元素和行內元素)與其位于同一行;
- 塊元素內部可以容納其他塊元素和行內元素
行內元素:
常見行內元素:
| strong | 粗體元素 |
| em | 斜體元素 |
| a | 超鏈接 |
| span | 常用行內元素,結合css定義樣式 |
9.特殊符號在網頁中的轉換和注釋
9.1特殊符號在網頁中的轉換
| > | > |
| < | &It; |
| & | & |
| 空格 | |
9.2注釋
第一種:<!--注釋內容-->
第二種:ctrl+/
10.框架
框架的意思是從頁面里邊再嵌套頁面
格式及說明:
<iframe src="鏈接地址" width="數值" height="數值"></iframe>我們舉個例子:
總結
以上是生活随笔為你收集整理的一天教会三岁表弟HTML,你值得拥有的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 详解Linux的压缩解压缩命令
- 下一篇: CSS基础汇总