概念

html 超文本標記語言

全寫：HyperText Mark-up Language

概念: 一種爲普通文件中某些字句加上標示的語言，其目的在於運用標記（tag）使文件達到預期的顯示效果。

超文本
標記

作用

主要用於網頁的製作

html 基本用法

標籤入門

標籤語法

使用尖括號作爲關鍵字的語法格式
標籤需要成對出現 <>
標籤中可以添加屬性, 表示標籤的具體實現細節
標籤可以字母大寫, 但是推薦使用小寫

標籤分類

雙標籤 (圍堵標籤)

它以開始標籤及結束標籤將文字圍住，令其達到預期顯示效果

<b>內容</b>  有加粗效果

單標籤

標籤單獨出現，只有開始標籤沒有結束標籤

不需要包含任何東西, 本身就具有某種含義

<br/> 換行

屬性入門

hr  橫線 
是一條 顏色爲紅色 比較粗的一條橫線
<hr/> 貫穿屏幕的一條橫線
<hr color="red" size="5">
格式  <標籤名 屬性名="屬性值" 第二個屬性="">

html 基本構架

<!DOCTYPE html>		頭聲明 
<html lang="en">   	根標籤
    <head>			頭文件 
        <meta charset="UTF-8">	編碼格式 
        <title>Title</title>	網頁的標題
    </head>
    <body>			身體, 主體網頁文件
    </body>
</html>

使用webStrom 有快捷方式 生成基本架構
Html:5  加上 Tab 鍵 可以自動生成 基本架構
html:4s

簡單標籤

舉例常見標籤

<b></b>	字體加粗
<i></i>	字體傾斜
<u></u>	下劃線
<s></s>	刪除線

<sub></sub> 下標文本
<sup></sup> 上標文本
<big></big> 字體變大
<small></small> 字體變小

<center></center> 居中
<h></h>	標題標籤
<h1>xxx</h1>~<h6>xxx</h6>

標題標籤的四個特點

自動換行
自動加粗
自動調整字體大小
標題之間的留白

其他標籤

<p></p>  段落標籤  有換行功能 段落之間可以自動隔行
<abbr title="中國中央電視臺">CCTV</abbr>    
表示它所包含的文本是一個更長的單詞或短語的縮寫形式
可以在 <abbr> 標籤中使用全局的 title 屬性，這樣就能夠在鼠標指針移動到 <abbr> 元素上時顯示出簡稱/縮寫的完整版本。

註釋標籤

<!-- -->

特殊符號

