day44前端开发1之html基础
web前端開發1
一.前端三劍客之html
?1.為標記語言,是非編程語言
?2.自身不具備邏輯,遇到負責重復操作只能全部手寫(Ctrl+C > V)
?3.組成:標簽, 指令, 實體
?標簽:由<>包裹,以字母開頭可以結合合法字符可以被瀏覽器解析的標記(純字母或字母與數字組合)
??<zero>小VV</zero>
?指令:被<>包裹,以!開頭的可以被瀏覽器解析的標記
??<!dcotype> <!-- html的注釋 -->
?實體:被&;包裹的#開頭的十進制數或特殊字母組合
??<zero>
?文檔類型:規定該頁面的標簽遵循的html語法(h5)
??<!doctype html>
二.第一個頁面
?<!-- 文檔類型; 標簽語法為h5 -->
?<!-- h5語法特點 -->
?<!--
??1.不區分大小寫
??2.有很多系統標簽,一般都具有語義
??3.可以隨意定義自定義標簽
??4.h5內容不保留空白字符(制表符)
??5.提倡小寫
?-->
?<!doctype html>
?<!-- html:文檔根標簽 -->
?<html>
?<!-- html只有一兒一女:head,body,所以可以省略縮減 -->
?<!-- html語法中沒有明確規定縮減規則,但從美觀可讀性出發,開發者要嚴格遵循縮減 -->
??<head> 主要放的是功能
???<!-- 包含內容:樣式表,腳本,元信息,內嵌代碼塊 -->
???<!-- 字符編碼 -->
???<meta charset="utf-8" />
???<!-- <meta http-equiv="content-type" content="text/html;charset=utf-8" /> --
???<!-- SEO -->
???<meta name="keywords" content="培訓,Python培訓,IT培訓,peixun" />
???<meta name="description" content="老男孩皇家培訓機構" />
???<!-- 移動適配 -->
???<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
???<!-- tag圖片 --> 網站的圖標
???<!-- <link rel="icon" type="image/x-icon" href="https://www.baidu.com/favicon.ico"> -->
???<link rel="shortcut icon" type="image/x-icon" href="icon.png">
???<title>第一個頁面</title>
??</head>
??<body>? 主要放的是內容
???<!-- 包含內容:幾乎一切內容 -->
??</body>
?</html>
?<!-- 以上為最簡易頁面模塊html>head+body -->
?<!-- 一個頁面只存在一個標準模板 -->
?<!-- doctype必須出現在第一行 -->
?<!-- 特殊:如果沒有書寫模塊,瀏覽器解析會按"自己心情"幫你添加模板 -->
三.常用標簽
?1.head內相關標簽
??1、指定字符集(字符編碼)
???<meta charset="gbk">
??2、頁面描述
???<meta name="Description" content="具體描述。。。">
??3、關鍵字：有助于搜索引擎SEC優化，再怎么優化也抵不過競價排名
???<meta name="Keywords" content="網易，郵箱，游戲，新聞">
??4、3秒后跳轉(了解)
???<meta http-equiv="refresh" content="3,http://www.baidu.com">
??5、三秒刷新(了解)
???<meta http-equiv="refresh" content="3">
??6、移動適配 (了解)
??7、標題
???<title>百度一下，你就知道</title>
??8、網站的圖標
???<link rel="icon" href="https://www.baidu.com/favicon.ico">
??9、定義內部樣式
???<style></style> (css定制? 當前了解)
??10、引入外部樣式文件(css定制,引入css文件? 當前了解)
???<link rel="stylesheet" href="mystyle.css">
??11、定義JavaScript代碼或引入JavaScript文件(js定制,引入js文件? 當前了解)
???<script src="hello.js"></script>
?2.body內相關標簽
??1.無語義標簽 (css重點介紹)
???div:最常用的標簽,沒有之一
????<div></div>
???span:最常用的純文本標簽
????<span></span>
??2.常用語義標簽
???1.標題:h1~h6
????h1標簽較經常出現,作為頁面最大title形式出現,且一個頁面一般只出現一次
?????<h1>一級標題</h1>
?????<h2>二級標題</h2>
?????<h6>六級標題</h6>
???2.br:換行 | hr分割線
????<br>好<br>的<br>?? <hr>呵<hr>呵<hr>
??3.文本標簽
???i和em:很常用的標簽,一般不作為斜體文本使用,作為字體圖片使用,原因寫法簡單
???<i>斜體</i>??? <em>以斜體方式強調</em>
???<b>加粗</b>??? <strong>以加粗方式強調</strong>
???p:段落標簽具有具體區域,成段出現,段落之間存在段落間距
???<p>段落</p>
???per原樣文本標簽:會保留所有字符,原樣顯示
???<pre></pre> ?
???ins和u:樣式具有下劃線
???<ins>插入的文本強調且有下劃線</ins>? <u>插入的文本具有下劃線</u>
???<del>刪除的文本</del>???? <s>刪除的文本</s>
???在html5中
????strong == b
????ins == u
????em == i
????del == s
????新的標簽是有語義的，而老的只是單純的添加樣式（這是CSS干的事）
?????strong的語義：定義重要性強調的文字
?????ins的語義（inserted）：定義插入的文字
?????em的語義（emphasized）：定義強調的文字
?????del的語義（deleted）：定義被刪除的文字
???sup上標子<!-- 10的平方 -->
???<span>10<sup>2</sup></span>
???sub下標子<!-- 水分子 -->
???<span>H<sub>2</sub>O</span>
???small右標:小號字體
???<span>你很帥<small>誰信</small></span>
???注明拼音<!-- pinyin -->
???<ruby>牛掰<rt>niubai</rt></ruby>
四.標簽分類
?1.單雙標簽 -->
?<!-- 標簽都需要閉合 -->
?<!-- 單標簽:閉合操作在本身的尾部,并且可以省略(自定義標簽要自我標注閉合) ==> 單標題一般具有特殊功能,單標簽主功能 -->
?<!-- 雙標簽:閉合操作有對應的結束標簽完成,也可以省略(強烈不建議) ==> 雙標簽一般具有文本(普通文本與超文本),雙標簽主內容 -->
?2.行塊標簽 -->
?<!-- 行:內聯,不具備自身寬高,通常同行顯示 -->
?<!-- 塊:塊級,具備自身寬高,通常換行顯示 -->
?<!-- 自定義標簽均屬于內聯標簽 -->
?<!-- span{我是span$}*2+div{我是div$}*2 -->
?3.單一組合標簽 -->
?<!-- 組合標簽必須組合出現,協同下才能顯示產生相應的內容與效果
轉載于:https://www.cnblogs.com/wu-jia/p/9677698.html
總結
以上是生活随笔為你收集整理的day44前端开发1之html基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 几个圆圈是谁画的啊？
- 下一篇： Django --ORM常用的字段和参数