div独占一行 html_web前端基础-HTML及CSS选择器
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):
寫法:
二、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)簽所在位置
頁面效果:
可通過第二個(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è)置)
頁面效果:
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)簽:
寫法:
2)ol標(biāo)簽
寫法:
3)dl標(biāo)簽
無空位內(nèi)容有空位內(nèi)容......頁面效果:
6、表格標(biāo)簽
可以在網(wǎng)頁中生成表格
寫法:
colspan:橫行合并
rowspan:縱列合并
示例
頁面效果:
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ù)變短
歡迎來到xxx公司
用戶名:密碼:
性別: 女 男
愛好: 籃球 足球 乒乓球 數(shù)字:
頁面效果:
8、select下拉框標(biāo)簽
示例:
我是標(biāo)簽選擇性別:男女喜歡的明星:明星1明星2明星3
頁面效果:
9、textarea標(biāo)簽
多行文本輸入框
我是標(biāo)簽請(qǐng)輸入內(nèi)容:頁面效果:
三、CSS
1、css樣式引入方式
第一種:
直接在頭部添加
總結(jié)
以上是生活随笔為你收集整理的div独占一行 html_web前端基础-HTML及CSS选择器的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【待补】Wireshark+BLE do
- 下一篇: 谷歌浏览器服务器协议url,谷歌浏览器在