html標(biāo)簽
標(biāo)簽 == 標(biāo)記
1.標(biāo)簽語法
雙標(biāo)簽(常規(guī)標(biāo)簽): <標(biāo)簽名 屬性名1:屬性值1 屬性名2:屬性值2...> 標(biāo)簽內(nèi)容 </標(biāo)簽名>
單標(biāo)簽: <標(biāo)簽名 屬性名1:屬性值1 屬性名2:屬性值2.../> 或者 <標(biāo)簽名 屬性名1:屬性值1 屬性名2:屬性值2...>
說明:
標(biāo)簽名 - 是html中已有的標(biāo)簽倦挂,不能自己隨便命名鳖谈。標(biāo)簽名和<以及標(biāo)簽名和/之間都不能有空隙
屬性 - 屬性和屬性值之間用:連接斗锭,多個屬性之間用空格隔開爪膊。所有的屬性沒有位置要求
標(biāo)簽內(nèi)容 - 在開始標(biāo)簽和結(jié)束標(biāo)簽之間爹耗,標(biāo)簽的內(nèi)容可以是任意的(可以文本也可以是其他標(biāo)簽)
2.head標(biāo)簽中的內(nèi)容
head中的標(biāo)簽有:title,mate, base, link, style, script
title - 設(shè)置網(wǎng)頁標(biāo)題
meta - 設(shè)置網(wǎng)頁元數(shù)據(jù)(單標(biāo)簽)
3.body
body中的標(biāo)簽主要用來在網(wǎng)頁的內(nèi)容中添加顯示信息的
文本標(biāo)簽
2.段落標(biāo)簽 p
一個段落使用一個p標(biāo)簽幔烛,p標(biāo)簽會換行
-->
<p> JSON是一種取代XML的數(shù)據(jù)結(jié)構(gòu),和xml相比,它更小巧但描述能力卻不差,由于它的小巧所以網(wǎng)絡(luò)傳輸數(shù)據(jù)將減少更多流量從而加快速度,</p>
<p>那么,JSON到底是什么?</p>
3.特殊功能和符號
html中文本中的換行,空格,tab等都是無效的
換行:<br>
空格:
<p>
忽如一夜春風(fēng)來,<br>
千樹萬樹梨花開.<br>
</p>
4.字體相關(guān)標(biāo)簽
加粗:<b></b>本冲,<strong></strong>
b標(biāo)簽只是單純的文字效果加粗,strong標(biāo)簽有強(qiáng)調(diào)的意思
傾斜: i標(biāo)簽/em標(biāo)簽
i標(biāo)簽只是單純的文字效果傾斜,em標(biāo)簽有強(qiáng)調(diào)的意思
<hr>水平線
列表標(biāo)簽
列表標(biāo)簽分為有序列表,無序標(biāo)簽,自定義列表
1.有序列表:
ol標(biāo)簽 --代表整個列表
li標(biāo)簽 -- 代表列表中的元素
2.無序列表:
ul標(biāo)簽 --代表整個列表
li標(biāo)簽 -- 代表列表中的元素
3.自定義列表
dl標(biāo)簽 -代表整個列表
dt標(biāo)簽 -分組名
dd標(biāo)簽 -分組的內(nèi)容
圖片和超鏈接
1.圖片標(biāo)簽:img
單標(biāo)簽
a.src屬性 - 圖片地址(可以本地圖片路徑也可以說是網(wǎng)絡(luò)圖片url)
本地圖片:地址可以是絕對路徑也可以是相對路徑,一般吧圖片放在img文件夾中,然后寫相對路徑
b.title - 設(shè)置圖片標(biāo)題(鼠標(biāo)停留在圖片上,顯示的內(nèi)容)
c.alt 設(shè)置圖片加載失敗的提示信息
2.超鏈接標(biāo)簽:a標(biāo)簽
a.內(nèi)容 -文字/圖片
b.href -跳轉(zhuǎn)的目標(biāo)地址
c.target - 跳轉(zhuǎn)方式
可以是文字超鏈接和圖片超鏈接
href跳轉(zhuǎn)到的目標(biāo)地址
1.href可以跳轉(zhuǎn)到網(wǎng)絡(luò)地址
2.也可以跳到本地html文件地址
3.不寫href可以刷新網(wǎng)頁
4.可以選擇器,跳轉(zhuǎn)到指定的位置
target 跳轉(zhuǎn)方式
_self - 默認(rèn)值,在當(dāng)前頁面加載新的網(wǎng)頁
_blank 創(chuàng)建一個新的窗口打開網(wǎng)頁
數(shù)據(jù)表格
1.表格標(biāo)簽
table標(biāo)簽 -整個表格
tr - 行
td - 單元格(列)
2.邊框相關(guān)屬性
border - 邊框的寬度設(shè)置的是最大的外面邊框和里面的小邊框
bordercolor - 背景顏色 傳的可以是英語單詞,也可以是RGB對應(yīng)的16進(jìn)制值
cellspacing - 單元格和單元格之間的間隙
cellpadding - 設(shè)置內(nèi)容和單元格邊框之間的間距
3.背景顏色屬性
bgcolor - 背景顏色
a.作為table屬性 - 設(shè)置整個表格的背景顏色
b.作為tr屬性 - 設(shè)置一行的背景顏色
c.作為td屬性 - 設(shè)置一個單元格的背景顏色
4.寬度和高度
width 和 height
a.作用與table - 設(shè)置整個表格的寬度和高度(會按比例分配每)
b.分別設(shè)置每一行的高度和寬度
5.對齊方式
align -center/left/right
a.作用于table,讓整個表格在父標(biāo)簽中居中/左對齊/右對齊
b.作用于tr ,讓整行的內(nèi)容居中/左對齊/右對齊
c.作用于td,讓指定的單元居中/左對齊/右對齊
應(yīng)用:細(xì)線表格
第一步:設(shè)置整個表格的背景顏色(邊框顏色) 和每個單元格的背景顏色(表格內(nèi)容的顏色)不一樣
第二步:設(shè)置cellspacing的值為邊框的寬度
不規(guī)則表格
1.制作復(fù)雜表格的方法:
a.確定表格的最大行數(shù)用tr表示出來
b.確定每一行有多少個單元格(共用的單元格只算一次)
c.確定每一個單元格是否有合并現(xiàn)象,如果是行合并就設(shè)置rowspan的值,
如果是列合并就設(shè)置colspan的值