HTML初學者入門學習教程筆記手冊第二部分

lt;div>層元素
簡介: 在頁面層元素<div>用來將頁面內容分割成各個獨立的部分是塊級元素。
用途：在每個<div>元素中，不僅可以包含文本內容，也可以包含圖片、表單等其它內容，屬性：在默認的情況下，<div>元素所包含的內容，將在新的一行顯示
總結：塊級元素，獨占一行

id 標記屬性
簡介：給元素定義唯一標識
好處：方便在元素中使用行為
擴展：類似class屬性的作用，用來調用級聯樣式表

class 調用樣式屬性
簡介：class屬性用來調用層疊樣式表，也可以調用使用<link>元素鏈接外部樣式表。
好處：方便使用和更改

實例：


  <!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			.idepy{
				color: sandybrown;
				font-size: 35px;
			}
		</style>
	</head>
	<body>
<p class="idepy">伊迪派</p>
	</body>
</html>

style 樣式屬性
簡介：頁面主體元素的樣式屬性，用來給頁面內容定義級聯樣式表.
用途：包含style屬性、class屬性
理解：style是樣式，想創建那個元素的樣式，就寫上那個元素的類型進行設置

實例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			body{
				color: red;
				font-size: 55px;
			}
		</style>
	</head>
	<body>
伊迪派
	</body>
</html>

align 對齊屬性
簡介：對齊屬性用來定義內容的水平對齊方式
用途:使用對齊屬性，不僅可以控制文本內容的對齊，也可以控制文本中圖片等內容的對齊

實例：

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<title>demo</title>
		<style>
			body{
				text-align: center;
			}
		</style>
	</head>
	<body>
我會居中顯示
	</body>
</html>

<p> 段落元素
簡介：用來定義一個段落
用途：可以包含文本、圖片，以及用來修飾文本的元素，被<p>元素包含的內容，默認的顯示方式是換行顯示
理解：塊級元素，獨占一行

實例:

<p>段落元素</p>
<p>段落元素</p>
<p>段落元素</p>
<p>段落元素</p>

<br> 換行元素
簡介：換行元素<br>用來使被分割的文本換行顯示

實例：

 換行元素<br>我在下一行

<pre> 保留格式元素
簡介：保留格式元素<pre>用來使包含的內容，按照文檔源代碼的格式顯示
用法：因為瀏覽器的默認顯示方式中，將壓縮多個空格為一個，同時忽略換行等空白符號

實例：

<pre>
	我是測試文本                                     前面空格被保留
	我不需要換行符
</pre>

<hr> 水平分割線元素
簡介：水平分割線元素<hr>用一條一定高度的分割線，分割頁面內容
高度屬性：水平分割線的厚度屬性size，用來定義水平分割線的粗細
寬度屬性：水平分割線的寬度屬性width，用來定義水平分割線的寬度
注意：style內定義高度寬度屬性徐加px

實例：

<hr size="5" width="500">

<b> 加粗元素
簡介：用來使包含的文本加粗顯示
理解：是一個物理標簽，它所包圍的字符將被設為bold（粗體）

實例：

<b>加粗元素</b>

<i> 斜體顯示元素
簡介：用來使包含的文本內容以斜體的方式顯示
理解：是一個物理標簽，它所包圍的字符將被設為Italic(斜體)

實例

<i>斜體顯示元素</i>

<em> 斜體強調元素

<em>斜體強調元素</em>

<strong> 加粗強調元素
簡介：是一個邏輯標簽，它的作用是加強字符的語氣一般來說，加強字符的語氣是通過將字符變為bold（粗體）來實現的。

實例：

<strong>加粗強調元素</strong>

<big> 放大元素
簡介：放大元素<big> 用來使包含的文本增大一號顯示
注意：當文本內容已經是最大字號時，將不能繼續增大。

實例:

我是沒有放大<big>我是被放大一號的<big>

<small> 縮小元素
簡介：縮小元素<small> 用來使包含的文本縮小一號顯示
注意：當文本內容已經是最小字號時，將不能繼續變小。

實例：

我是沒有縮小<small>我是被縮小一號的</small>

<sup> 上標元素
簡介：用來使包含的文本內容以上標的方式顯示
用途：元素中的文本的底部，將在普通文本的一半高度上顯示

實例：

上標元素<sup>我是上標部分</sup>

