web前端之html css基礎

2021-08-19 22:15:20 字數 3066 閱讀 6637

b> 加粗

strong> 加粗

i> 傾斜

em> 傾斜

u> 下劃線

ins> 下劃線

span> 不換行

p> 段落

換行

div> 布局

h1> 一級標題

del> 刪除線

s> 刪除線

href="">

a> 超連結

li>

無序列表

li>

有序列表

專案標題dt>

專案描述dd> 專案列表

dl>

空格字元實體

**:

cellspacing="0"

cellpadding="20">

1td>

2td>

tr>

table>

表單:
action=""

method="post">

文字框:type="text placeholder="

框內的提示文字">

密碼框:type="password">

單選框:type="radio"

name="***">男 type="radio"

name="***">女

核取方塊/多選框:type="checkbox"

checked>讀書 type="checkbox">聽** type="checkbox">lol

上傳檔案:type="file">

文字域:

textarea>

下拉列表:

北京option>

上海option>

廣州option>

select>

type="submit"

value="提交按鈕">

type="button"

value="普通按鈕">

type="reset"

value="重置">

普通按鈕buttonbutton>

form>

div

.......

divdiv>

###2.類選擇器
.blue

......

"blue">...

###3.層級選擇器 結合上面兩種使用,減少命名
.con

.con span

......

"con">

...

通過id名選擇元素,id名稱不能重複

#box

段落

常用的有hover,表示滑鼠懸浮在元素上的狀態

.box

.box:hover

width:200px /* 寬度 */

height:300px /* 高度 */

background:#ccc; /* 背景色 */

font-style:italic /* 傾斜 */

border:1px solid red /* 外邊框為1px的紅色實線 */

border-collage:collapse /* 把小**之間的兩條框線變成一條 */

border-radius /* 把邊框變圓 */

padding:30px /* 內邊距 */

margin:50px /* 外邊距 */

box-sizing:border-box /* 啟動盒子內減模式

margin:0 px auto /* 水平居中 */

float:left/right /* 浮動 */

list-style /* 去除列表前的圓點 */

resize:none /* 設定文字域禁止拖拽 */

outline:none /* 去掉焦點框 */

opacity 設定元素透明度

text-align 設定文字水平對齊方式

text-indent 設定文字首行縮排

color:red /* 顏色 */

font-size:30px /* 字型大小 */

font-weight:bold /* 加粗 */

font-family 設定文字字型

line-height 設定文字行高

text-decoration:none /* 去除下劃線 */

(1)display 設定元素型別及隱藏

1.none 隱藏且不佔位置

2.block 以塊元素顯示

(2)css元素溢位

1.overflow:visible 預設值,超出元素框顯示

2.overflow:hidden 內容被修剪,多餘不可見

3.overflow:scroll 以滾動條顯示

4.overflow:auto 超出會以滾動條顯示

(3)定位

position屬性設定元素定位型別

1.position:relative 生成相對定位元素,佔位

2.position:absolute 生成絕對定位元素,不佔位,瀏覽器參照

3.position:fixed 生成固定定位元素,不佔位,相對瀏覽器,固定不動。

偏移:使用left/right/top/bottom, z-index 設定元素層級

(4)頁面巢狀

src="#"

class=""

name="">

iframe>

前端html css基礎

語義化優點 可讀性更高 2.對搜尋引擎更友好,提高seo 設定box sizing border box後,設定的width是包含了內容 padding border justify content 對齊方式 align items flex wrap align self box item ite...

WEB前端 HTML CSS基礎前十題

結構層 由 html 或 xhtml 之類的標記語言負責建立,僅負責語義的表達。解決了頁面 內容是什麼 的問題。表示層 由css負責建立,解決了頁面 如何顯示內容 的問題。行為層 由指令碼負責。解決了頁面上 內容應該如何對事件作出反應 的問題。ie6盒子模型與w3c盒子模型 文件中的每個元素被描繪為...

Web前端 HTML CSS詳細概述!

1.什麼是html?w3c定義html全稱hypertext markup language是超文字標記語言,用於定義文件內容結構。2.html元素 html是由多個元素組成。每個元素是由 開始標記.內容.結束標記 組成。例 不是所有元素都是由上面三個部分組成,空元素就不是。空元素又叫自閉和元素 單...