HTML及CSS選擇器

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

一、html基本結構

html是一種超文本標記語言，進行網頁頁面的文本編輯
html注釋寫法：

基本結構如下：

我是標題

link圖標：
標題圖標：
寫法：

我是標題

二、html標簽

標簽寫法分類：
1、全封閉標簽，如

xxx

標簽屬性：

xxx

xx:屬性名 ss:屬性值
2、自封閉標簽：

1、標題標簽

-

：表示一級標題到六級標題 我是標題公司Asir Bsir

小王

小李

小趙

小
胡

小周

小李

頁面效果：

2、a標簽

跳轉對應網址的頁面
未訪問之前是藍色字體，訪問后變紫色

# 要a標簽的效果，但不刷新或跳轉頁面：
xxx
xxx

錨點：
頁面內容進行跳轉
標簽設置id屬性=值(xx),a標簽href屬性的值寫法href=’#xx’,點擊這個a標簽就能跳轉到id屬性為xx的那個標簽所在位置

我是標題頂部位置 公司potal百度 potalpotal回到頂部

頁面效果：

可通過第二個按鈕跳轉到百度：

3、img標簽

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

我是標題

頁面效果：

4、div和span標簽

沒有任何文本修飾效果：

我是標題小王

小李

小文小林

頁面效果：

擴展：標簽分類
塊級標簽(行外標簽)：獨占一行，h1-h6、p、br、hr、div、ul、li
塊級標簽可以包含內聯標簽，以及某些塊級標簽
內聯標簽(行內標簽)：不獨占一行，img/a/span，只能包含內聯標簽，不能包含塊級標簽

5、列表標簽

1)ul標簽：
寫法：

內容1內容2......

2)ol標簽
寫法：

內容1內容2......

3)dl標簽

無空位內容有空位內容......

頁面效果：

6、表格標簽

可以在網頁中生成表格
寫法：

表頭1表頭2...內容1內容2...

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

我是標題名稱 年齡 愛好 小王 18 籃球 小李 20 游泳 小王

頁面效果：

7、form表單

action屬性：指定提交路徑，提交到哪里去
form表單標簽會將嵌套在form標簽里面的輸入框的數據全部提交到指定路徑

input標簽 輸入框：
input標簽，如果要提交數據，一定要寫name屬性

普通文本輸入框 密文輸入框 提交按鈕 觸發form表單提交數據動作 重置按鈕 清空輸入內容 不會觸發form表單提交數據的操作 時間日期輸入框 文件選擇框 純數字輸入框

單選框：
多選框：

單選框和多選框請務必加name屬性和value默認值
單選和多選value默認值可將存儲的數據變短

我是標簽

歡迎來到xxx公司

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

頁面效果：

8、select下拉框標簽

示例：

我是標簽選擇性別：男女
喜歡的明星：明星1明星2明星3

頁面效果：

9、textarea標簽

多行文本輸入框

我是標簽請輸入內容：

頁面效果：

三、CSS

1、css樣式引入方式

第一種：
直接在頭部添加

我是標題helloHow are you?

總結

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

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