一、HTML和CSS基础--HTML+CSS基础课程--第1部分
?
第一章 HTML介紹
?
Html和CSS的關(guān)系
1. HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
2. CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標(biāo)題字體、顏色變化，或為標(biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
3. JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單。或鼠標(biāo)滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現(xiàn)的。
標(biāo)簽的語法
1. 標(biāo)簽由英文尖括號<和>括起來，如<html>就是一個標(biāo)簽。
2. html中的標(biāo)簽一般都是成對出現(xiàn)的，分開始標(biāo)簽和結(jié)束標(biāo)簽。結(jié)束標(biāo)簽比開始標(biāo)簽多了一個/。
如：（1） <p></p>
（2） <div></div>
（3） <span></span>
3. 標(biāo)簽與標(biāo)簽之間是可以嵌套的，但先后順序必須保持一致，如：<div>里嵌套<p>，那么</p>必須放在</div>的前面。如下圖所示。
4. HTML標(biāo)簽不區(qū)分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程序員都以小寫為準(zhǔn)。
html文件基本結(jié)構(gòu)
這一節(jié)中我們來學(xué)習(xí)html文件的結(jié)構(gòu)：一個HTML文件是有自己固定的結(jié)構(gòu)的。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解：
1. <html></html>稱為根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都在<html></html>中。
2. <head> 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標(biāo)簽，頭部標(biāo)簽在下一小節(jié)中會有詳細(xì)介紹。
3. 在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會在瀏覽器中顯示出來。
認(rèn)識head標(biāo)簽
下面我們來了解一下<head>標(biāo)簽的作用。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
下面這些標(biāo)簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>標(biāo)簽：在<title>和</title>標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁的標(biāo)題信息，它會出現(xiàn)在瀏覽器的標(biāo)題欄中。網(wǎng)頁的title標(biāo)簽用于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁標(biāo)題，迅速的判斷出網(wǎng)頁的主題。每個網(wǎng)頁的內(nèi)容都是不同的，每個網(wǎng)頁都應(yīng)該有一個獨一無二的title。
HTML的代碼注釋
語法：<!--注釋文字 -->
?
?
第二章 認(rèn)識標(biāo)簽
?
語義化，讓你的網(wǎng)頁更好的被搜索引擎理解
在這一章節(jié)我們要開始把網(wǎng)頁中常用到的標(biāo)簽一 一向大家介紹，學(xué)習(xí)這一章節(jié)的時候要記住學(xué)習(xí)html標(biāo)簽過程中，主要注意兩個方面的學(xué)習(xí)：標(biāo)簽的用途、標(biāo)簽在瀏覽器中的默認(rèn)樣式。
標(biāo)簽的用途：我們學(xué)習(xí)網(wǎng)頁制作時，常常會聽到一個詞，語義化。那么什么叫做語義化呢，說的通俗點就是：明白每個標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如，網(wǎng)頁上的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽，網(wǎng)頁上的各個欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽。文章中內(nèi)容的段落就得放在段落標(biāo)簽中，在文章中有想強調(diào)的文本，就可以使用 em 標(biāo)簽表示強調(diào)等等。
講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢？
1. 更容易被搜索引擎收錄。
2. 更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。
在后面的章節(jié)會帶領(lǐng)大家學(xué)習(xí)了解html中每個標(biāo)簽的語義（用途）。
<body>標(biāo)簽，網(wǎng)頁上顯示的內(nèi)容放在這里
<p>標(biāo)簽，添加段落
<hx>標(biāo)簽，為你的網(wǎng)頁添加標(biāo)題
<strong>和<em>標(biāo)簽 加入強調(diào)語氣 :<em> 表示強調(diào)，<strong> 表示更強烈的強調(diào)
<span>標(biāo)簽為文字設(shè)置單獨樣式 沒有語義的，它的作用就是為了設(shè)置單獨的樣式用的。
<q>標(biāo)簽，短文本引用
<blockquote>標(biāo)簽，長文本引用
<br>標(biāo)簽分行顯示文本
為你的網(wǎng)頁中添加一些空格
<hr>標(biāo)簽，添加水平橫線
<address>標(biāo)簽，為網(wǎng)頁加入地址信息
<code>標(biāo)簽 加入一行代碼
<pre>標(biāo)簽為你的網(wǎng)頁加入大段代碼
<ul>添加新聞信息列表
<ol>標(biāo)簽來制作有序列表
<div>作為容器可以把一些獨立的邏輯部分劃分出來 給div命名，使邏輯更加清晰
<table>標(biāo)簽，認(rèn)識網(wǎng)頁上的表格
創(chuàng)建表格的四個元素：table、tbody、tr、th、td
1、<table>…</table>：整個表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。
2、<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標(biāo)簽后，這個表格就要等表格內(nèi)容全部下載完才會顯示。如右側(cè)代碼編輯器中的代碼。
3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
5、<th>…</th>：表格的頭部的一個單元格，表格表頭。
6、表格中列的個數(shù)，取決于一行中數(shù)據(jù)單元格的個數(shù)。
<caption>標(biāo)簽，為表格添加標(biāo)題和摘要(summary)
<a>標(biāo)簽，鏈接到另一個頁面 target="_blank"在新建瀏覽器窗口中打開鏈接
使用mailto在網(wǎng)頁中鏈接Email地址 如果mailto后面同時有多個參數(shù)的話，第一個參數(shù)必須以“?”開頭，后面的參數(shù)每一個都以“&”分隔。
<img>標(biāo)簽，為網(wǎng)頁插入圖片
1、src：標(biāo)識圖像的位置；
2、alt：指定圖像的描述性文本，當(dāng)圖像不可見時（下載不成功時），可看到該屬性指定的文本；
3、title：提供在圖像可見時對圖像的描述(鼠標(biāo)滑過圖片時顯示的文本)；
4、圖像可以是GIF，PNG，JPEG格式的圖像文件。
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/jiangtengteng/p/5253294.html
總結(jié)
以上是生活随笔為你收集整理的一、HTML和CSS基础--HTML+CSS基础课程--第1部分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 插件内核系统
- 下一篇： js 控制浏览器窗口大小