html學習一

時間  2019-12-14
標籤 html 學習 欄目 HTML 简体版
原文   原文鏈接

簡介

<html>
    <body>
        <h1>標題</h1>        
        <p>段落</p>
    </body>
</html>

什麼是HTML？

HTML 是用來描述網頁的一種語言：php

  • HTML 指的是超文本標記語言 (Hyper Text Markup Language)
  • HTML 不是語言，而是標記語言
  • HTML 使用標記標籤來描述網頁

HTML標籤

HTML 的標記標籤也稱標籤（HTML tag）css

  • HTML 的標籤是用尖括號包圍的關鍵詞，<html>
  • HTML 的標籤是成對出現的，<body></body>
  • HTML 的標籤前一個是開放標籤，後一個是關閉標籤
  • HTML 標籤中無其餘內容時，可用 "/" 來做結束，<img src="..." />

HTML文檔 = 網頁

  • HTML 文檔描述網頁
  • HTML 文檔包含 HTML 標籤和純文本
  • HTML 也被稱爲網頁
  • web 瀏覽器讀取 HTML 文檔並以網頁顯示他們，而不會顯示標籤

HTML 編輯器

HTML 文件格式以 .html 爲後綴。html

  • sublime text
  • vscode
  • Atom

HTML元素

HTML 元素指的是從開始標籤（start tag）到結束標籤（end tag）的全部代碼。web

  • HTML 元素以開始標籤開始，以結束元素結束
  • HTML 元素能夠嵌套，<html><body></body></html>
  • HTML 元素沒有結束標籤通常可使用，但不要忘記結束標籤
  • HTML 標籤大小寫不敏感，但通常都使用小寫

HTML屬性

HTML 標籤能夠擁有屬性。屬性提供了有關 HTML 元素的更多的信息。瀏覽器

  • 屬性老是以名稱/值對的形式出現，好比：name="value"。
  • 屬性老是在 HTML 元素的開始標籤中規定。

HTML / HTML5 的全局屬性
HTML全局屬性服務器

HTML 元素

HTML 元素指的是從開始標籤（start tag）到結束標籤（end tag）的全部代碼。
大多數 HTML 元素能夠嵌套（能夠包含其餘 HTML 元素）。
HTML 文檔由嵌套的 HTML 元素構成。編輯器

HTML 元素

<html>

<html> 定義網頁的文檔，是全部元素的容器佈局

<head>

<head> 定義網頁的頭部信息，它是全部頭部元素的容器。<head> 中的元素能夠引用腳本、指示瀏覽器在哪裏找到樣式表、提供元信息等等。文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、在 Web 中的位置以及和其餘文檔的關係等。絕大多數文檔頭部包含的數據都不會真正做爲內容顯示。
下面這些標籤可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。搜索引擎

<base>

<base> 標籤爲頁面上的全部連接規定默認地址或默認目標。
一般狀況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。
使用 <base> 標籤能夠改變這一點。瀏覽器隨後將再也不使用當前文檔的 URL，而使用指定的基本 URL 來解析全部的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標籤中的 URL。url

<link>

<link> 標籤訂義文檔與外部資源的關係,最多見的用途是連接樣式表。

<!--連接圖標 -->
<link rel="icon" href="..." type="image/x-icon">
<!--連接css -->
<link rel="stylesheet" href="...">

<meta>

<meta> 元素可提供有關頁面的元信息（meta-information），好比針對搜索引擎和更新頻度的描述和關鍵詞。
<meta> 標籤位於文檔的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文檔相關聯的名稱/值對。

<script>

<script> 定義文檔中的JavaScript代碼，可用外鏈和內聯兩種方式：

<!--內聯  -->
<script>
    function test() {
        ...
    }
</script>
<!--外鏈  -->
<script src="..."></script>

<style>

<style> 文檔的內聯樣式，經過class和id查找元素

<style>
.class {
    ...
}
.id {
    ...
}
</style>

<title>

<title> 網頁的標題

<title>網頁標題</title>

<body>

<body>定義網頁的正文，瀏覽器中顯示的內容都在這裏。

<body>
    <h1></h1>
    <p></p>
</body>

HTML 標題

標題（Heading）是經過 <h1> - <h6> 等標籤進行定義的。
<h1> 定義最大的標題。<h6> 定義最小的標題。

  • 瀏覽器會自動地在標題的先後添加空行。
  • 請確保將 HTML heading 標籤只用於標題。不要僅僅是爲了產生粗體或大號的文本而使用標題。
  • 搜索引擎使用標題爲您的網頁的結構和內容編制索引。
  • 由於用戶能夠經過標題來快速瀏覽您的網頁，因此用標題來呈現文檔結構是很重要的。
  • 應該將 h1 用做主標題（最重要的），其後是 h2（次重要的），再其次是 h3，以此類推。
