HTML學習(一)語法結構

參考

HTML 教程 - w3school 在線教程
 HTML 教程| 菜鳥教程
 W3C HTML5 中文手冊
 維基百科-HTML
HTML教程,XHTML教程

簡介

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

html 是標記語言，不是編程語言，由瀏覽器翻譯標記的內容

HTML文件

from wiki

使用文本編輯器創建編輯創建*.html或者*.htm文件，使用瀏覽器預覽

HTML語法

<標簽名標簽屬性>內容</標簽名>
示例

<!doctype html>
<!--我代表注釋-->
<html>
    <head>
    <!--head標簽內可包含關于文檔的信息，例如網站標題，作者，語言，css等，瀏覽器不會向用戶顯示這些頭部信息-->
        <title>網站標題</title>
    </head>
    <body>
    <!--body標簽內是文檔的主體，也是用戶能看到的部分，文檔的所有內容（比如文本、圖像、顏色、圖形等等-->
        <h1>hello word !</h1>
    </body>
</html>

標簽

html語言，使用標簽(元素)與瀏覽器就行交流，傳遞網頁布局，編碼，作者，字體格式、圖片視頻鏈接、注釋等信息，還具有傳達給搜索引擎網頁的脈絡關鍵詞等功能。標簽有開始和結束，即生效范圍，以<head>標簽為例，<head>和</head>之間為head標簽的管轄范圍，里面包含關于文檔的信息。瀏覽器不會向用戶顯示這些頭部信息。標簽之間可以嵌套，例如下面這些標簽可用在 head內部：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
另html標簽不區分大小寫，w3c推薦小寫

必要的標簽

<!DOCTYPE> 聲明是文檔中的第一個成分，位于 <html> 標簽之前。該標簽告知瀏覽器文檔所使用的 HTML 規范

<html> 元素告知瀏覽器這是一個 HTML 文檔

<head> 元素可包含關于文檔的信息。瀏覽器不會向用戶顯示這些頭部信息（"head information"）。下面這些標簽可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

<body> 元素定義文檔的主體。其中包含文檔的所有內容（比如文本、圖像、顏色、圖形等等）。

<!--...--> 標簽注釋標簽用于在源文檔中插入注釋。注釋會被瀏覽器忽略。可使用注釋對的代碼進行解釋，這樣做有助于以后的時間對代碼的編輯。

更多的標簽可參見W3C HTML5 中文手冊

標簽屬性

HTML 標簽擁有屬性。可以在每個標簽的參考頁中找到相應的特殊屬性。
例如: <a> 標簽定義超鏈接，它用于從一個頁面連接到另一個頁面。

<a >W3C</a>

href屬性表示鏈接向https://www.w3.org/，當然<a>還有其他的屬性，可在W3C HTML5 中文手冊中<a>標簽頁查詢

HTML 元素還有事件屬性，這些屬性在瀏覽器中觸發行為，比如當用戶單擊一個 HTML 元素時啟動一段 JavaScript。其詳細參數也可以在W3C HTML5 中文手冊中查詢到。

常用標簽

1. 表單<form>

收集用戶輸入的信息

1.1 常用定義

<form>
<input type="類型" name="表單元素名" value="表單元素值">
</form>

1.2 文本輸入 type=text

例

<form>
<input type="text" name="Name">
</form>
<!--值為輸入內容-->

1.3 密碼 type=password

例

<form>
<input type="password" name="Pwd">
</form>
<!--值為輸入內容-->

1.4 單選按鈕 type=radio

例

<form>
<input type="radio" name="sex" value="male">male<br>
<input type="radio" name="sex" value="female">female<br>
</form>
<!--值為輸入內容-->

1.5 復選框 type=checkbox

name后為數組
例

<form>
<input type="checkbox" name="like[]" value="HTML">HTML<br>
<input type="checkbox" name="like[]" value="C++">C++<br>
</form>
<!--值為輸入內容-->

1.6下拉列表

單選下拉列表

<form>
<select name="復選框名">
<option value="值">網頁顯示內容</option>
<option value="值">網頁顯示內容</option>
<option value="值" selected>網頁顯示內容</option>
<!--selected對應項為默認選項，可不寫，則默認為第一個-->
</select>
</form>

例

<form>
手機<br>
    <select name="phone">
    <option value="apple">Apple</option>
    <option value="xiaomi">Xiaomi</option>
    <option value="piexl" selected>Piexl</option>
    </select>
</form>

復選下拉列表

與單選相比，多了multiple="multiple" name="復選框名[]"，選擇名變成了數組，就像復選框的原理一樣

<select multiple="multiple" name="復選框名[]">

1.7 提交按鈕 type="submit"

當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。
例

<form name="input" action="html_action.php" method="get">
<--!其他內容-->
<input type="submit" value="提交"><br>
</form>
<!--提交后，把參數傳遞給html_action.php-->

1.8示例

<form name="input" action="html_action.php" method="get">
    <!--文本域-->
    Name <input type="text" name="Name"><br>
    <!--密碼-->
    Password <input type="password" name="Password"><br>
    <!--單選-->
    性別<br>
    <input type="radio" name="sex" value="male">Male <br>
    <input type="radio" name="sex" value="femal">Femal <br>
    <!--復選-->
    操作系統<br>
    <input type="checkbox" name="OS" value="IOS">IOS<br>
    <input type="checkbox" name="OS" value="Android">Android<br>
    <!--下拉列表-->
    手機<br>
    <select name="phone">
    <option value="apple">Apple</option>
    <option value="xiaomi">Xiaomi</option>
    <option value="piexl" selected>Piexl</option>
    </select>
    </br>
    <!--提交-->
    <input type="submit" value="提交"><br>
    </form>

CSS

