整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
