初識「HTML」

時間 2019-12-07

標籤 html 欄目 HTML 简体版

原文原文鏈接

HTML

什麼是HTML？

①全稱：超文本標記語言
②超文本：在普通的文本內容的基礎上添加超連接、圖片、視頻等
③標記語言：HTML提供一系列標籤
④版本：HTML 4.01html

HTML聲明

1.編碼格式：HTML 5
2.HTML的模版
①HTML的聲明 <!DOCTYPE html>
做用：告訴瀏覽器當前HTML頁面的版本和類型
用法：必須在HTML頁面的0行0列
注意：聲明並非必要的，聲明讓瀏覽器更好地解析HTML頁面。
②根標籤<html>
閉合標籤:具備開始標籤和結束標籤
注意：一個HTML頁面中只能具備一個根標籤
③<head>標籤
做用：定義當前HTML頁面的信息
子標籤
<title> 定義HTML頁面的標題，方便被搜索引擎抓取。
<link> 引入外部的CSS文件
<style> 編寫CSS樣式代碼
<script> 引入外部的JavaScript文件或編寫JavaScript代碼
<meta> <meta charset="UTF-8"> 設置編碼格式
<meta name="keywords"> 設置關鍵字，方便被搜索引擎抓取。
④<body>標籤
做用：顯示在瀏覽器窗口中瀏覽器

HTML的標籤

①閉合標籤：具備開始和結束標籤
②單標籤：只有開始標籤post

HTML的屬性

1.定義：被定義在開始標籤
2.格式：屬性名稱="值"
3.分類：
①標準屬性：幾乎全部的標籤都具備的屬性
舉例：id-標識，惟一
name-名稱
class
style搜索引擎

②私有屬性：只有某個具體的標籤具備的屬性
常見的標籤：
標題 <h1>~<h6>
效果：從大到小
<h1>：方便地搜索引擎抓取，一個HTML頁面最好只有一個<h1>
段落 <p></p>
換行 <br>
水平線 <hr>編碼

列表

①有序列表
<ol>
<li></li>
</ol>
②無序列表
<ul>
<li><li>
</ul>
③定義列表
<dl>
<dt>項目名稱</dt>
<dd>項目中的具體內容</dd>
</dl>spa

連接

<a href="地址"></a>

做用：實現頁面之間的跳轉
②錨點code

<a href="#名稱">回到頂部</a>

③發送郵件

④<a>元素的屬性列表orm

屬性名	值	描述
href	URL	規定連接的目標 URL。
target	_blank/_parent/_self	規定在何處打開目標 URL。僅在 href 屬性存在時使用。

路徑

①相對路徑：目標頁面相對於當前頁面的路徑
②絕對路徑：從根目錄開始查找到目標頁面的路徑視頻

圖片

①<img src="圖片的地址" alt="">
②顯示大小：width 設置圖片顯示的寬度
Height 設置圖片顯示的高度
③注意：設置顯示的寬度和高度與原圖片的比例保持一致
④img元素的屬性列表：htm

屬性名	值	描述
align	topbottommiddleleftright	HTML5 不支持。HTML 4.01 已廢棄。規定如何根據周圍的文原本排列圖像。
alt	text	規定圖像的替代文本。
height	pixels	規定圖像的高度。
src	URL	規定顯示圖像的 URL。
width	pixels	規定圖像的寬度。

HTML表格

①概念：具備行和列
②基本結構
<table> 表示表格
<tr> 表示行
<td> 表示單元格
③帶表頭的表格
表頭單元格由<th>建立，元素中的文本一般呈現粗體並居中。
標準單元格由<td>建立，元素中的文本默認左側對齊。
分類：
<thead> 表示表格的表頭，顯示在表格的最上面。
<tbody> 表示表格中的數據
<tfoot> 表示表格中的結尾，顯示在表格的最下面。
④帶標題的表格
<caption>定義標題：每一個表格只能設置一個，默認居中顯示。
⑤跨行或跨列
rowspan 跨行
colspan 跨列

HTML表單

①做用：提交頁面中的數據內容
②<form>：表示表單
屬性名值描述
action URL 規定當提交表單時向何處發送表單數據。
method get/post 規定用於發送表單數據的 HTTP 方法。
name text 規定表單的名稱。

③表單的組件：<input>
④輸入框
<input type="text">
<input type="password">

⑤按鈕
<input type="button">
<input type="reset">
<input type="submit">
⑥單選或多選框
<input type="radio">
<input type="checkbox">
⑦隱藏域
<input type="hidden">
⑧文件域
<input type="file">
⑨<select>
下拉單選框
下拉多選框