整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML+CSS學完好久了，一直沒啥時間總結，現在總結了下學的過程：
之所以放在一起總結，是因為HTML和CSS沒有啥很多的編程邏輯，都是需要去記住并且熟練使用的，熟練使用是得去一個個敲過一遍。所謂的代碼量積累好像就是這么回事，只有多敲才能會。
小白用的嗶哩嗶哩上的教程視頻，因為個人學習方法的原因，都是跟著那教程去敲的，當然課后練習的話，都是自己先摸索敲了一遍在去看的講解，小白覺得這樣可以加深印象。
還有就是沒有熟練之前要天天的去練，哪怕一天半小時也好。因為一旦一天沒有練就會忘掉，還得回去找之前的筆記來看。（因為有事耽擱了兩三天沒去學，結果又重頭的看了一遍，血淋淋的學習效率教訓。不管怎樣，貴在堅持。）
當然，因為小白基礎是真的差，沒有什么教程是可以完完全全都講完的，使用小白看完了嗶哩嗶哩的教程又跑去了網易云課堂找了一份HTML+CSS的教程來看，為的是查漏補缺。
有一種播放叫做1.5倍播放。看的過程，別跟播放器里一倍的速度看，調成1.5倍或是2.0倍播放速度，因為那些東西，多數都是理解使用的。哪怕忘了，百度一下就可以直接搞定了。打基礎階段所以還是記住熟練使用才好。
HTML小白也就看了兩天吧，用了半天做了下練習；CSS對于零基礎的人來說建議12-15天，當然小白之前有過這些概念，所以用了五天多點的時間。JS才剛剛開始學，所以不知道時間怎么算才好。因為前端三大基石：HTML+CSS+JS，HTML+CSS學習所使用的時間占比才百分之五，剩下的百分之九十五都是JS的學習時間。
找課程時記住，找一兩個課程，一個全心去學，一個查漏補缺就好，別一會兒這個課程看一下，那個課程看一下的。這樣子反而會使自己心浮氣躁沒法靜下心來去學。打基礎的視頻教程，其實都一樣的，沒啥有特別好的特別壞的。
lt;!doctype html>
<html>
<!--
常見問題答疑
Question 1：HTML標簽可以大寫嗎？
大小寫都可以，比如<P> 和 <p> 都一樣，但是推薦小寫，XHTML強制小寫（小寫肯定對，大寫……看情況）
Question 2：有<h7>、<h8>、<h9>……嗎？
沒有。<h1>最大，<h6>最小.
Question 3：所有HTML標簽都需要<></>嗎？
不是。有特例，比如<img>是自閉合的，沒有</img>;<br>是空元素，需要在開始標簽閉合<br/>;<hr> <link> <base>不需要閉合，等等。
Question 4：標簽里的屬性有先后順序嗎？
沒有。比如<img src="" alt="" width="" height="">和<img alt="" width="" height="" src="">效果是一樣的。
-->
<head>
<!--
<meta>元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。
!元數據也不顯示在頁面上，但會被瀏覽器解析。
-->
<meta charset="utf-8">
<!-- <title>標簽定義HTML文檔的標題 -->
<title>HTML復習 2019-2-3</title>
<!--
<base>定義了所有鏈接的URL（地址） URL->Uniform Resource Locator（全球資源定位器）
<base > 所有鏈接都指向www.baidu.com
-->
<!--
<link>標簽定義文檔和外部資源的關系，鏈接到另一個文件，把另一個文件的東西拿過來用
通常引用 css文件 和 js文件
調用樣式的優先級：<link>外部文件 < 文件內<style> < 標簽內style屬性
-->
<link rel="stylesheet" type="text/css" href="filename.css">
<link rel="stylesheet" type="text/javascript" href="filename.js">
<!--
<style>標簽定義標簽的樣式 CSS -> Cascading Style Sheets（層疊樣式表）
1.直接定義標簽樣式 標簽名{ 屬性1:值; 屬性2:值; }
2.定義具有某一ID的標簽樣式 #id名{ 屬性1:值; 屬性2:值; }
3.定義某一類（class）的標簽樣式 .類名{ 屬性1:值; 屬性2:值; }
#多個元素用 , 隔開
-->
<style>
td,p{
text-align:center;
}
#top{
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.show{
background-color: aqua;
}
</style>
<!-- <script>標簽用于定義腳本文件（一般就是JavaScript） -->
<script>
alert("lycute!"); //彈出一個消息框
</script>
</head>
<body>
<!--
常用HTML屬性：
class 定義一個或多個類名(classname)；相當于把不同的標簽分到一個組，屬于同一類
id 定義元素的唯一id；id是唯一的，不能兩個標簽用一個，相當于學號，不能重復
style 定義元素的行內樣式(inline style)；只能修改該標簽的樣式（大小、顏色、位置等）
-->
<!-- <h1> ~ <h6> 標簽定義了六個等級的標題 h->head/headline(標題) -->
<h1 id="top">This is a title level 1</h1>
<h2 class="show">This is a title level 2</h2>
<h3 class="show">This is a title level 3</h3>
<h4 class="show">This is a title level 4</h4>
<h5>This is a title level 5</h5>
<h6>This is a title level 6</h6>
<!--
<p>標簽定義段落 p->paragragh（段落）
HTML文檔中不能直接敲回車，需要使用 <br/> 標簽 br->break(打斷？……可能是這個吧)
HTML文檔中不能直接打空格，需要使用 nbsp->Non-breaking Space(不間斷空格)
！！上兩條在<pre>標簽內不受影響
<hr>標簽用于創建水平線,用于分隔內容 hr->horizontal line(水平線)
<b>和<strong>都可以加粗文字
<i>和<em>都可以定義斜體文字
通常使用<strong>和<em>，因為它們有強調的含義
-->
<p>
This is a paragragh.<br/>
And this is the second line.
</p>
<hr>
<p>
This is another paragragh<br/>
<!--常用文本格式化屬性：
<b> 定義粗體文本 b->bold(粗體)
<em> 定義著重文字 em->emphasize(強調)
<i> 定義斜體字 i->italic(斜體)
<small> 定義小號字
<strong>定義加重語氣
<sub> 定義下標字 sub->subscript(下標)
<sup> 定義上標字 sup->superscript(上標)
<ins> 定義插入字 ins->insert(插入)
<del> 定義刪除字 del->delete(刪除)
-->
<strong>I am bold</strong><br/>
<em>I am italic</em><br/>
<small>I am small</small><br/>
<sub>I am subscript</sub>
<sup>I am superscript</sup><br/>
<ins>I am ins</ins><br/>
<del>I am del</del>
</p>
<!--
段落中“計算機”輸出標簽（一般不用，了解就行）
<code> 定義計算機代碼
<kbd> 定義鍵盤碼 kbd->keyboard(鍵盤)
<samp> 定義計算機代碼樣本 samp->sample(樣例)
<var> 定義變量 var->variate(變量)
<pre> 定義預格式文本 pre->preposition(前置？……這個，應該吧)
-->
<p>
<pre>
<code>
#include"stdio.h"
int main()
{
printf("Hello World!");
}
</code>
</pre>
<kbd>Shift鍵 VK_SHIFT</kbd><br/>
<samp>system.out.print("hello world");</samp><br/>
</p>
<!--
HTML引文、引用和標簽定義
<abbr> 定義縮寫 abbr->abbreviation（縮寫）
<address> 定義地址
<bdo> 定義文字方向 bdo->Bi-Directional Override
<blockquote> 定義長的引用
<q> 定義短的引用語 q->quote（引用）
<cite> 定義引用、引證
<dfn> 定義一個定義項目 dfn->definition（定義）
-->
<p>
<abbr title="abbreviation">abbr</abbr><br/>
<address>Hebei,Shijiazhuang</address><br/>
<bdo dir="rtl">text direction from right to left</bdo>
<bdo dir="ltr">text direction from left to right</bdo>
<blockqoute cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockqoute><br/>
<q>This is a short qoute</q><br/>
<cite>This is cite</cite><br/>
<dfn>This is dfn</dfn>
</p>
<!--
<a>標簽定義鏈接 a->anchor(錨點)
href屬性定義鏈接地址 href->hypertext reference（超文本引用）
target屬性定義被鏈接的文檔在何處顯示
1.可以用來鏈接到外部地址實現頁面跳轉功能
2.可以鏈接到當前頁面的某部分實現內部導航功能
3.鏈接不一定是文本，也可以是圖片或者其他HTML元素
-->
<a href="#">This is a null link</a><br/>
<a href="#top">This is a link to h1.</a><br/>
<a target="_blank">This is a link to baidu</a><br/>
<!--
<img>標簽定義圖像、圖片 img->image(圖像)
<img>是一個自閉合標簽，不需要也不存在</img>.
src屬性指向圖像的地址 src->source(來源)
alt屬性定義如果圖片加載不出來時的替換文字 alt->alter(變更)
height、width屬性分別定義圖片的 高度 和 寬度,值可以是數字（單位px：像素）或者百分比（相對于源文件） px->pixel(像素)
-->
<img src="http://www.jungjaehyung.com/uploadfile/2024/0807/20240807024048555.jpg" alt="kirito" height="50%" width="50%">
<!-- HTML 可以通過 <div> 和 <span> 將元素組合起來 -->
<div style="background:skyblue;">
<p>This is a paragragh in a div</p>
<a >www.nelzh.cn</a>
</div>
<p>
Ly <span style="background:pink;">cute</span>
</p>
<!--
HTML表格 <table> (table有表格的意思)
<th> 定義表格的標題欄 th -> table headline(我jiao著應該是……)
<tr> 定義表格的行 tr -> table row
<td> 定義表格的列 td -> table ???
<caption> 定義表格標題
<colgroup> 定義表格列的組
<col> 定義用于表格列的屬性
<thead> 定義表格的頁眉
<tbody> 定義表格的主體
<tfoot> 定義表格的頁腳
-->
<table border="1">
<caption>LYCUTE</caption>
<colgroup>
<col span="2" style="background-color:skyblue;">
</colgroup>
<thead>
<tr>
<th>L</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr>
<td>LY</td>
<td>CUTE</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>CUTE</td>
<td>LY</td>
</tr>
</tfoot>
</table>
<!--
有序列表<ol> & 無序列表<ul> & 自定義列表<dl>
ol -> ordered list
ul -> unordered list
dl -> ??? list
-->
<ol>
<li>lycute</li>
<li>lycute</li>
<li>lycute</li>
</ol>
<ul>
<li>lycute</li>
<li>lycute</li>
<li>lycute</li>
</ul>
<dl>
<dt>ly</dt>
<dd>-cute</dd>
<dt>cute</dt>
<dd>-ly</dd>
</dl>
<!-- HTML表單<form> 和 輸入<input> -->
<form>
<!-- 文本域（Text Fields）-->
Username:<input type="text" name="username"><br/>
<!-- 密碼（Password）-->
Password:<input type="password" name="pwd"><br/>
<!-- 多行輸入（Textarea）-->
<textarea></textarea><br/>
<!--
下拉列表（select）
<select> 定義了下拉選項列表
<optgroup> 定義選項組
<option> 定義下拉列表中的選項
-->
<select>
<optgroup label="program">
<option value="c">C</option>
<option value="java">Java</option>
<option value="python">python</option>
</optgroup>
<optgroup label="cute or not">
<option value="cute">lycute</option>
<option value="verycute">lyverycute</option>
</optgroup>
</select><br/>
<!-- 單選按鈕（Radio Buttons）-->
<input type="radio" name="sex" value="male">Male<br/>
<input type="radio" name="sex" value="female">Female<br/>
<!-- 復選框（Checkboxes）-->
<input type="checkbox" name="program" value="c">C<br/>
<input type="checkbox" name="program" value="java">Java<br/>
<input type="checkbox" name="program" value="python">python<br/>
<!-- 提交按鈕（Submit Button）-->
<input type="submit" value="submit">
<!-- 按鈕（Button）-->
<input type="button" value="找回密碼">
</form>
<!-- <iframe> 標簽規定一個內聯框架 過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。-->
<center>
<iframe src="http://www.baidu.com/" width="1200" height="400"></iframe>
</center>
</body>
</html>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