特殊符號	字符實體
空格	&nbsp(分號)
大於號>	&gt(分號)
小於號<	&lt(分號)
引號(")	&quot(分號)
版權符號©	&copy(分號)

複雜標籤

font 字體標籤

color 顏色直接寫顏色名 red green blue
size 尺寸
- 取值 1-7 1最小 7最大
face 字體
- 計算機內部支持的所有字體
- 漢字 “楷體” 也可以寫漢語拼音

body 主體標籤

整個網頁的主體部分, 主要的顯示區域

添加背景顏色

背景 background   bgColor 
bgcolor="green"

添加背景圖片

background="圖片名稱"

設置全局字體顏色

text="red"
文本中 沒有添加顏色的
// body 是其他子標籤的父元素, 類似於 父親的角色
如果兒子沒有女朋友, 聽父親給他介紹的
一旦兒子已經有了自己的女朋友, 父親給他介紹其他女朋友的時候, 兒子是不會屈服的

img標籤

src
- source 的縮寫, 源, 路徑
width/ height
title
- 鼠標指向的時候, 彈出提示說明文字
alt 圖片的替代文字

a 超鏈接標籤

href 鏈接指向的位置

文本文件
圖片文件
其他網頁文件(.html)
網絡地址
- 必須添加協議 http://

href 錨鏈接

// 頁面回到頂部功能
1- 設定一個錨點
2- 回到錨點的鏈接, 將鏈接指向錨點
<!-- 該 a 標籤 是一個錨點 -->
<a name="top"></a>
<a href="#top" >回到頂部</a>

target 頁面打開方式

_blank	新頁面打開
_self	自身頁面打開

###一年四季網站

創建多個網頁文件
通過a鏈接和 img 標籤的組合 實現 點擊鏈接切換圖片的效果

複合標籤

列表

有序列表

<ol>
	<li></li>
	<li></li>
</ol>

<!-- 有序 -->
<ol type="I">
    <li>王者榮耀</li>
    <li>火影忍者</li>
    <li>陰陽師</li>
    <li>夢幻西遊</li>
    <li>爐石傳說</li>
</ol>

type 項目符號的顯示方式 屬性的值 1 a A i I
start 起始編號

無序列表

<ul>
	<li></li>
	<li></li>
</ul>

type=""  
    空心圓 circle
    實心圓 disc
    小方塊 square  
    無修飾	none

使用場景 新聞網站

項目列表

<dl>
	<dt>武俠人物</dt>
	<dd>郭靖</dd>
	<dd>黃蓉</dd>
	<dt>演藝圈</dt>
	<dd>趙麗穎</dd>
	<dd>謝娜</dd>
</dl>

武俠人物
    郭靖
    黃蓉
    楊康
    楊過
IT 行業
    支音
    曹偉
    繼斌
演藝圈
	趙麗穎
	謝娜	
場景 每個班 有多名學生  
	某公司, 多個項目組, 每個項目組又有多個組員

表單

input 輸入框

<input />

input 屬性	含義
text	文本
password	密碼
number	數字框
email	郵箱
date	日期框
button	按鈕
submit	提交按鈕
reset	重置按鈕
radio	單選鈕需要配合name 屬性
checkbox	複選框
file	文件選擇框
hidden	隱藏域

非input 屬性
select / option	下拉菜單 / 選項
button	按鈕
textarea	大文本輸入框

<textarea cols="50" rows="10">
</textarea>

屬性

name 屬性的含義 給表單元素起名稱, 用於區分多個文本框
用戶名 : <input type="text" name="username">
真實姓名 : <input type="text" name="realname">
- 在單選鈕中 標識那些單選鈕屬於同一組的

value 屬性  (英語  值)
用於指定表單元素初始值
value 放在 button中  用於顯示 按鈕的顯示文字

size
指定表單元素的初始寬度 
如果表單類型是 text 或者 password 表單元素大小以字符爲單位
如果是其他類型 以像素爲單位

button

<input type="button" value="點我一下"> 
<button>點我一下</button>

####拓展知識

默認選中

checked / selected

checked 默認選中
對單選鈕和複選框生效 默認選中當前選項
如果是 下拉菜單 option 中 必須換成 selected

只讀和禁用

readonly / disabled

用戶名; <input type="text" value="張三" readonly/> <br><br>

<input type="submit" value="提交" disabled/> <br><br>
<button disabled>你好</button><br><br>

標註 label

<!-- 當鼠標點擊標註文字的時候, 焦點到for指向的表單元素 -->
<input type="radio" name="sex" id="sex1">
<label for="sex1">男</label>
<input type="radio" name="sex" id="sex2">
<label for="sex2">女</label>

<label >
    <input type="checkbox" name="hobby"> 吃
</label>
<label >
    <input type="checkbox" name="hobby"> 喝
</label>

表單驗證

placeholder / required

placeholder 提示信息  H5
用戶名; <input type="text"  placeholder="必須輸入6-8位英文"> <br>

<!-- required  驗證 內容不能爲空-->
用戶名 <input type="text" name="user" required> <br><br>
required

<!--pattern 驗證規範 正則表達式 -->
手機號 <input type="text" pattern="1[35678]\d{9}" name="num">
pattern 屬性適用於以下 <input> 類型：text, search, url, telephone, email 以及 password 。

表格

對比列表

三行兩列的一個表格
<table>
	<tr> 
    	<td></td>
    	<td></td>
    </tr>
	<tr> 
	    <td></td>
    	<td></td>
    </tr>
	<tr> 
		<td></td>
    	<td></td>
	</tr>
</table>

####格式補充

標題 caption
表頭 tr>th
表結構
thead 表格頁眉
tbody 表主題
tfoot 表格頁腳

案例

模擬課程表  6  行 9 列
使用工具快速生成 
table>(tr>(td*9))*6
td中填寫內容
table>(tr>(td{內容書寫}*9))*6

常用屬性

屬性名	屬性含義
border	邊框單位是像素
bordercolor	邊框顏色
cellspacing	兩個單元格之間的距離,合併邊框該屬性設置爲0
cellpadding	單元格與其內容之間的距離
width / height	寬高
align	設置在table 中表格位置, 設置在 tr 或td中內容的排版
bgcolor / background	背景顏色和圖片
colspan	合併列
rowspan	合併行

課程表案例	
6圖形案例

iframe 內嵌框架

視頻 <br>
<iframe src="4-音頻.html" frameborder="0">
</iframe>

使用超鏈接在窗體上切換

圖形 <br>
<iframe src="3-關於圖形6.html" frameborder="0" name="abc" width="400px" height="400px"></iframe>
<a href="4-音頻.html" target="abc">在內嵌框架上打開超鏈接</a>

frame 框架集窗口

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

html 5 多媒體標籤

音頻

<audio controls="controls" src="洛天依-小雞嗶嗶.mp3"> </audio>

<audio controls="controls">
   <source src="洛天依-小雞嗶嗶.mp3" />
   <source src="洛天依-小雞嗶嗶.mp3" />
</audio>

視頻

<video src="D:\成長紀錄片.mp4" 
 controls="controls" 
 autoplay></video>
 
 autoplay 自動播放
 src 指向磁盤上的文件路徑

顏色表示法

顏色有三種表示法

英文表示

十六進制表示法

所有的顏色都是三原色組成紅祿藍

根據每種顏色的比例不同, 顯示出不同的色彩,

把每種顏色濃淡使用數字描述 0 - 255

知道16進制 1-9 ABCDEF

(二進制 11111111) 換算成爲 16進制 FF

rgb 表示法

rgb(255,0,0)

rgba 表示法

rgba(255,0,0,0.5)

0-1 之間表示的是顏色的透明度

前端筆記1 HTML基礎

文章目錄

概念