整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
注釋：<!-- -->
DOCTYPE：就是告訴瀏覽器，我們要使用什么規范
head：網頁頭部標簽
body：代表網頁主題
標題標簽
段落標簽
換行標簽
水平線標簽
字體樣式標簽
注釋
特殊字符
特殊符號就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意：../ 代表上一級目錄
文本鏈接
<a href="path" target="目標窗口位置">鏈接文本或圖像</a>
圖像鏈接：就是嵌套圖片標簽
頁面間鏈接
錨鏈接
功能性鏈接
塊元素
行內元素
什么是列表：就是一種展示方式
有序列表
無序列表
自定義列表
<dl>
<dt></dt> 標題
<dd></dd> 選項
<dd></dd>
<dd></dd>
</dl>為什么使用表格
基本結構
<table border="1px" 邊框>表格標簽
<tr>
<td></td>列標簽
<td></td>
<td></td>
</tr>行標簽 這代表一行
</table>跨列：使用colspan="夸的列數" <td colspan="4">
跨行：使用rowspan="夸的行數" <td rowspan="4">
視頻元素
音頻元素
元素名 | 描述 |
header | 標題頭部區域的內容(用于頁面或頁面中的一塊區域) |
footer | 標記腳部區域的內容（用于整個頁面或頁面的一塊區域） |
section | web頁面中的一塊獨立區域 |
atricle | 獨立的文章內容 |
aside | 相關內容或應用(常用于側邊欄) |
nav | 導航類輔助內容 |
<iframe src="path" name="mainFrame"></iframe>
表單：form
<form method="post|get" action="result.hetml">
<input />
</form>get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效
post方式提交：比較安全，可以傳輸大文件
表單元素格式
屬性 | 說明 |
type | 指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認為text |
name | 指定表單元素的名稱 必填，用來后臺讀取 |
value | 元素的初試值。type為radio時必須指定一個值 |
size | 指定元素的初始寬度。當type為text時或者password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位 |
maxlength | type為txet或password時，輸入的最大字符數 |
cheaked | type為radio或cheackbox時，指定按鈕是否被選中 |
單選框
多選框
按鈕
<input type="button" name="btn1" value="點擊" />普通按鈕
<input type="image" src ="點擊跳轉的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕下拉框
<select name="列表名稱">
<option value="選項的值" select>中國</option>
<option value="選項的值">中國</option>
<option value="選項的值">中國</option>
<option value="選項的值">中國</option>
<option value="選項的值">中國</option>
</select>
提交的格式就是列表名稱和value文本域
<textarea name="name" cols="列數" rows="行數">文本內容</textarea>文件域
<input type="file" name="files"/>
<input type="button" value="提交"/>郵件驗證
<input type="email" name="youjian">URL
<input type="url" name="url"> 數字驗證
<input type="number" name="num" max="100" min="0" step="10">滑塊
<input type="range" max="100" min="0">搜索
<input type="search" name="search">隱藏域 hidden
<input type="text" id="mark" hidden>只讀 readonly
<input type="text" id="mark" readonly>禁用 disabled
<input type="text" id="mark" disabled>增強鼠標可用性
<label for="mark">點擊</label>
<input type="text" id="mark">為什么要進行表單驗證：緩解服務器壓力、保證數據安全
提示信息
非空判斷
正則表達式驗證
高級驗證使用js
SS網格布局是一組相交的水平線和垂直線，它定義了網格的行和列（可以理解為表格）。我們可以將網格元素放置在與這些列和行相關的位置上，是二維的布局系統，可以用在布局頁面主要區域或小型用戶界面元素；
特點:
這篇內容主要探討其中一個特點：可以根據行號、行名或者標定一個網格區域來擺放網格項；
網格軌道（grid track）是網格上任意兩條相鄰線之間的空間。下圖顯示了一個突出顯示的軌道——這是網格中第一行的軌道。
當我們定義網格時，我們先定義的是網格軌道，而不是網格線；網格布局會為我們創建編號的網格線來讓我們來擺放每一個網格元素。
* {
box-sizing: border-box;
}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper>div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
/* 3列軌道 列寬自動計算*/
grid-template-columns: repeat(3, 1fr);
/* 3行軌道 行高100px*/
grid-template-rows: repeat(3, 100px);
} <div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
<div class="box4">Four</div>
</div>如下圖三列三行的網格，行從上往下：線號1、2、3、4， 從下往上：-1、-2、-3、-4；列從左往右：1、2、3、4，從右往左:-1、-2、-3、-4
理解了網格的線，那么怎么基于線來控制元素在網格的位置？
例如控制One元素，想要最左開始占一個列軌道，占3條行軌道
.box1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
}One元素，最左開始，占第一列軌道grid-column-start: 1;grid-column-end: 2;，grid-row-start從第1行線號開始，延伸至第4行號結束grid-row-end;Four元素就會自動在行軌道下一個空的單元格，對其他3個元素同樣進行控制擺放：
.box1 {
<*列1號線開始,2號線結束，行1號線開始，4號線結束*>
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
}
.box2 {
<*列3號線開始,4號線結束，行1號線開始，3號線結束*>
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
.box3 {
<*列2號線開始,3號線結束，行1號線開始，2號線結束*>
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.box4 {
<*列2號線開始,4號線結束，行3號線開始，4號線結束*>
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}4個元素都各自有設置線編號來實現位置擺放，網格布局的一個優勢是：無需給元素周圍加上 margin 來阻止文檔流自動填補空白，就能實現設計中的留白區域；
grid-column-start,grid-column-end,grid-row-start,grid-row-end CSS代碼太多了，還可以簡寫為 grid-column 和 grid-row，
.box1 {
grid-column: 1 / 2;
grid-row: 1 / 4;
}
.box2 {
grid-column: 3 / 4;
grid-row: 1 / 3;
}
.box3 {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.box4 {
grid-column: 2 / 4;
grid-row: 3 / 4;
}如果元素只延伸一個軌道的話，可以省略grid-column-end、grid-row-start,只寫grid-column、grid-row，元素默認延伸一個軌道
.box1 {
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 4;
}
.box2 {
grid-column-start: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.box3 {
grid-column-start: 2;
grid-row-start: 1;
}
.box4 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 3;
}屬性名和值的簡寫如下:
.box1 {
grid-column: 1;
grid-row: 1 / 4;
}
.box2 {
grid-column: 3;
grid-row: 1 / 3;
}
.box3 {
grid-column: 2;
grid-row: 1;
}
.box4 {
grid-column: 2 / 4;
grid-row: 3;
}元素擺放效果是一樣的：
有沒有再進一步簡寫，來實現相同的元素擺放呢？還可以只定義一個屬性grid-area；
使用這個屬性前，先看看寫法：
.box1 {
grid-area: 1 / 1 / 4 / 2;
}怎么理解這個One元素grid-area值呢？順序看起來有點奇怪，聯想對比padding值，元素的上、有、下、左，先看看grid-area值的順序分別代表啥意思
grid-area: 行起始(inline-start)/ 塊起始(block-start)/ 行結束(inline-end)/ 塊結束(block-end)
One元素列1號線開始,2號線結束，行1號線開始，4號線結束。值的順序和padding值不一樣，因為與CSS書寫模式規范中的書寫方向有關系。 書寫流關聯的4個方向：
grid-area: grid-row-start / grid-column-start / grid-row-end/ grid-column-end
同樣可以簡寫：
.box1 {
grid-area: 1 / 1 / 4;
}也可以從行和塊結束線開始反方向計數
.box1 {
grid-area: -1 / -1 / -4;
}使元素跨越整條軌道.如果一個元素是占據一行的，擁有從開始計數和從末尾計數這兩種定位方法使得使一個元素跨越整個網格變得很方便，例如Four元素
.box4 {
grid-column: 1 / -1;
}間距只出現在網格軌道與軌道之間，它們并不會出現在網格容器的四周。 給網格容器添加行間距row-gap
.wrapper {
...
row-gap: 1em;
}.wrapper {
...
row-gap: 1em;
column-gap: 1px;
}行間距row-gap，列間距column-gap:
簡寫：
.wrapper {
...
gap: 1em / 1px;
}從基于線定位的角度來說，間距的行為就像是使基線變得特別寬。
除了”起始線與結束線“的定位方法，你還可以使用”起始線與跨越軌道數量“的定位方法,
.box1 {
grid-column: 1;
grid-row: 1 / span 3;
}
.box2 {
grid-column: 3;
grid-row: 1 / span 2;
}
.box3 {
grid-column: 2;
grid-row: 1;
}
.box4 {
grid-column: 2 / span 2;
grid-row: 3;
}One元素grid-row: 1 / span 3;理解為從第1號行線開始，跨越3條行軌道，截止在第4號行線；
Two元素grid-row: 1 / span 2;理解為從第1號行線開始，跨2條行軌道，截止在第3號行線；
Four元素grid-column: 2 / span 2;理解為從第1號列線開始，跨2條列軌道，截止在第4號列線；
從確定的線編號開始，跨越指定數量的行軌道；
例1
.box1 {
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: span 3;
}例2
.box1 {
grid-column-start: 1;
grid-row-start: span 3;
grid-row-end: 4;
}例1、例2 兩個都是會創建相同的網格，One元素在1列軌道，占3條行軌道；
例1:元素就會從 1 號線開始，跨越 3 條線，到 4 號線結束
例2:元素會從指定的線往上跨越 3 條線;
例3
.box1 {
grid-column-start: 1;
grid-row-start: span 3;
grid-row-end: span 3;
}例3:與例2 相同的行為;
當開始和結束都使用了關鍵字時，只有grid-row-start起效；
例4
.box1 {
grid-column-start: 1;
grid-row-start: span 3;
grid-row-end: span 2;
}例4
例5
.box1 {
grid-column-start: 1;
grid-row-start: span 2;
grid-row-end: span 3;
}例6
.box1 {
grid-column-start: 1;
grid-row-start: span 1;
grid-row-end: span 3;
}例6
認識網格基于線來擺放元素的使用，屬性grid-column、grid-row的寫法，以及元素根據行號，多種方式實現跨行跨列的布局；
HTML簡介
HTML是用來描述網頁的一種語言，它是一種超文本標記語言，由一套標記標簽組成，在制作網頁時，HTML使用標記標簽來描述網頁。
發展史
HTML：Hyper Text Markup Language超文本標記語言
超文本標記語言—在1993年6月互聯網工程工作小組工作案發布（并非標準）
HTML2.0—1995年11月作為RFC1866發布，在RFC2854于2000年6月發布之后被宣布過時。
HTML3.2—1996年1月14日，W3C推薦標準
HTML4.0—1997年12月18日，W3C推薦標準
HTML4.01（微小改進）—1999年12月24日，W3C推薦標準，2000年5月15日發布基本嚴格的HTML4.01語法，是國標標準化組織和國際電工委員會的標準
XHTML1.0—發布于2000年1月26日，是W3C推薦標準，后來經過修訂于2002年8月1日重新發布
XHTML1.1—2001年5月31日發布
XHTML2.0是W3C的工作草案，由于改動過大，學習這個新技術的成本過高而最終胎死腹中，因此，現在最常用的還是XHTML1.0標準。
目前最新的版本為HTML5，它是2004年被提出，2007年被W3C接納并成立新的HTML工作團隊，
2008年1月22日公布HTML5第一份正式草案，
2012年12月17日HTML5規范正式定稿，
2013年5月6日，HTML5.1正式草案公布。
HTML 5作為最新版本，提供了一些新的元素和一些有趣的新特性，同時也建立了一些新的規則。這些元素、特性和規則的建立，提供了許多新的網頁功能，如使用網頁實現動態渲染圖形、圖表、圖像和動畫，以及不需要安裝任何插件直接使用網頁播放視頻等。目前企業開發中也在增大使用HTML5的力度
HTML的優勢
h1~h6
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題標簽</title> </head> <body> <h1>這是一級標題</h1> <h2>這是二級標題</h2> <h3>這是三級標題</h3> <h4>這是四級標題</h4> <h5>這是五級標題</h5> <h6>這是六級標題</h6> <h7>這是七級標題</h7>效果怎么顯示不出來呢？？？ <h1>這是一級標題</h1> </body> </html> |
瀏覽器預覽效果
p標簽為段落標簽，br標簽為換行標簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落和換行標簽</title> </head> <body> <h1>北京歡迎你</h1> <p>北京歡迎你，<br>為你開天辟地</p> <p>北京歡迎你，<br/>有有勇氣就會有奇跡</p> </body> </html> |
瀏覽器預覽效果圖
hr標簽為水平線標簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平線標簽</title> </head> <body> <h1>漂洋過海來看你</h1> <hr> <p>為你我用了半年的積蓄，<br>漂洋過海來看你</p> <hr/> </body> </html> |
瀏覽器預覽效果圖
em為斜體標簽，strong為字體加粗標簽
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字體樣式標簽</title> </head> <body> <h1>漂洋過海來看你</h1> <hr> <p>為你我用了<em>2017</em>半年的<strong><em>積蓄</em></strong>，<br> <em><strong>漂洋過海</strong></em>來看你 </p> <hr/> </body> </html> |
瀏覽器預覽效果圖
注釋使用：<!--被注釋的內容-->
大于號：> great than的縮寫
小于號：< less than的縮寫
雙引號：""
版權符號：©
空格：
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注釋和特殊符號</title> </head> <body> <pre> 注釋使用：<!--被注釋的內容--> 大于號：> great than的縮寫 小于號：< less than的縮寫 雙引號："" 版權符號：© 空格： </pre> <!-- 我是被注釋的內容，我只留給你們看，不會在頁面上顯示 --> 5<10>6 <br> "我是被雙引號引起來的內容"<br> ©自由職業開發者公司<br> 我是 測試 空 格的 </body> </html> |
瀏覽器預覽效果圖
以上就是HTML的簡單入門，后續帶大家更深入的了解HTML
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
