前端筆記1 HTML基礎

2021-09-25 10:15:11 字數 4817 閱讀 1583

html 基本用法

屬性入門

**html 基本構架**

簡單標籤

複雜標籤

復合標籤

表單**

iframe 內嵌框架

frame 框架集視窗

html 5 多**標籤

顏色表示法

全寫:hypertextmark-uplanguage

概念: 一種為普通檔案中某些字句加上標示的語言,其目的在於運用標記(tag)使檔案達到預期的顯示效果。

主要用於網頁的製作

雙標籤 (圍堵標籤)

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

內容有加粗效果
單標籤

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

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

換行

hr  橫線 

是一條 顏色為紅色 比較粗的一條橫線

貫穿螢幕的一條橫線

格式 《標籤名 屬性名="屬性值" 第二個屬性="">

頭宣告 

根標籤身體, 主體網頁檔案

使用webstrom 有快捷方式 生成基本架構

html:5 加上 tab 鍵 可以自動生成 基本架構

html:4s

字型加粗

字型傾斜

下劃線刪除線

下標文字

上標文字

字型變大

字型變小

居中 標題標籤

~***

段落標籤 有換行功能 段落之間可以自動隔行

cctv

表示它所包含的文字是乙個更長的單詞或短語的縮寫形式

可以在 標籤中使用全域性的 title 屬性,這樣就能夠在滑鼠指標移動到 元素上時顯示出簡稱/縮寫的完整版本。

特殊符號

字元實體

空格 (分號)

大於號》

>(分號)

小於號<

<(分號)

引號(")

"(分號)

©(分號)

face 字型

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

背景 background   bgcolor 

bgcolor="green"

background="名稱"
text="red"

文字中 沒有新增顏色的

// body 是其他子標籤的父元素, 類似於 父親的角色

如果兒子沒有女朋友, 聽父親給他介紹的

一旦兒子已經有了自己的女朋友, 父親給他介紹其他女朋友的時候, 兒子是不會屈服的

width/ height

title

alt 的替代文字

href 鏈結指向的位置

href 錨鏈結

// 頁面回到頂部功能

1- 設定乙個錨點

2- 回到錨點的鏈結, 將鏈結指向錨點

回到頂部

target 頁面開啟方式
_blank	新頁面開啟

_self 自身頁面開啟

###一年四季 **

建立多個網頁檔案
有序列表

王者榮耀

火影忍者

陰陽師夢幻西遊

爐石傳說

type 專案符號的顯示方式 屬性的值 1 a a i i

start 起始編號

無序列表
type=""  

空心圓 circle

實心圓 disc

小方塊 square

無修飾 none

使用場景 新聞**

專案列表
武俠人物

郭靖黃蓉

演藝圈趙麗穎

謝娜武俠人物

郭靖黃蓉

楊康楊過

it 行業

支音曹偉

繼斌演藝圈 趙麗穎

謝娜 場景 每個班 有多名學生

某公司, 多個專案組, 每個專案組又有多個組員

input 輸入框
input 屬性

含義text

文字password

密碼number

數字框email

郵箱date

日期框button

按鈕submit

提交按鈕

reset

重置按鈕

radio

單選鈕 需要配合name 屬性

checkbox

核取方塊file

檔案選擇框

hidden

隱藏域

非input 屬性

select / option

下拉列表 / 選項

button

按鈕textarea

大文字輸入框

屬性
name 屬性的含義 給表單元素起名稱, 用於區分多個文字框

使用者名稱 : 真實姓名 : - 在單選鈕中 標識那些單選鈕屬於同一組的

value 屬性  (英語  值)

用於指定表單元素初始值

value 放在 button中 用於顯示 按鈕的顯示文字

size

指定表單元素的初始寬度

如果表單型別是 text 或者 password 表單元素大小以字元為單位

如果是其他型別 以畫素為單位

button
點我一下
####拓展知識

預設選中

checked / selected

checked 預設選中

對單選鈕和核取方塊生效 預設選中當前選項

如果是 下拉列表 option 中 必須換成 selected

唯讀和禁用

readonly / disabled

使用者名稱; 

你好

標註 label

男女

表單驗證

placeholder / required

placeholder 提示資訊  h5

使用者名稱;

使用者名稱

required

手機號 pattern 屬性適用於以下 型別:text, search, url, telephone, email 以及 password 。

對比列表

三行兩列的乙個**		

####格式補充

標題 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圖形案例

使用超連結 在窗體上切換

圖形 

在內嵌框架上開啟超連結

src 指向磁碟上的檔案路徑

顏色有三種表示法

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

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

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

知道16進製制 1-9 abcdef

(二進位制 11111111) 換算成為 16進製制 ff

rgb(255,0,0)
rgba(255,0,0,0.5)
0-1 之間表示的是顏色的透明度

前端筆記1 html

html html結構介紹 文件宣告,告訴瀏覽器使用html5的標準解析頁面 根標籤體標籤 給使用者看的內容寫在body裡面 常見的文字標籤 內容標題 h1 h6 獨佔一行,字型加粗,自帶上下間距 段落標籤 p 獨佔一行,自帶上下間距 換行 br 在html頁面中回車不能換行,只能識別乙個空格 水平...

前端單詞1 html 單詞

html 單詞 閱讀 基本標籤 音標釋義 hypertext ha p 超文字mark up m k p 置標 提價幅度 language l gw d 語言head hed 頭meta m t 元語言charset a r set 字符集body b d 身體 主體 storm st m 暴風雨 ...

隨筆1 HTML基礎

1.1 什麼是網頁 我們開啟瀏覽器訪問的一切,都由網頁構成,簡單的說,網頁就是html 1.2 html概念 1.2.1 超文字標記語言 htper text markup language 標準通用標記語言下的乙個應用。html 不是一種程式語言,而是一種標記語言 markup language ...