當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

一、HTML和CSS基础--HTML+CSS基础课程--第1部分

發布時間：2024/4/14 HTML 53 豆豆

生活随笔收集整理的這篇文章主要介紹了一、HTML和CSS基础--HTML+CSS基础课程--第1部分小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第一章 HTML介紹

Html和CSS的關系
　　1. HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
　　2. CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
　　3. JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單?；蚴髽嘶^表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換?？梢赃@么理解，有動畫的，有交互的一般都是用JavaScript來實現的。

標簽的語法
　　1. 標簽由英文尖括號<和>括起來，如<html>就是一個標簽。
　　2. html中的標簽一般都是成對出現的，分開始標簽和結束標簽。結束標簽比開始標簽多了一個/。
　　如：（1） <p></p>

　　　　（2） <div></div>

　　　　（3） <span></span>
　　3. 標簽與標簽之間是可以嵌套的，但先后順序必須保持一致，如：<div>里嵌套<p>，那么</p>必須放在</div>的前面。如下圖所示。
　　4. HTML標簽不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程序員都以小寫為準。

html文件基本結構
　　這一節中我們來學習html文件的結構：一個HTML文件是有自己固定的結構的。
　　<html>
　　　　<head>...</head>
　　　　<body>...</body>
　　</html>
　　代碼講解：
　　　　1. <html></html>稱為根標簽，所有的網頁標簽都在<html></html>中。
　　　　2. <head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標簽，頭部標簽在下一小節中會有詳細介紹。
　　　　3. 在<body>和</body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。

認識head標簽
　　下面我們來了解一下<head>標簽的作用。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
　　下面這些標簽可用在 head 部分：
　　　　<head>
　　　　　　<title>...</title>
　　　　　　<meta>
　　　　　　<link>
　　　　　　<style>...</style>
　　　　　　<script>...</script>
　　　　</head>
　　<title>標簽：在<title>和</title>標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標簽用于告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。

HTML的代碼注釋
　　語法：

第二章認識標簽

　　語義化，讓你的網頁更好的被搜索引擎理解
　　在這一章節我們要開始把網頁中常用到的標簽一一向大家介紹，學習這一章節的時候要記住學習html標簽過程中，主要注意兩個方面的學習：標簽的用途、標簽在瀏覽器中的默認樣式。

　　標簽的用途：我們學習網頁制作時，常常會聽到一個詞，語義化。那么什么叫做語義化呢，說的通俗點就是：明白每個標簽的用途（在什么情況下使用此標簽合理）比如，網頁上的文章的標題就可以用標題標簽，網頁上的各個欄目的欄目名稱也可以使用標題標簽。文章中內容的段落就得放在段落標簽中，在文章中有想強調的文本，就可以使用 em 標簽表示強調等等。
　　講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢？
　　　　1. 更容易被搜索引擎收錄。
　　　　2. 更容易讓屏幕閱讀器讀出網頁內容。

　　在后面的章節會帶領大家學習了解html中每個標簽的語義（用途）。

　　　　<body>標簽，網頁上顯示的內容放在這里

　　　　<p>標簽，添加段落

　　　　<hx>標簽，為你的網頁添加標題

　　　　<strong>和<em>標簽加入強調語氣 :<em> 表示強調，<strong> 表示更強烈的強調

　　　　<span>標簽為文字設置單獨樣式沒有語義的，它的作用就是為了設置單獨的樣式用的。

　　　　<q>標簽，短文本引用

　　　　<blockquote>標簽，長文本引用

　　　　<br>標簽分行顯示文本

　　　　 為你的網頁中添加一些空格

　　　　<hr>標簽，添加水平橫線

　　　　<address>標簽，為網頁加入地址信息

　　　　<code>標簽加入一行代碼

　　　　<pre>標簽為你的網頁加入大段代碼

　　　　<ul>添加新聞信息列表

　　　　<ol>標簽來制作有序列表

　　　　<div>作為容器可以把一些獨立的邏輯部分劃分出來給div命名，使邏輯更加清晰

　　　　<table>標簽，認識網頁上的表格
　　　　創建表格的四個元素：table、tbody、tr、th、td
　　　　　　1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
　　　　　　2、<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內容全部下載完才會顯示。如右側代碼編輯器中的代碼。
　　　　　　3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
　　　　　　4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
　　　　　　5、<th>…</th>：表格的頭部的一個單元格，表格表頭。
　　　　　　6、表格中列的個數，取決于一行中數據單元格的個數。

　　　　　　<caption>標簽，為表格添加標題和摘要(summary)

　　　　<a>標簽，鏈接到另一個頁面 target="_blank"在新建瀏覽器窗口中打開鏈接

　　　　使用mailto在網頁中鏈接Email地址如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。

　　　　<img>標簽，為網頁插入圖片
　　　　　　1、src：標識圖像的位置；
　　　　　　2、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
　　　　　　3、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
　　　　　　4、圖像可以是GIF，PNG，JPEG格式的圖像文件。

轉載于:https://www.cnblogs.com/jiangtengteng/p/5253294.html

總結

以上是生活随笔為你收集整理的一、HTML和CSS基础--HTML+CSS基础课程--第1部分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。