整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML 超文本標記語言（英語：HyperText Markup Language）是一種用于創建網頁的標準標記語言。
【注】對于中文網頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現亂碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>頭條</title>
</head>
<body>
<h1>標題1</h1>
<p>段落1</p>
</body>
</html>
//實例解析
/**DOCTYPE 聲明了文檔類型
位于標簽 <html> 與 </html> 描述了文檔類型
位于標簽 <body> 與 </body> 為可視化網頁內容
位于標簽 <h1> 與 </h1> 作為一個標題使用
位于標簽 <p> 與 </p> 作為一個段落顯示 **/html在瀏覽器顯示內容區
HTML 文本相關標簽
<!--特點: 字體加粗 獨占一行 自帶上下間距-->
<h1 align="center">內容標題1</h1>
<h2 align="right">內容標題2</h2>
<h3>內容標題3</h3>
<h4>內容標題4</h4>
<h5>內容標題5</h5>
<h6>內容<br>標題6</h6>
<hr>
<!--段落標簽p 特點: 獨占一行 自帶上下間距-->
<p>段落1</p>
<p>段落2</p><p>段落3</p>
加粗<b>標簽</b>
斜體<i>標簽</i>
下劃線<u>標簽</u>
刪除線<s>標簽</s>
<sub> 下標</sub>
<sup> 上標</sup>HTML 列表標簽
<!--無序列表-->
<ul>
<li>貂蟬</li>
<li>孫尚香</li>
<li>孫悟空</li>
<li>豬八戒</li>
<li>劉禪</li>
</ul>
<!--無序、有序列表-->
<ul>
<li>涼菜
<ol>
<li>拍黃瓜</li>
<li>涼皮</li>
</ol>
</li>
<li>炒菜
<ol>
<li>宮保雞丁</li>
<li>辣椒小炒肉</li>
</ol>
</li>
</ul>HTML圖片標簽
1）相對路徑: 訪問站內資源
圖片和頁面在同級目錄: 直接寫圖片名
圖片在頁面的上級目錄: ../圖片名
圖片在頁面的下級目錄: 文件夾名/圖片名
2）絕對路徑: 訪問站外資源, 圖片盜鏈, 有找不到圖片的風險
①像素
②上級元素百分比
<!--alt: 當圖片不能正常顯示時 顯示的文本-->
<!--title: 圖片標題-->
<img src="aa.jpg" alt="這是個美女圖片">
<img src="../b.jpg" title="這是標題" alt="">
<!--width/height-->
兩種賦值方式: 1. 像素 2. 上級元素的百分比
只設置寬度時 高度會自動等比例縮放-->
<img src="abc/c.jpg" width="50" alt="">
<img src="abc/c.jpg" width="50%" alt="">
<img src="https://www.baidu.com/e47f5058f84a655.png" alt="">HTML超鏈接a
<!--超鏈接-->
<a id="top" href="http://www.baidu.com">超鏈接1</a>
<a href="day01.html">超鏈接2</a>
<a href="a.jpg">超鏈接3</a>
<a href="http://www.celinf.cn"><img src="a.jpg" width="100"></a>
<a href="#top">回到頂部</a>HTML表格table
<!--表格一 -->
<table border="1">
<tr>
<td colspan="2">1-1</td><td rowspan="2">1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td><td>2-2</td>
</tr>
<tr>
<td colspan="2">3-2</td>
</tr>
</table>
<!--表格二 -->
<table border="1">
<caption>購物車</caption>
<tr>
<th>編號</th><th>商品名</th><th>價格</th>
</tr>
<tr>
<td>1</td><td>小米12 pro</td><td>5000</td>
</tr>
<tr>
<td>2</td><td>華為電視</td><td>4000</td>
</tr>
<tr>
<td>總價:</td><td colspan="2">9000元</td>
</tr>
</table>HTML表單form
<form action="http://www.baidu.com" method="get">
<!--maxlength最大字符長度 value設置默認值 readonly只讀-->
用戶名:<input type="text" name="username" maxlength="5" value="abc" readonly ><br>
密碼:<input type="password" name="password"><br>
<!--value是單選框必須添加的屬性 否則提交on checked默認選中-->
性別:<input type="radio" name="gender" value="m" id="r1">
<label for="r1">男</label>
<input type="radio" name="gender" checked value="w">女<br>
<!--多選框-->
興趣愛好:<input type="checkbox" name="hobby" value="cy">成員
<input type="checkbox" name="hobby" checked value="hj">環境
<input type="checkbox" name="hobby" value="tt">團體<br>
<!--日期-->
生日:<input type="date" name="birthday"><br>
<!--文件-->
文件:<input type="file" name="pic"><br>
所在地:
<!--value設置提交的內容 selected默認選中-->
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz" selected>廣州</option>
</select><br>
<input type="submit" value="注冊">
</form>HTML分區標簽
CSS 層疊樣式表（Cascading Style Sheet）
作用: 美化頁面(好比裝修)
如何在HTML頁面中添加CSS樣式代碼三種引入方式:
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--內部樣式-->
<style>
h2{color: blue}
</style>
<!--引入外部的css樣式文件-->
<link rel="stylesheet" href="my.css">
</head>
<body>
<h1 style="color: red">內聯樣式1</h1>
<h1 style="color: red">內聯樣式2</h1>
<h2>內部樣式1</h2>
<h2>內部樣式2</h2>
<h3>外部樣式1</h3>
<h3>外部樣式2</h3>選擇器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id選擇器*/
#p1{color: red}
/*類選擇器*/
.c1{color: yellow}
/*分組選擇器*/
h4,#p1,.c1{background-color: blue}
/*屬性選擇器*/
input[type="text"]{color: red}
/*任意元素選擇器*/
/*邊框: 粗細 樣式 顏色*/
*{border: 1px solid purple}
</style>
</head>
<body>
<input type="text">
<input type="password">
<p id="p1">蘋果</p>
<p class="c1">香蕉</p>
<p>橘子</p>
<h3>冰箱</h3>
<h3 class="c1">洗衣機</h3>
<h3>電視機</h3>
<h4>張三</h4>Idea快捷鍵
學習記錄，如有侵權請聯系刪除。
程序員web前端分享HTML基本結構和基本語法
HTML基本結構
HTML的基本語法
1、<常規標記>
<標記 屬性=“屬性值” 屬性=“屬性值”></標記>
標記也可叫標簽或叫元素
例如：<head></head>
2.空標記
<標記 屬性=“屬性值” />
例如：<meta charset=”utf-8”>
說明：
1.寫在<>中的第一個單詞叫做標記，標簽，元素。
2.標記和屬性用空格隔開，屬性和屬性值用等號連接，屬性值必須放在“”號內。
3.一個標記可以沒有屬性也可以有多個屬性，屬性和屬性之間不分先后順序。
4.空標記沒有結束標簽，用“/”代替。
五、HTML常用標記
1、文本標題（h1-h6）
<h1>LOGO</h1>
<h2>二級標題</h2>
<h3>三級標題H3</h3>
<h4>四級標題H4</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
注：文本標題標簽自帶加粗，有自己的文本大小，并且獨占一行，有默認間距
2、段落文本(p)
<p>段落文本內容</p>
標識一個段落(段落與段落之間有段間距)
3、空格
所占位置沒有一個確定的值,這與當前字體字號都有關系.
4、換行(br)
<br />
換行是一個空標記(強制換行)
5、水平線
<hr />空標記
6、加粗有兩個標記
A、<b>加粗內容</b>只是顯示加粗
B、<strong>強調的內容</strong>突出的文本
7、傾斜
<em>強調文本</em>
<i>傾斜文本</i>
8、 擴展
<u>文本</u>下劃線
<del>文本</del>刪除線
<s>文本</s>刪除線
<sub></sub>下標
<sup></sup>上標
9、列表(ul,ol,dl)
HTML中有三種列表分別是：無序列表，有序列表，自定義列表
*無序列表
無序列表組成：
<ul>(unordered list)
<li></li>
<li></li>
．．．．．．
</ul>
*有序列表
有序列表組成：
<ol>(ordered list)
<li></li>
<li></li>
．．．．．．
</ol>
*自定義列表
<dl>(definition list)
<dt>名詞</dt>
<dd>解釋</dd>
(definition description)
．．．．．．
</dl>
知識擴展2----有序列表的屬性
1)、type:規定列表中的列表項目的項目符號的類型
語法：<ol type="a"></ol>
1 數字順序的有序列表（默認值）（1, 2, 3, 4）。
a 字母順序的有序列表，小寫（a, b, c, d）。
A 字母順序的有序列表，大寫（A,B,C,D)
i 羅馬數字，小寫（i, ii, iii, iv）。
I 羅馬數字，大寫（I, ii, iii, iv）。
2)、start 屬性規定有序列表的開始點。
語法：<ol start="5"></ol>
10、插入圖片
<img src="目標文件路徑及全稱" alt="圖片替換文本" title="圖片標題" width="寬度" height="高度"/>
注:所要插入的圖片必須放在站點下
title的作用:圖片的標題； 在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，HTML的絕大多數標簽都支持title屬性，title屬性就是專門做提示信息的
alt的作用:提示文本 必寫；alt屬性是在你的圖片因為某種原因不能加載時在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方。（優化圖片的）
*相對路徑的寫法：
1)當當前文件與目標文件在同一目錄下，直接書寫目標文件文件名+擴展名；<img src=”q12.jpg”/>
2)當當前文件與目標文件所處的文件夾在同一目錄下，寫法如下：
文件夾名/目標文件全稱+擴展名；<img src=”images/q12.jpg”/>
3)當當前文件所處的文件夾和目標文件所處的文件夾在同一目錄下，寫法如下：
../目標文件所處文件夾名/目標文件文件名+擴展名；
<img src=”../images/q12.jpg”/>
11、超鏈接的應用
語法：
<a href="目標文件路徑及全稱/連接地址" title="提示文本">鏈接文本/圖片</a>
<a href="#"></a>空鏈接
屬性：target:頁面打開方式，默認屬性值_self。
屬性值：_blank 新窗口打開
<a href="#" target="_blank">新頁面打開</a>
12、數據表格的作用及組成
作用：顯示數據
表格組成
<table width="value" height="value" border="value">
<tr>
<td></td>
<td></td>
</tr>
</table>
注：一個tr表示一行;一個td表示一列(一個單元格)
<th></th>表格的列標題
*數據表格的相關屬性
1）width="表格的寬度"
2）height="表格的高度"
3）border="表格的邊框"
4）bgcolor="表格的背景色"
5）bordercolor="表格的邊框顏色"
6）cellspacing="單元格與單元格之間的間距"
7）cellpadding="單元格與內容之間的空隙"
8）水平對齊方式：align="left左對齊/center居中/right右對齊";
9) 垂直對齊方式 ：valign="top頂對齊/middle居中/bottom底對齊/baseline(基線);
10)合并單元格屬性：
colspan=“所要合并的單元格的列數"合并列;
rowspan=“所要合并單元格的行數”合并行;
13、表單的作用及組成
表單的作用：用來收集用戶的信息的;
表單組成：表單框（表單域form）
提示信息
表單控件/表單元素
1)、表單框
<form name="表單名稱（英文字母開頭的）" method（提交方式）="post/get" action="表單提交的地址"></form>
2）文本框
<input type="text" value="默認值" placeholder="提示文本" />
3)密碼框
<input type="password" placeholder="密碼"/>
4)提交按鈕
<input type="submit" value="按鈕內容" />
<input type="reset" value="按鈕內容"/>重置按鈕
5）單選框/單選按鈕
<input type="radio" name="ral" value="radiovalue"/>
<input type="radio" name="ral" checked="checked" />
單選按鈕里的name屬性必須寫，同一組單選按鈕的name屬性值必須一樣。
6）復選框
<input type="checkbox" name="like" value="checkboxvalue" />
復選按鈕里的name屬性必須寫，同一組復選按鈕的name屬性值必須一樣。
checked="checked"表示默認被選中，可簡寫成checked
disabled="disabled"表示禁用，可簡寫成disabled
enabled:可用狀態
7)下拉菜單
<select name="">
<option name="" value="表單被提交時被發送到服務器的值">菜單內容</option>
</select>
8）多行文本框（文本域）
<textarea name="textareal" cols="字符寬度" rows="行數">
</textarea>
9)跳轉按鈕
<input name="'" type="button" value=“按鈕內容” />
<button></button>
button和submit的區別是：
submit是提交按鈕起到提交信息的作用，type類型是button只起到跳轉的作用，不進行提交。
提示信息標簽(作用：將提示信息及相應的表單控件進行關聯)
<label for="user">提示信息</label>
<input type="text" id="user"/>
擴展知識點3：對于不同的輸入類型，value 屬性的用法的意義
value 屬性為 input 元素設定值。
對于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password" - 定義輸入字段的初始值
type="checkbox", "radio" - 定義與輸入相關聯的值
注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 他name屬性。
擴展知識點4：
<form name="表單名稱" method="post/get" action=""></form>
Form中的獲取數據的兩個方式get和post的區別？
1. get是從服務器上獲取數據，post是向服務器傳送數據。
2. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
3. 對于get方式，服務器端用Request.QueryString獲取變量的值，對于post方式，服務器端用Request.Form獲取提交的數據。
4. get傳送的數據量較小，不能大于2KB。post傳送的數據量較大，一般被默認為不受限制。
5. get安全性非常低，post安全性較高。但是執行效率卻比Post方法好。
建議：
1、get方式的安全性較Post方式要差些，包含機密信息的話，建議用Post數據提交方式；
2、在做數據查詢時，建議用Get方式；而在做數據添加、修改或刪除時，建議用Post方式；
14、div和span的用法
<div ></div>
沒有具體含義， 除了獨占一行之外沒有任何其它的默認屬性，是頁面布局中常用的標簽；
<span> </span>
文本結點標簽
可以是某一小段文本，或是某一個字。 它除了不換行外，沒有任何其它的默認屬性；
年受經濟下行與疫情疊加的影響，畢業生有800多萬，就業形勢十分嚴峻，但即便如此，Web前端人才在軟件開發行業的就業市場中依舊供小于求，目前，全國總缺口每年大約為近百萬人。
行業對前端需求量持續增加，同時前端領域的技術發展變快，使得企業對前端開發人員也提出了越來越高的要求。
因此，對于想要入行前端的朋友，怎么入門Web前端行業？有哪些基礎知識？學習路徑如何規劃？怎樣系統的學習、掌握前端？
這些擺在你眼前的疑點和困惑，相信上網一搜會出現一大堆的前端學習方法論和學習資料供參考，但這些資料魚龍混雜，良莠不齊，如何找到質量很高的學習資料，這需要我們有很好的甄別能力，但這對于初學者來說實在有些困難。
那么，Web前端的正確學習路線應該怎么走？系統完整的知識框架又該怎么建立？
為解決這個學習困惑，讓學習者掌握真正的開發技能，在前端行業有超過10年經驗的學院老師，專門規劃了一門輕松易掌握、有效實用的 Web 前端進階課，幫助你快速了解前端，學習前端，掌握扎實的技能，吃到行業的紅利。
01 這套課程的設計
該套課程的所有內容都是基于最新版本進行設計，包含從前端到全棧的所有核心知識點，例如Vue，小程序，Node,TypeScript等，而且課程中還會包含四大熱門項目，例如電商、外賣、論壇等等。理論基礎搭配項目實操，難度循序漸進，前端新人和老手都可以學習。
內容分為三大部分：
01 基礎語法篇：主要講解 Web 基礎知識，包括HTML、CSS、JS，同時會有AJAX和Http等前后端交互的知識點講解，讓你能夠提前了解網絡協議和數據交互的原理。
02 業內主流框架篇：主要講解 Vue、React、小程序三大主流框架，全面覆蓋各個框架的知識體系和開發技巧，讓你掌握PC、H5、Webapp、小程序的跨平臺開發技術。
03 Nodejs全棧開發篇：主要講解后端 Nodejs 的使用方法和技巧，以及 Webpack 打包工具，并且會通過打造一個商城項目來還原企業開發流程，帶你學習全棧的開發思想，打通前后端。
上下滑動查看更多↑↑↑
780 節視頻課+講師答疑+編程大禮包
02 學習這套課程，你將收獲
? 掌握前端核心知識體系，快速上手 Vue、React、小程序等熱門框架開發
? 系統學習 Nodejs 后端框架，快速從前端到全棧，晉升全棧工程師
? 四大實戰項目：擁有熱門領域的實戰經驗（電商、論壇、外賣）
? 了解前沿最新知識，如Vue3.0，TypeScript 等行業技能，快人一步
03 誰適合學習這套課程
截止目前，已有 25172位程序員加入學習，推薦你一起
今日訂閱課程享哪些福利？
1、前端從入門到進階的體系課程，10 門課程，780 節視頻課，原價 ￥899，今日訂閱僅需 ￥198。
2、購課后添加微信：csdnxy68，發送訂單截圖，按提示領取價值800元的編程大禮包。
10 門課程，780節視頻課，原價 ￥899
今日訂閱，僅需 ￥198
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
