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