整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
著互聯網的不斷發(fā)展與前端開發(fā)技術的不斷進步，越來越多的人想在前端開發(fā)市場中分一杯羹，而HTML語言憑著它簡單易懂的特性成為了不少計算機萌新的入門語言。那么什么是HTML呢？
HTML，即超文本標記語言，是一種標識性的語言。它包括一系列標簽，通過這些標簽可以將網絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。
使用HTML語言，將所需要表達的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件“翻譯”成可以識別的信息，即現在所見到的網頁。而HTML標簽是HTML語言中最基本的單位，是HTML最重要的組成部分。
標簽一般分為兩種：
1. 塊級標簽
占一整行的標簽。如<h>、<p>、<div>、<form>等
2. 行內標簽
可以多個標簽共同占用一行的標簽。比如：<span>,<a>,<input>,<img>,<label>等
3. 塊級標簽特點
4. 行內標簽特點
平時寫代碼很少用到HTML的特殊字符，最常用的可能是 （空格）了，但有時在移動端為了節(jié)省時間，可能會用這些字符實現某種特殊效果。
使用方法：
常用HTML特殊字符
作用：聲明文檔的解析類型(document .compatMode)，避免瀏覽器的怪異模式。
瀏覽器有怪異模式（BackCompat）和標準模式（CSS1Compat）兩種模式，那么何為怪異模式和標準模式呢？
如果你的頁面沒有DOCTYPE的聲明，那么compatMode默認就是BackCompat,，如果是這樣的話那就很麻煩了-------瀏覽器按照自己的方式解析渲染頁面，即在不同的瀏覽器顯示不同的樣式。
但是如果你的頁面添加了<!DOCTYPE html>，那么就等同于開啟了標準模式，瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
這就是<!DOCTYPE html>的作用。
<meta>標簽用于提供關于 HTML 文檔的元數據（元數據是關于數據的信息），元數據不會顯示在頁面上，但是對于機器是可讀的。例如meta被用于設置關鍵字、設置頁面描述、設置作者、設置字符集、設置頁面定時跳轉等等。meta標簽放置在head標簽中，對meta的設置對搜索引擎注冊、搜索引擎優(yōu)化排名等有至關重要的作用。
<meta>有兩個屬性，分別是http-equiv屬性和name屬性，不同屬性有不同的參數，這些不同的參數使得名，meta標簽有不同的功能：
http-equiv屬性
顧名思義，相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
name屬性
name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。
<title>開云見日</title>
link標簽有兩個作用：
1.設置標簽頁圖標：
2.外聯CSS文件：
用于存放或編寫css文件：
<style type="text/css"></style>
1.引進文件
<script type="text/javasvript" src="http://www.ncerp.cn/js/main.js"></script>
2.寫js代碼
<script type="text/javascript">...</script>
屬性如下：
HTML還有很多標簽，像<ul>、<ol>、<dl>、<li>、<br>等等。在目前的移動應用開發(fā)大潮下，使用web技術進行移動應用開發(fā)正變得越來越流行，慢慢會變成以HTML為核心的技術棧配合數據庫的天下。讓我們找準時代發(fā)展方向，努力學習，成為時代的弄潮兒吧!
本文，有很多很棘手的問題，例如使用sublime 編輯器可能安裝插件的時候會使用不了view in browser我公司的電腦可以安裝、結果家里的電腦就報編碼錯誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網頁，可以群（526929231）使勁砸我得到解決~ sublime編輯器對于前端來說確實很好用！很好用！很好用！ SublimeText、Webstorm推薦這兩個編輯器
剛開始設計HTML語言是為了將文字圖像關聯在一起，用另一臺發(fā)送或接收
HTML 不是一種編程語言，而是一中標記語言(mark-up language),標記語言是一套標記標簽(mark-up tag)
標簽是由尖括號 < > 把關鍵詞括起來，標簽通常是成對出現的
讀取 HTML 文檔，使用標簽來解析頁面的內容，以網頁的形式現實，瀏覽器不會現實HTML標簽
每種瀏覽器都有自己的內核(引擎)（解析網頁的一個程序，io以什么方式去渲染它都要通過引擎去執(zhí)行）
目前主流的瀏覽器分為五種
Chrome谷歌瀏覽器 （Webkit內核，V8 js引擎）
Firefox火狐瀏覽器 （Gecko內核）
Internet Explorer IE瀏覽器（ Trident內核）
Opera 歐朋瀏覽器 （Presto內核） 主要市場：移動端
Safari 蘋果瀏覽器 （Webkit內核，但JS引擎為Nitro）
不需要去記，簡單了解下
標簽必須閉合
所有標簽名一律小寫
代碼縮進，使閱讀代碼更加易懂
特殊符號規(guī)范使用
命名規(guī)范，見名之意
PS: 所有的標記符號都是半角英文
眾說紛紜編輯器太多，最終只是一個工具，希望同學們能從萬千世界中找到適合自己的編輯器伙伴
| 編輯器 | 描述 |
|---|---|
| EditPlus | 手寫模式，適合初學手寫，無代碼提示(有IE調試視圖) |
| Sublime | 插件特別多，占用內存小，啟動速度快，打開大項目較慢，管理文件方式有些缺陷 |
| webstorm | 集成插件特別多，啟動較慢，占用內存大，開發(fā)和管理視圖都很方便 |
| Dreamweaver | 適合初學，主要代碼提示和代碼插入功能強大，主要偏向于設計(有設計視圖) |
| 插件名 | 描述 | 詳情請戳 |
|---|---|---|
| emmet | 前端自動補全，提供快捷補全方式 | |
| ColorPicker | 調色板，顏色選擇器 | |
| SublimeTmpl | sublime模板，可以快速創(chuàng)建一個HTML模板 | |
| view in browser | 用快捷方式打開瀏覽器進行調試HTML(需要配置參考后面網頁) | |
| LiveReload | 實時刷新HTML(編輯器里按下保存ctrl+s的時候，已經打開的HTMl會自動刷新) | 谷歌插件文件安裝方法需要配合谷歌LiveReload插件插件文件下載 |
| Color Highlighter | CSS顏色代碼高亮及顏色預覽提示 | |
| CSS3 | CSS3的代碼高亮提示 | 還針對了CSS3的選擇器及錨類選擇器:hover :first-child :first-child ...的高亮 |
| JavaScript Completions | 原生js 代碼提示 | |
| Sublime-Better-Completion | 可自選開啟代碼提示，支持jQ、js、bootstrap、php、sql ... | 倉庫地址此插件只能通過Github克隆下載安裝安裝方法 |
注：Github 網頁中 下面是有詳細的使用方法 packagecontrol.io官網 里面search 可以進行搜索插件名字來找到具體使用方法，還有什么不懂或者安裝出現編碼錯誤以及安裝不上的可以拍打我~
| 配置 | 描述 |
|---|---|
| !DOCTYPE html | 不是標簽，主要用于文檔類型的聲明 |
| charset="utf-8" | 聲明字符編碼集 |
| http-equiv="Content-Type" | 把Content屬性關聯到HTTP頭部(協(xié)議頭) |
HTML模板
簡單了解，并不需要熟練掌握
Dom節(jié)點樹
.html .htm這兩種是比較常見的
在早期系統(tǒng)中文件名是有8+3組成 三個擴展名所以不支持四個字母的擴展采用.htm
現在通常使用.html作為擴展名
接下來所有的標簽元素學習都在body標簽里面去敲打實現、
為了突出標題，字體大小和加粗發(fā)生相應的改變
<h1>我是大主題</h1> <h2>我是大主題</h2> <h3>我是大主題</h3> <h4>我是大主題</h4> <h5>我是大主題</h5> <h6>我是大主題</h6>
<!doctype html><!-- 讓瀏覽器使用html5的標準解析 --> <html> <head> <!-- 設置字符編碼集讓瀏覽器使用utf8解析當前網頁 --> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="keywords" content="SEO搜索引擎，關鍵詞，多個請用逗號分開" /> <meta name="description" content="網頁描述，八十字內" /> <title>瀏覽器標簽頁上的網頁標題</title> </head> <body> <!-- 所有的標簽學習都在這body里面去敲，上面head元素里面的內容做個了解就可以了 --> <h1>我是大標題</h1> <h2>我是主題2</h2> <h3>我是主題3</h3> <h4>我是主題4</h4> <h5>我是主題5</h5> <h6>我是主題6</h6> </body> </html>
可以發(fā)現h標簽從h1到h6會隨著數值越小字越小，并且都是會加粗和各占一行的狀態(tài)（前后的元素都會被換行）
h1標簽一般一個頁面里面只會寫一次，為了讓搜索引擎爬取到 (寫一次利于SEO搜索引擎優(yōu)化)
<p> 冬著一身素衣，緩緩而來，季節(jié)沒有了往日的姹紫嫣紅，卻用簡單的線條，勾勒出一幅潔白的畫，純潔通透，輕盈自然。 </p>
剛我們了解到了瀏覽器是識別尖括號的，如果要在頁面中顯示html標記那要怎么做呢？這時候就需要特殊符號的表示來顯示
| 符號 | 描述 |
|---|---|
| 空格 | |
| 小于 | < |
| 大于 | > |
| 引號 | " |
| 版權 | © |
| ×叉 | × |
| & | & |
| 符號 | 描述 |
|---|---|
| B標簽 | 物理加粗，頁面呈現加粗狀態(tài). |
| Strong標簽 | 不僅能加粗，還利于搜索引擎優(yōu)化 |
<b>物理加粗，頁面呈現加粗狀態(tài).</b> <strong>不僅能加粗，還利于搜索引擎優(yōu)化，就是類似于百度、谷歌這種搜索引擎爬取你的網頁的時候會查找這個標簽里面的內容來優(yōu)化顯示網頁的排名</strong>
可以根據word文檔上面發(fā)現 b是加粗 u是下劃線 i是傾斜 同樣適用于標簽
<i>我是傾斜</i> <u>我加了下劃線</u>
鏈接一個頁面,點擊則會跳轉這個鏈接頁面
使用錨點滾動到設定的位置
<a href=""></a> a標簽中的href控制點擊的時候跳轉到哪里如果沒寫表示刷新當前頁面 <a href="#"></a> 跳轉到當前頁面(回歸到頁面頂部) <a href="javascript： void(0);"></a> 死鏈接，不會跳轉，一般用于js特效 <a href="#name">錨點到一個標簽上所對應的ID名字，點擊則跳到那個標簽位置</a> <a >跳轉到百度</a> 跳轉到百度 需要注意的是 http 協(xié)議不能少
點擊#flag的a標簽的時候會跳到到上面h2標簽
只有擁有name屬性的
a標簽
才能錨點,還有一種方式是通過ID標識唯一元素，也可以跳轉(不僅僅是a標簽)
| 描述 | 標簽 |
|---|---|
| 滾動標簽 | marquee |
| 字體標簽 | font |
| 定義水平線 | hr |
marquee
| 屬性 | 描述 |
|---|---|
| direction | 滾動方向 |
| behivior | 行為 |
behivior
| 值 | 描述 |
|---|---|
| alternate | 交替滾動 |
| scroll | 滾動 |
| slide | 滑落 |
| 屬性 | 描述 |
|---|---|
| color | 顏色 |
| size | 0-7 |
| face | 字體 |
與font相似，擁有color和size屬性
hr標簽沒有結束標簽 按照早期的習慣也H5也遵循XHTML的解析 所以統(tǒng)一會加一個反斜杠表示結束這個標簽，不加也能夠正確顯示，但是養(yǎng)成一個良好的習慣確實重要，比如微信小程序就是沒有結束標簽必須要使用一個反斜杠結尾否則直接報錯、
結合今天所學，寫一個簡單的網頁
內容如下：
寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫，網上一大把哈哈，可以自己寫下，鍛煉下思維
需要包括h、p、a、加粗
題材不限，至少200字
在習題一的文章底部，使用滾動標簽進行滾動方向為45°
過web前端開發(fā)的都知道，每個標簽都自帶樣式，比如body自帶margin，a標簽自帶下劃線，li標簽自帶小圓點，但是你知道更具體的嗎？以下的文檔還原了w3c對每個標簽最初的定義，收藏一下，對你一定有幫助。
@charset "utf-8";/*@charset "gb2312";*//**
* ============================================================================
* 版權所有: 切版
* 網站地址: http://www.qieban.cn
* 該文件為W3C為標簽賦予最原始樣式規(guī)則、制作參考無實際作用
* ----------------------------------------------------------------------------
**/
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block } li { display: list-item } head { display: none } table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } th { font-weight: bolder; text-align: center } caption { text-align: center } body { margin: 8px } h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .75em 0 } h3 { font-size: 1.17em; margin: .83em 0 } h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } h5 { font-size: .83em; margin: 1.5em 0 } h6 { font-size: .75em; margin: 1.67em 0 } h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } blockquote { margin-left: 40px; margin-right: 40px } i, cite, em, var, address { font-style: italic } pre, tt, code, kbd, samp { font-family: monospace } pre { white-space: pre } button, textarea, input, select { display: inline-block } big { font-size: 1.17em } small, sub, sup { font-size: .83em } sub { vertical-align: sub } sup { vertical-align: super } table { border-spacing: 2px; } thead, tbody, tfoot { vertical-align: middle } td, th { vertical-align: inherit } s, strike, del { text-decoration: line-through } hr { border: 1px inset } ol, ul, dir, menu, dd { margin-left: 40px } ol { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } u, ins { text-decoration: underline } br:before { content: "\A" } :before, :after { white-space: pre-line } center { text-align: center } :link, :visited { text-decoration: underline } :focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed } @media print { h1 { page-break-before: always } h1, h2, h3,
h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid } }切版，切圖網旗下靠譜的web前端外包服務切圖客群體。http://www.qieban.cn/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
