HTML及CSS選擇器

• 一、html基本結(jié)構(gòu)
• 二、html標(biāo)簽
  • 1、標(biāo)題標(biāo)簽
  • 2、a標(biāo)簽
  • 3、img標(biāo)簽
  • 4、div和span標(biāo)簽
  • 5、列表標(biāo)簽
  • 6、表格標(biāo)簽
  • 7、form表單
  • 8、select下拉框標(biāo)簽
  • 9、textarea標(biāo)簽
• 三、CSS
  • 1、css樣式引入方式
  • 2、標(biāo)簽嵌套
  • 3、css選擇器

一、html基本結(jié)構(gòu)

html是一種超文本標(biāo)記語言，進(jìn)行網(wǎng)頁頁面的文本編輯
html注釋寫法：

基本結(jié)構(gòu)如下：

我是標(biāo)題

link圖標(biāo)：
標(biāo)題圖標(biāo)：
寫法：

我是標(biāo)題

二、html標(biāo)簽

標(biāo)簽寫法分類：
1、全封閉標(biāo)簽，如

xxx

標(biāo)簽屬性：

xxx

xx:屬性名 ss:屬性值
2、自封閉標(biāo)簽：

1、標(biāo)題標(biāo)簽

-

：表示一級(jí)標(biāo)題到六級(jí)標(biāo)題 我是標(biāo)題公司Asir Bsir

小王

小李

小趙

小
胡

小周

小李

頁面效果：

2、a標(biāo)簽

跳轉(zhuǎn)對(duì)應(yīng)網(wǎng)址的頁面
未訪問之前是藍(lán)色字體，訪問后變紫色

# 要a標(biāo)簽的效果，但不刷新或跳轉(zhuǎn)頁面：
xxx
xxx

錨點(diǎn)：
頁面內(nèi)容進(jìn)行跳轉(zhuǎn)
標(biāo)簽設(shè)置id屬性=值(xx),a標(biāo)簽href屬性的值寫法href=’#xx’,點(diǎn)擊這個(gè)a標(biāo)簽就能跳轉(zhuǎn)到id屬性為xx的那個(gè)標(biāo)簽所在位置

我是標(biāo)題頂部位置 公司potal百度 potalpotal回到頂部

頁面效果：

可通過第二個(gè)按鈕跳轉(zhuǎn)到百度：

3、img標(biāo)簽

img標(biāo)簽：頁面插入圖片
src屬性：圖片路徑 必須寫
alt屬性：圖片加載失敗或者正在加載時(shí)提示的內(nèi)容
title屬性：鼠標(biāo)懸浮時(shí)顯示的內(nèi)容，不是img標(biāo)簽獨(dú)有的
width：設(shè)置圖片寬度(建議用css設(shè)置)
height：設(shè)置圖片高度(建議css設(shè)置)

我是標(biāo)題

頁面效果：

4、div和span標(biāo)簽

沒有任何文本修飾效果：

我是標(biāo)題小王

小李

小文小林

頁面效果：

擴(kuò)展：標(biāo)簽分類
塊級(jí)標(biāo)簽(行外標(biāo)簽)：獨(dú)占一行，h1-h6、p、br、hr、div、ul、li
塊級(jí)標(biāo)簽可以包含內(nèi)聯(lián)標(biāo)簽，以及某些塊級(jí)標(biāo)簽
內(nèi)聯(lián)標(biāo)簽(行內(nèi)標(biāo)簽)：不獨(dú)占一行，img/a/span，只能包含內(nèi)聯(lián)標(biāo)簽，不能包含塊級(jí)標(biāo)簽

5、列表標(biāo)簽

1)ul標(biāo)簽：
寫法：

內(nèi)容1內(nèi)容2......

2)ol標(biāo)簽
寫法：

內(nèi)容1內(nèi)容2......

3)dl標(biāo)簽

無空位內(nèi)容有空位內(nèi)容......

頁面效果：

6、表格標(biāo)簽

可以在網(wǎng)頁中生成表格
寫法：

表頭1表頭2...內(nèi)容1內(nèi)容2...

colspan：橫行合并
rowspan：縱列合并
示例

我是標(biāo)題名稱 年齡 愛好 小王 18 籃球 小李 20 游泳 小王

頁面效果：

7、form表單

action屬性：指定提交路徑，提交到哪里去
form表單標(biāo)簽會(huì)將嵌套在form標(biāo)簽里面的輸入框的數(shù)據(jù)全部提交到指定路徑

input標(biāo)簽 輸入框：
input標(biāo)簽，如果要提交數(shù)據(jù)，一定要寫name屬性

普通文本輸入框 密文輸入框 提交按鈕 觸發(fā)form表單提交數(shù)據(jù)動(dòng)作 重置按鈕 清空輸入內(nèi)容 不會(huì)觸發(fā)form表單提交數(shù)據(jù)的操作 時(shí)間日期輸入框 文件選擇框 純數(shù)字輸入框

單選框：
多選框：

單選框和多選框請(qǐng)務(wù)必加name屬性和value默認(rèn)值
單選和多選value默認(rèn)值可將存儲(chǔ)的數(shù)據(jù)變短

我是標(biāo)簽

歡迎來到xxx公司

用戶名：
密碼：
性別： 女 男
愛好： 籃球 足球 乒乓球 數(shù)字：

頁面效果：

8、select下拉框標(biāo)簽

示例：

我是標(biāo)簽選擇性別：男女
喜歡的明星：明星1明星2明星3

頁面效果：

9、textarea標(biāo)簽

多行文本輸入框

我是標(biāo)簽請(qǐng)輸入內(nèi)容：

頁面效果：

三、CSS

1、css樣式引入方式

第一種：
直接在頭部添加

我是標(biāo)題helloHow are you?

總結(jié)

以上是生活随笔為你收集整理的div独占一行 html_web前端基础-HTML及CSS选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。