前端零基礎入門：頁面結構層HTML

時間 2019-11-13

標籤前端零基礎入門頁面結構 html 欄目 HTML 简体版

原文原文鏈接

HTML頁面結構層HTML
分如下方面學習：
HTML基礎，
HTML表格，
HTML表單，
搭建網頁結構css

html基礎html

學習前端的第一門課程，爲HTML基礎，HTML標記語言，它是網頁製做的第一步。前端

學習內容：
HTML概念，瞭解HTML發展史，基礎語法，經常使用標籤（段落，圖片，連接等）
結合小例子瀏覽器

什麼是HTML
HTML（Hypertext Markup Language）即超文本標記語言佈局

html發展史
1993（IETF）HTML1.0
1995（W3C）HTML2.0
1996（W3C）HTML4.0
1997（W3C）HTML4.0.1
2000（W3C）XHTML1.0
2001（w3c）xhtml1.1
xhtml2.0?
2004年（WHATWG）HTML5草案
2008年（合併）HTML5正式版
2014年HTML5定稿學習

html特色ui

HTML不須要編譯，直接由瀏覽器執行
HTML文件是一個文本文件
HTML文件必須使用HTML或htm爲文件名後綴
HTML大小寫不敏感，HTML與html同樣編碼

HTML是一個文本文件
url

HTML基礎語法3d

學習內容
HTML基本結構
HTML標籤
HTML元素
HTML屬性
註解

註解：div標籤爲塊級結構佈局元素，所以將在css中結合盒模型進行講解。

HTML基本結構

<html>
// 頭部信息
<head>
 <title>標題</title>
</head>
// 網頁內容
<body>
 網頁主體內容
</body>
</html>

html標籤屬性

語法：
<標籤名屬性名1=「屬性值」屬性名2=「屬性值」 ...> ...

DOCTYPE文檔類型聲明

<!DOCTYPE> 聲明必須放在html文檔第一行

<!DOCTYPE> 聲明不是HTML標籤

<!DOCTYPE html>
<html>
<head>
 <!-- 網頁頭部內容 -->
 <title>標題</title>
 </head>
 <body>
 <!-- 網頁主體內容 -->
 </body>
</html>

網頁編碼設置
問題：
當網頁顯示出現亂碼時
解決：
在<head></head>標籤之間添加

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

注：utf-8，GB2312，gbk等編碼

文字和段落標籤

標題標籤：

<h1></h1> ~ <h6></h6>

段落標籤:

<p></p>

align對齊屬性值：

值，描述
left 左對齊內容
right 右對齊內容
center 居中對齊內容
justify 對行進伸展，這樣每行均可以有相等的長度。

換行標籤：

<br/>

<p align="justify"></p>

列表標籤

html標籤
html標記標籤一般被稱爲HTML標籤
HTML標籤是由尖括號包圍的關鍵詞
HTML標籤一般是成對出
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤

什麼是HTML
HTML是用來描述網頁的一種語言
HTML超文本標記

無序列表

<ul>
 <li>1</li>
 <li>2</li>
</ul>

type屬性值：
值，描述
disc：圓點
square：正方形
circle：空心圓

有序列表

語法：

<ol>
 <li>1</li>
 <li>2</li>
</ol>

type屬性值：
值，描述：
1，數字1,2，。。。
a，小寫字母a，b。。。
A，大寫字母A，B。。。
i，小寫羅馬數字i
I，大寫羅馬數字I

列表標籤
定義列表：

<dl>
 <dt>定義列表項</dt>
  <dd>1</dd>
    <dd>2</dd>
    
 <dt>列表</dt>
  <dd>1</dd>
    <dd>2</dd>
</dl>

定義標籤內能夠有多個

對於每個

能夠有多個

圖像和超連接標籤

圖像標籤
語法：

<img src=" " alt=" " ...>

img屬性：
屬性，值，描述

src，url，顯示圖像的Url
alt，文字，圖像替代文本
height，數值和百分比，圖像的高
width，數值和百分比，圖像的寬

HTML路徑：
相對路徑
絕對路徑

超連接標籤
語法：

<a href=" ">內容</a>

href:連接地址，能夠是內部連接或外部連接

超連接（空連接—target-title屬性）

超連接標籤
屬性，描述
href:連接地址
target:連接的目標窗口

_self, _blank, _top, _parent

title連接提示文字
name連接命令

修飾標籤和特殊符號

文字斜體：<i></i>，<em></em>

加粗：<b></b>，<strong></strong>

下標：<sub>

上標：<sup>

特殊符號：
屬性，顯示結果，描述

&lt; < 小於號或顯示標記
&gt; > 大於號或顯示標記
&reg; ® 已註冊
@copy; © 版權
&trade; ™ 商標
&nbsp; Space 不斷行的空白

列表標籤應用場景

錨連接（同一頁面）

超連接標籤
定義錨：

<a href="#錨名1">目錄1</a>
<a href="#錨名2">目錄2</a>
<a href="..." name="錨名1" >內容</a>
xxxx
<a href="..." name="錨名2">內容</a>
xxxx

在不一樣頁面如何定義錨點
定義錨（不一樣頁面）：

網頁1：<a href="網頁名稱#錨名">...</a>
網頁2：<a name="錨名">...</a>

html基本結構：
語法：<標籤名></標籤名>
例如：<html>...</html>

規範：
1,<和>括起來
2,成對出現，開始標籤和結束標籤，結束標籤比開始標籤多了一個/

HTML表格

基礎表格

學習內容：
瞭解表格應用場景
表格基本結構
如何操做表格
表格屬性
表格跨行跨列
表格嵌套

數據的展現

HTML表格
<table>表格
<tr>行
<td>單元格

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。

請點贊！由於大家的贊同/鼓勵是我寫做的最大動力！

歡迎關注達達的簡書！

這是一個有質量，有態度的博客

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。