<sub> 下標元素
簡介：用來使包含的文本內容以下標的方式顯示
用途：元素中的文本的頂部，將在普通文本的一半高度上顯示

實例：

下標元素<sub>我是下標部分</sub>

今主流的技術中，可以分為前端和后端兩個門類。

前端：簡單的理解就是和用戶打交道

后端：主要用于組織數據

而前端就Web開發方向來說，分為三門語言， HTML、CSS、JavaScript

語言	作用
HTML	描述頁面的結構，類似于動物的骨架
CSS	渲染技術，使得頁面更好看，也可以一定程度的讓頁面動起來
JavaScript	實現和后端的交互，數據驗證、收發等功能

HTML的結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

上面面的一段代碼既表示一段HTML的結構，它表示生成了一個空白的HTML網頁

組成HTML的元素稱為標簽，標簽的結構分為兩種

有開始標簽和結束標簽的如 <html> </html>
有單標簽的，例如 <img/> ，單標簽中的 / 即表示標簽的閉合， / 符號不寫也是可以的

下面這段HTML代碼包含的標簽解釋如下

<!DOCTYPE html> 聲明類型，意思為超文本語言類型。

<!DOCTYPE html> 是一種HTML5的規范寫法，在HTML發展過程中還有以下的幾種聲明方式

<!DOCTYPE html> html5規范， html的第一行必須為此值

<!--html4 嚴格版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "<http://www.w3.org/TR/html4/strict.dtd>">

<!--html4 過渡版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "<http://www.w3.org/TR/html4/loose.dtd>">
<!--html4 框架版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
            "<http://www.w3.org/TR/html4/frameset.dtd>">

關于html4的聲明類型，可以參考:
<https://www.w3.org/TR/html4/sgml/dtd.html>

html 最外層的一個跟節點，里面的所有元素都是它的子元素

<!--lang屬性表示使用英文，如果是中文，可以改成zh, 非嚴格屬性也可以不寫-->
<html lang="en">

</html>

head 頭標記，整個網頁的全局屬性都會寫在這個里面
body 網頁的主體部分，用戶可以直觀感受到的顯示內容的部分
meta 標簽，標記原數據，可以規定網頁的字符、縮放比例等信息


<!--規定字符集使用UTF-8, UTF-8 涵蓋全球所有的國際和民族的文字和大量圖像, UTF-8 規定一個字符占3個字節-->
<meta charset="UTF-8">

title 標題標簽,標題的內容會在瀏覽器的tab頁中顯示

lt;hr>：畫一條直線

1.<h1></h1>~<h6></h6>

2.<meta>標簽

（1）描述文檔類型和字符編碼

（2）提供搜索關鍵字和內容描述信息，方便搜索引擎的搜索

例：<head>

平臺，提供各類服飾、美容、家居、數碼、……" />

</head>

3.HTML標簽分類（方便后續的布局設計）：

塊級標簽：顯示為“塊”狀，前后隔一行

行級標簽：按行逐一顯示

分類好處：方便后續的布局設計

4.有序列表標簽：ol li

5.無序列表標簽：ul li

6.定義描述標簽：dt是塊狀標簽，所以常用于圖文混編的布局場合

<dl>

……

</dl>

7.表單form,一般和table一起使用：

<form>

<table>

<tr>

</tr>

.....

</table>

</form>

8.請說出實際開發常用的4種塊狀結構是什么？

（1）.div-ui(ol)-li:常用于分類導航欄或者菜單等

（2）.div-dl-dt-dd:常用于圖文混編場合

（3）.table-tr-td:常用于圖文布局或顯示數據

（4）.form-table-tr-td：常用于布局表單，登錄，注冊……

9.圖像標簽：

alt:當圖片刷新不出來顯示這個文字

title:鼠標放在圖片上顯示的文字

10.鏈接標簽

11.特殊符號：

空格：

大于：>1、因為<、>等符號在HTML中已使用，所以必須用其他符號來代替,都以分號結束（；）

小于：<

引號：&quot

版本號：?

12.各種功能表單元素

會持續更新哦！免費學習資源。

在線咨詢

上一篇：為什么選擇HTML5Plus這《土土》的技術
下一篇：阻止關閉或刷新瀏覽器？分享 1 段優質 JS 代碼片段！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML初學者入門學習教程筆記手冊第二部分

HTML的結構

您的項目需求