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

HTML

前端笔记1 HTML基础

發布時間：2024/1/8 HTML 40 豆豆

生活随笔收集整理的這篇文章主要介紹了前端笔记1 HTML基础小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

概念
- html 超文本標記語言
- 作用
html 基本用法
- 標簽入門
- - 標簽語法
  - 標簽分類
  - - 雙標簽 (圍堵標簽)
    - 單標簽
- 屬性入門
- html 基本構架
- 簡單標簽
- - 舉例常見標簽
  - 標題標簽的四個特點
  - 其他標簽
  - 注釋標簽
  - 特殊符號
- 復雜標簽
- - font 字體標簽
  - body 主體標簽
  - img標簽
  - a 超鏈接標簽
  - - href 鏈接指向的位置
    - href 錨鏈接
    - target 頁面打開方式
- 復合標簽
- - 列表
  - - 有序列表
    - 無序列表
    - 項目列表
  - 表單
  - - input 輸入框
    - 屬性
    - button
    - - 默認選中
      - 只讀和禁用
      - 標注 label
      - 表單驗證
  - 表格
  - - 案例
  - iframe 內嵌框架
  - - 使用超鏈接在窗體上切換
  - frame 框架集窗口
- html 5 多媒體標簽
- - 音頻
  - 視頻
顏色表示法
- 英文表示
- 十六進制表示法
- rgb 表示法
- rgba 表示法
- 使用軟件獲取屏幕上的任何顏色

概念

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

簡單標簽

舉例常見標簽

標題標簽的四個特點

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

其他標簽

<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 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	大文本輸入框

屬性

name 屬性的含義給表單元素起名稱, 用于區分多個文本框用戶名 : <input type="text" name="username"> 真實姓名 : <input type="text" name="realname"> - 在單選鈕中標識那些單選鈕屬于同一組的 value 屬性 (英語值) 用于指定表單元素初始值 value 放在 button中用于顯示按鈕的顯示文字 size 指定表單元素的初始寬度如果表單類型是 text 或者 password 表單元素大小以字符為單位如果是其他類型以像素為單位

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

<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>  用戶名 <input type="text" name="user" required> <br><br> required  手機號 <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 框架集窗口

html 5 多媒體標簽

音頻

視頻

<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基础的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：在 Google Play 上保护您的游
下一篇：三十六、前端基础 CSS