層疊樣式表（英語：Cascading Style Sheets，簡寫 CSS），又稱串樣式列表、級聯樣式表、串接樣式表、層疊樣式表、階層式樣式表，一種用來為結構化文檔（如 HTML文檔或 XML應用）添加樣式（字體、間距和顏色等）的計算機語言。

簡單的說就是規定了html文件中某標簽內部的內容的字體、間距和顏色等樣式，將文件的內容與顯示分隔開來。

CSS 的創建

CSS 信息可以來自：
作者樣式

作者可以在他的 HTML 文件中確定一個外來的、獨立的 CSS 文件（外部樣式表）

作者可以將 CSS 信息包含在 HTML 文件內（內部樣式表）

作者可以在一個 HTML 標簽內結合 CSS 指令（內聯樣式），

自定樣式
讀者可以在他的瀏覽器內設立一個 CSS 文件。這個 CSS 文件可以用在所有的 HTML 文件上。假如作者的 CSS 文件與讀者的相沖突，那么讀者可以選擇一個
瀏覽器樣式
假如外部沒有特別指定一個樣式的話，一般瀏覽器自己有一個內在的樣式

我們在編寫html文件的過程中使用的就是作者樣式
優先級外部樣式表 < 內部樣式表 < 內聯樣式表
例

Index.html文件

<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="./style.css"  />  
        <!--引用外部樣式style.css文件，文件位于./style.css即index同目錄(./)下-->      
        <title>biaoti</title> 
                <style type="text/css">
                       body p {color: red}
                        
                </style>    
        <!-- style內規定了body內的p內的字體顏色為red-->
    </head>
    <body>
                  外部樣式表規定body內部的字體為yellow
                  <p> 內部樣式表改了body內部p內的字體為red </p>
                  <p style="color: blue">內聯樣式表改了p的字體為blue </p>
                  <!-- style后“內部規定了p內的字體為blue-->
    </body>
</html>

style.css文件

body{color: yellow}
<!-- body內的p內的字體顏色為red-->

效果如圖

由上述例子我們可以看到，CSS的位置和他們的優先級。

外部樣式表

當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在（html文檔的）頭部：

格式

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>" />
</head>

瀏覽器會從文件 mystyle.css 中讀到樣式聲明，并根據它來格式文檔,mystyle.css也可為指向某文件的網頁鏈接(例https://assets-cdn.github.com/assets/frameworks-77c3b874f32e71b14cded5a120f42f5c7288fa52e0a37f2d5919fbd8bcfca63c.css）只要瀏覽器能get到就行，推薦以css為拓展名

css文件書寫語法

即

標簽1 { 聲明1;聲明2;...聲明N;}
標簽2 { 聲明1;聲明2;...聲明N;}
標簽3 { 聲明1;聲明2;...聲明N;}
...

標簽即為html標簽，表明之后聲明的生效范圍，聲明是指標簽內范圍的具體格式，聲明一般為屬性:值，當值有多個字符串時用引號"括起來值的所有單詞。
示例

body{color: yellow}

就表明標簽body內部所有字體的顏色為yellow，更多標簽和聲明參見
[轉載&修改]20170907html學習(三)css樣式表
 CSS 手冊
或者搜索css樣式大全之類的關鍵詞
更多高級書寫語法

標簽1 標簽2 {聲明}
表示生效范圍為標簽1內的標簽2內的內容格式
標簽1，標簽2，標簽3{聲明}
表示標簽1，2，3內的內容格式都為聲明的格式

有時間繼續寫

內部樣式表

當單個文檔需要特殊的樣式時，就應該使用內部樣式表。可以使用 <style> 標簽在html文檔head標簽內定義

格式

<head>
<style type="text/css">
規則
</style>
</head>

規則書寫語法
同css文件書寫語法

內聯樣式

僅需要在一個標簽內上應用一次時，使用內聯樣式例
格式

<標簽 style="聲明1;聲明2;...聲明N;">標簽內部的內容</標簽>

聲明語法
同css文件書寫語法中的聲明語法一樣屬性:值

備注

建議多在網頁上，右鍵查看源代碼，可以查看相關網站的html內容,chrome瀏覽器，f12還可查看與html搭配的各種元素，有的網站還可看到css文件
chrome在F12查看源代碼時可以，再選擇element，可以更改源代碼查看效果，應用把表單類型password改為text，可查看瀏覽器自動填充密碼

后續學習

20170907html學習(二)常用標簽，屬性
 [轉載&修改]20170907html學習(三)css樣式表

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

20170809html學習(一)語法結構

20170809html學習(一)語法結構

HTML學習(一)語法結構

參考

簡介

HTML文件

HTML語法

標簽

標簽屬性

常用標簽

1. 表單<form>

1.1 常用定義

1.2 文本輸入 type=text

1.3 密碼 type=password

1.4 單選按鈕 type=radio

1.5 復選框 type=checkbox

1.6下拉列表

單選下拉列表

復選下拉列表

1.7 提交按鈕 type="submit"

1.8示例

更多的需要再學

CSS

CSS 的創建

外部樣式表

內部樣式表

內聯樣式

備注

后續學習

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

20170809html學習(一)語法結構

HTML學習(一)語法結構

參考

簡介

HTML文件

HTML語法

標簽

標簽屬性

常用標簽

1. 表單<form>

1.1 常用定義

1.2 文本輸入 type=text

1.3 密碼 type=password

1.4 單選按鈕 type=radio

1.5 復選框 type=checkbox

1.6下拉列表

單選下拉列表

復選下拉列表

1.7 提交按鈕 type="submit"

1.8示例

更多的需要再學

CSS

CSS 的創建

外部樣式表

內部樣式表

內聯樣式

備注

后續學習

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频