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是由多個元素組成。每個元素是由 開始標記.內容.結束標記 組成。例 不是所有元素都是由上面三個部分組成,空元素就不是。空元素又叫自閉和元素 單...