<h1>標題1</h1>
<h2>標題2</h2>
...
<h6>標題6</h6>

HTML 換行符

<br> 是 HTML 的換行符：

<br />

HTML 水平線

<hr /> 標籤在 HTML 頁面中建立水平線，可用於分隔內容。

<hr />

HTML 段落

段落是經過 <p> 標籤訂義的。瀏覽器會自動地在段落的先後添加空行。（<p> 是塊級元素）

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML 引用

HTML <blockquote> 元素定義被引用的節。瀏覽器一般會對 <blockquote> 元素進行縮進處理。

<blockquote cite="url">
    網頁文檔引用
</blockquote>

計算機代碼

使用 <pre><code></code></pre> 在網頁中顯示計算機代碼。

<pre><code>
ver person = {
    firstname: "li",
    lastname: "hai",
    age: 24
}    
</code></pre>

HTML 註釋

<!-- --> 定義網頁的註釋信息，該標籤中的內容不會被瀏覽解析

<!-- 這是一段註釋 -->
<p>這是一個段落。</p>
<!-- 記得在此處添加信息 -->

HTML 連接

超連接能夠是一個字，一個詞，或者一組詞，也能夠是一幅圖像，您能夠點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。把鼠標指針移動到網頁中的某個連接上時，箭頭會變爲一隻小手。咱們經過使用 <a> 標籤在 HTML 中建立連接。
有兩種使用 <a> 標籤的方式：

  • 經過使用 href 屬性 - 建立指向另外一個文檔的連接
  • 經過使用 name 屬性 - 建立文檔內的書籤
<a href="#c1">內部跳轉</a>
<h1 id="c1">內部跳轉到這裏</h1>

<a href="http://url">外部跳轉</a>

HTML 圖像

在 HTML 中，圖像由 <img> 標籤訂義。<img> 是空標籤，意思是說，它只包含屬性，而且沒有閉合標籤。
要在頁面上顯示圖像，你須要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。

<img src="...">

HTML 表格

表格由 <table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行被分割爲若干單元格（由 <td> 標籤訂義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML 列表

HTML 的列表有有序列表<ol>和無序列表<ul>

<!--無序列表 -->
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<!--有序列表 -->
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 塊元素

大多數 HTML 元素被定義爲塊級元素或內聯元素。
「塊級元素」譯爲 block level element，「內聯元素」譯爲 inline element。
塊級元素在瀏覽器顯示時，一般會以新行來開始（和結束）。
例子：<h1>, <p>, <ul>, <table>

內聯元素在顯示時一般不會以新行開始。
例子：<b>, <td>, <a>, <img>

<div> 元素

HTML <div> 元素是塊級元素，它是可用於組合其餘 HTML 元素的容器。
<div> 元素沒有特定的含義。除此以外，因爲它屬於塊級元素，瀏覽器會在其先後顯示折行。
若是與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性。
<div> 元素的另外一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。

<span> 元素

HTML <span> 元素是內聯元素，可用做文本的容器。
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用於爲部分文本設置樣式屬性。

HTML 的類和id

HTML 的類和id都能區分文檔中的元素。當有些不一樣

  • 每一個元素能夠有多個類，但只能有一個id
  • 不一樣元素的類能夠相同， 但一個id只能對應一個元素
  • css和JavaScript可使用類和id選擇相應的元素，並做相關操做。
<div class="item item1">div</div>
<div class="item item2">div</div>
<div id="div1">div</div>

HTML 表單

用於蒐集不一樣類型的用戶輸入

表單元素

<input> 元素

最重要的表單元素是 <input> 元素。
<input> 元素根據不一樣的 type 屬性，能夠變化爲多種形態。

<select> 下拉列表）

<select> 元素定義下拉列表：

<select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
</select>

<textarea> 元素

<textarea> 元素定義多行輸入字段（文本域）：

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<button> 元素

<button> 元素定義可點擊的按鈕：

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML 輸入類型

輸入類型 text

<input type="text"> 定義供文本輸入的單行輸入字段：

<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>

輸入類型 password

<input type="password"> 定義密碼字段：

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>

輸入類型：submit

<input type="submit"> 定義提交表單數據至表單處理程序的按鈕。
表單處理程序（form-handler）一般是包含處理輸入數據的腳本的服務器頁面。
在表單的 action 屬性中規定表單處理程序（form-handler）：

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

輸入類型：radio

<input type="radio"> 定義單選按鈕。

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

輸入類型： checkbox

<input type="checkbox"> 定義複選框。
複選框容許用戶在有限數量的選項中選擇零個或多個選項。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

輸入類型： button

<input type="button> 定義按鈕。

<input type="button" onclick="alert('Hello World!')" value="Click Me!">
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程