1、html標簽是用來給文本添加語義的,而不是用來修飾文本的;
2、<meta charset="GBK">指定字符集(GB2312、UTF-8),html保存和指定字符一樣,才不會亂碼;
3、<!DOCTYPE html> DTD文檔申明告訴瀏覽器我用的什么協議來寫的,不是html標簽;
4、webstorm快捷鍵大全:https://www.cnblogs.com/yeminglong/p/5995421.html
1、h、p 和 hr 標簽
2、注釋:<!-- -->
3、圖片:<img src=" ">
4、換行:<br> 用于內容未完的換行
5、跳轉:<a href=" "></a>
6、base 標簽:<base target="_self ">
7、假鏈接:點擊不會跳轉
8、錨點:<a href="#id值"><\a>
1、無序列表(!)
2、有序列表(*)
3、定義列表
?
1、格式
?
2、屬性
(1)寬高
(2)水平和垂直對齊(align 和 valign)
(3)內邊距和外邊距(cellpadding 和 cellspacing)
(4)細線表格
3、表格的其他標簽
(1)caption:表格的標題標簽,必須寫在 table 內而且需緊跟 table
(2)th:th 和 td 同級,th 有加粗的效果
4、表格的結構
(1)組成:caption 標題、thead 表頭、tbody 主體、tfoot 尾部
(2)說明:
5、單元格的合并
(1)水平方向:td 屬性 colspan = "2";
(2)垂直方向:td 屬性 rowspan = "2";
1、格式
?
2、input 標簽
(1)type = text:
(2)password:
(3)radio:互斥要設置 name 相同;默認選中 checked
(4)checkbox:選中 checked
(5)button:
(6)image:
(7)reset:value 修改標題
(8)submit:
(9)hidden:
-----------------------------------------------------------------------------------------------------------------------
*相關標簽:
?
3、非 input 標簽
(1)select
?
(2)textarea
4、練習
(1)表單標簽除了 button 外都可以用 value 來指定提交的值
(2)表單添加邊框可以在 form 中添加 fieldset 來實現
1、video 標簽
(1)格式:<video src=" " autoplay="autoplay"></video>;
(2)屬性:controls(控制條)poster(海報)loop(循環)preload(預加載,與autoplay沖突)muted(靜音)width/height;
(3)另一種 video 格式:解決瀏覽器的兼容
?
(4)讓所有的瀏覽器支持 video 標簽:通過 js 框架來實現
2、audio 標簽
(1)使用基本和 video 一樣,屬性只有寬高和 poster 不能用,也是兩種格式
3、details 和 summary 標簽
(1)格式:
?
4、marquee標簽(跑馬燈效果)
(1)w3c 不推薦,但是瀏覽器的支持好
(2)屬性:direction(方向)scrollamount(滾動的速度)loop(滾動次數,默認-1)behavior(滾動類型 slide)
(3)廢棄的標簽:<br><hr><font><b>加粗<u>下劃線<i>斜體<s>刪除線(無語義)
替代的標簽:<strong><ins><em><del>(加入了語義)
5、字符實體
(1) ;空格 <;>; ©;版權符號
(2)理解:html 占用了的不顯示的特殊字符用另外的代替符號表示,使他們正常在 html 頁面上顯示
eta介紹
icon網頁圖標
表格
表單
設置編碼
<meta charset="utf-8">
設置關鍵字
<meta name="keywords" content="html, java, 前端" />
設置網頁描述
<meta name="description" content="這是一個簡單的html頁面" />
網頁重定向
<meta http-equiv="refresh" content="3; http://www.baidu.com">
作者
<meta name="author" content="小火柴" />
設置蜘蛛爬取狀態
<meta name="robots" content="all|none|index|follow|noindex|nofollow">all 文件將被檢索,且頁面上的連接可以被查詢
<link rel="icon" href="test.ico"/>
<table border="1" width="500" height="300" cellspacing="0" cellpadding="10" bgcolor="#cfcfcf" align="centers">
表格的標準結構
<table border="1" width="500" height="300">
表頭
<table border="1" width="500" height="300">
合并
<table border="1" width="500" height="300">
表格的標題 直接在td的地方換成th 邊框的顏色
<table border="1" width="500" height="300" bordercolor="red">
內容的垂直對其方式 在td中添加屬性 valign="top" top 頂部 middle 居中 bottom 靠下 細線的表格
<table bgcolor="green" width="500" height="300" cellspacing="1">
表格小案例 -- 課程表
<table width="300" height="250" bgcolor="green" cellspacing="1" align="center">
表單的作用的就是用來收集信息
表單域
<form action="" method="get">
輸入框屬性簡介
<input type="text" name="userName" maxlength="8" readonly="readonly" value="admin" disabled="disabled">
單選框
<input type="radio" name="sex" value="男" checked="checked" />男
下拉列表
<select multiple="multiple">
多選框
<input type="checkbox" name="play" value="籃球" checked="checked">籃球
多行文本框 文本域
<textarea cols="30" rows="10"></textarea>cols 輸入字符寬
文件上傳組件
<input type="file" name="myfile">
文件的提交
<input type="submit" value="提交">
按鈕
<input type="button" value="我的第一個按鈕"/>
圖片提交按鈕
<input type="image" src="submit.jpg" />
重置按鈕
<input type="reset" value="重置" />
信息分組
<fieldset>
h5表單控件
<!-- 網址控件 --><input type="url"/><!-- 日期控件 --><input type="date" /><!-- 時間控件 --><input type="time" /><!-- 郵件控件 --><input type="email" /><!-- 數字控件 --><input type="number" step="5"/><!-- 滑塊控件 --><input type="range" step="5" value="10"/>
識點1:CSS3
CSS3是CSS語言的最新版本,旨在擴展CSS2.1,它增加了許多新特性與新的布局方式。
為了加快那些已經確認沒有問題的特性的標準化速度,CSS3劃分了一系列相互獨立的模塊,按照各自進度來進行標準化。因此現在標準CSS包括修訂后的CSS2.1以及完整模塊對它的擴充,模塊的level數并不一致。W3C會定期發布snapshots(快照),列出CSS2.1和成熟的模塊。
有的CSS模塊已經十分穩定,使用時也不必添加前綴,其狀態為CSSWG規定的三個推薦品級之一:候選推薦、建議推薦或推薦。不穩定的特性應以瀏覽器引擎為前綴并謹慎使用。
知識點2:顏色模塊Level3
1.增加opacity屬性,用于指定元素透明度,可為0.0~1.0。被應用元素和其子元素會被當成一個整體看待,具有相同透明度,即便子元素有不同opacity值;
2.可使用hsl()、hsla()、rgba()、rgb()來創建color值;
3.transparent顏色目前是真彩色而且是rgba(0, 0, 0, 0.0)的別名。
知識點3:選擇器Level3
1.增加子串匹配的屬性選擇器,E[attribute^="value"],E[attribute$="value"],E[attribute*="value"];
2.增加新的偽類,如:enabled,:disabled,:checked,:nth-child,:nth-of-type,:empty,:not等;
3.偽元素使用兩個冒號而不是一個冒號來表示;
4.新的普通兄弟選擇器~,用于選擇“某元素后所有同級的指定元素”。
知識點4:媒體查詢
使用@media媒體查詢,可以針對不同的設備定義不同的樣式。其包含一個可選的媒體類型和零或多個媒體特性表達式(表達式要用括號),語法為:@media mediatype and|not|only (media feature) {CSS-Code;},也可以在link中使用media="mediatype and|not|only (media feature)"屬性來針對不同媒體使用不同樣式表。
可以使用not(對整個媒體查詢取反)、and(同時滿足)和only(防止老舊的瀏覽器不支持帶媒體屬性的查詢而應用到給定的樣式)來構建復雜的媒體查詢。若使用了not或only則必須指定一個媒體類型。也可以將多個媒體查詢以逗號分隔放在一起,相當于or。
常見媒體查詢有:
//寬高比為16:9或者16:10的寬屏設備
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { CSS-Code }
//向顯示在設備最大寬度800px的屏幕上的文檔應用樣式表
<link rel="stylesheet" media="screen and (max-device-width: 800px)" />
//設備處于豎屏模式
@media all and (orientation: portrait) { CSS-Code }
//可視區域的寬度在500到800px之間的屏幕
@media screen and (min-width: 500px) and (max-width: 800px) { CSS-Code }
知識點5:背景與邊框模塊Level3
1.支持多背景圖片,例:background-image:url(bg_flower.gif),url(bg_flower_2.gif);
2.新增屬性background-size規定背景圖片的尺寸,例:background-size:63px 100px;
3.新增屬性background-origin規定背景圖片的定位區域,例:background-origin:content-box;
4.支持圓角邊框:border-radius,該屬性是一個簡寫屬性,也可分別設置四個屬性:border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。例:border-radius:25px;
5.支持圖片創建邊框:border-image,該屬性是一個簡寫屬性,用于設置border-image-source圖片路徑、border-image-slice圖片邊框向內偏移、border-image-width圖片邊框寬度、border-image-outset圖像區域超出邊框的量、border-image-repeat是否平鋪鋪滿或拉伸。例:border-image:url(border.png) 30 30 round;
6.支持元素陰影:box-shadow。例:box-shadow: 10px 10px 5px #888888;前兩個值必須,為水平陰影與垂直陰影的位置。
知識點6:值和單位模塊Level3
1.initial(最初值)和inherit(從父元素繼承值)關鍵字能被用于任意CSS屬性中;
2.定義了新的相對字體長度單位:rem和ch。rem相對于html的font-size,而1ch=1英文=1數字=0.5漢字。
3.定義了相對視口長度單位:vm,vh,vmax和vmin。vw為可視區域寬度,總寬度為100vw,vh為可視區域高度,總高度100vh,vmin在可視區域寬度和高度取小,vmax則取大。
知識點7 . 盒模型
7.01 、盒子模型的概念
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子,也就是一個盛裝內容的容器。每個矩形都由元素的內容,內邊距(padding),邊框(border)和外邊距(margin)組成。
a、網頁就是多個盒子嵌套排列的結果
b、內邊距出現在內容區域的周圍,當給元素添加背景色或背景圖像時,該元素的背景色或背景圖像也將出現在內邊距中
c、外邊距是該元素與相鄰元素之間的距離
d、如果給元素定義邊框屬性,邊框將出現在內邊距和外邊距之間
注意:雖然盒子模型擁有內邊距,邊框,外邊框,寬和高這些基本屬性,但是并不是要求每個元素都必須定義這些屬性。
2 . 邊框屬性
border:設置元素的邊框(width stylecolor)/四邊寬度,四邊樣式,四邊顏色
border-width:設置元素邊框的寬度、像素值
border-style:設置元素邊框的樣式 none:無(默認)/solid(單實線)/dashed(虛線)/dotted(點線)/double(雙實線)
border-color:設置元素邊框的顏色
7.01、單獨設置元素上邊框
border-top :寬度/樣式/顏色
border-top-width :寬度
border-top-style :樣式
border-top-color:顏色
7.02、單獨設置元素右邊框
border-right:寬度/樣式/顏色
border-right-width:寬度 border-right-style:樣式 border-right-color:顏色
7.03、單獨設置元素的下邊框
border-bottom:寬度/樣式/顏色
border-bottom-width:寬度
border-bottom-style:樣式
border-bottom-color:顏色
7.04、單獨設置元素的左邊框
border-left:寬度/樣式/顏色
border-left-width:寬度
border-left-style:樣式
border-left-color:顏色
7.05、綜合設置邊框
像border,border-top等這樣,能夠一個屬性定義元素的多種樣式,在CSS中稱之為復合屬性。
常用的復合屬性有font、border、margin、padding和background等。
復合屬性可以簡化代碼,提高頁面的允許速度,但是如果只有一項值,最好不要用復合屬性,以免樣式不被兼容。
Tips:
a. 表單的邊框通常改為0;
Border:0 none;//兼容所有瀏覽器
b. 表格的細線邊框
Table{border-collapse:collapse;}
c. 輪廓(鏈接有虛線和文本框有藍色邊框)
Outline-style:none;
Padding屬性用于設置內邊距,也是復合屬性,相關設置如下:
Padding-top:上內邊距
Padding-right:右內邊距
Padding-bottom:下內邊距
Padding-left:左內邊距
Padding:上內邊距、右內邊距、下內邊距 、左內邊距
內邊距是享有背景色的
7.06、外邊距屬性
Margin屬性用于設置外邊框,也是復合屬性,相關設置如下:
Margin-top:上外邊距
Margin-right:右外邊距
Margin-bottom:下外邊距
Margin-left:左外邊距
Margin:上外邊距/右外邊距/下外邊距/左外邊距
Margin相關屬性的值,以及符合屬性margin取1~4個值得情況與padding相同
外邊距可以使用負值,使相鄰元素重疊
對塊元素應用寬度屬性width,并將左右的外邊距都設置為auto,可使塊級元素水平居中,實際工作中常用這種方式進行網頁布局,實例代碼如下:
.header{width:960px;margin:0 auto};
為了更方便地控制網頁中的元素,制作網頁時,可使用如下代碼清除元素的默認內外邊距:
*{padding:0 /*清除內邊距*/
Margin:0; /*清除外邊距*/}
*請認真填寫需求信息,我們會在24小時內與您取得聯系。