HTML 基本認知
一、簡介
## 1.HTML是
超文本標記語言,標準通用標記語言下的一個應用,解釋性語言。 2.
「超文本」就是指頁面內可以包含圖片、鏈接,甚至音樂、程式等非文字元素。3.超文本標記語言的結構包括「頭」部分(英文:Head)、和「主體」部分(英文:Body),其中「頭」部提供關於網頁的訊息,「主體」部分提供網頁的具體內容。
二、語言特色(內容摘錄自--百度百科)
# 1 .
簡易性:超級文字標記語言版本升級採用超集方式,從而更加靈活方便。
2.可擴展性:超級文字標記語言的廣泛應用帶來了加強功能,增加標識符等要求,超級文本標記語言採取子類元素的方式,為系統擴充帶來保證。
3.平台無關性:雖然個人電腦大行其道,但使用MAC等其他機器的大有人在,超級文字標記語言可以使用在廣泛的平台上,這也是萬維網( WWW)盛行原因之一。
4.
通用性:另外,HTML是網路的通用語言,一種簡單、通用的全置標記語言。它允許網頁製作人建立文字與圖片結合的複雜頁面,這些頁面可以被網路上任何其他人瀏覽到,無論使用的是什麼類型的電腦或瀏覽器。三、整體結構
HTML標準檔案結構有一個基本的整體結構,即超文本標記語言檔案的開頭與結尾標誌和超文本標記語言的頭部與實體兩大部分。有三個雙標記符用於頁面整體結構的確認。
1.檔案程式碼整體
標記,說明該檔案是用超文本標記語言(本標籤的中文全名)來描述的,是超文本標記語言檔案的開始標記和結尾標記。
2.頭部內容
HTML head 元素:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的meta标签</title> 5 6 <!--设置网页的编码--> 7 <meta charset="utf-8"/> 8 9 <!--设置网页的关键字-->10 <meta name="keywords" content="页面关键字"/>11 12 <!--设置网页的描述-->13 <meta name="description" content="网页相关描述信息" />14 15 <!--设置网页的更新信息-->16 <meta name="revised" content="更新信息,2017年3月2日09:55:00"/>17 18 <!--设置网页刷新频率以及跳转地址-->19 <meta http-equiv="refresh" content="3," />20 21 <!--设置标题处的ico小图标-->22 <link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/>23 24 <!--引入一个外部的css层叠样式表-->25 <link rel="stylesheet" href="./css.css?1.1.11" type="text/css"/>26 </head>27 <body>28 </body>29 </html>#######HTML當中的meta標籤######### ######## ## head標籤中的Script標籤和Style標籤##################
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>head标签中的Script标签和Style标签</title> 5 <meta charset="utf-8"/> 6 7 <!--通常是写js用的标签--> 8 <script> 9 //在网页打开的同时弹出了一个对话框10 //alert('弹框内容');11 </script>12 13 <!--引入一个外部的js文件-->14 <script src="1.js?1.1.11"></script>15 16 <!--在当前页面来添加css样式-->17 <style>18 font{19 color:red;20 }21 </style>22 </head>23 <body>24 25 </body>26 </html>######head標籤中的Script標籤和Style標籤##### #
3.主体内容
;,网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。
HTML当中的文本标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的文本标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <!--标题标签--> 9 <h1>让我们来看一下,<u>字体</u>字体的大小变化</h1>10 <h2>让我们来看一下,字体的大小变化</h2>11 <h3>让我们来看一下,字体的大小变化</h3>12 <h4>让我们来看一下,字体的大小变化</h4>13 <h5>让我们来看一下,字体的大小变化</h5>14 <h6>让我们来看一下,字体的大小变化</h6>15 16 <!--水平线标签-->17 <hr/>18 19 <!--b标签:普通的加粗标签-->20 <b>文字加粗</b><br/>21 22 <!--strong标签:加粗强调的作用,SEO可以着重抓取到的内容-->23 <strong>文字加粗(强调)</strong><br/>24 25 <!--斜体、强调标签-->26 <em>斜体(强调)</em><br/>27 28 <!--普通的斜体标签-->29 <i>让你随时<u>脉动</u>回来!</i><br/>30 31 <!--普通的斜体标签-->32 <cite>让你随时脉动回来!</cite><br/>33 34 <!--下标标签-->35 H<sub>2</sub>0<br/>36 37 <!--上标标签-->38 2<sup>2</sup>=439 40 <!--段落标签-->41 <p>p标签代表段落,一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>42 43 </body>44 </html>
文本标签页面展示效果:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的文本标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <h1>HTML当中的文本标签</h1> 9 10 <!--定义文档的输出方向-->11 <bdo dir="ltr">正大光明</bdo><br/>12 <bdo dir="rtl">正大光明</bdo><br/>13 14 <!--定义一个短的引用-->15 沙僧说:<q>师傅,大师兄和二师兄被妖怪抓走啦~~</q><br/>16 17 <!--表示一个缩写的形式-->18 <abbr title="United States">US</abbr><br/>19 20 <!--删除线标签-->21 测试删除线测试删除线测试删除线测试删除线测试删除线<del>苍老师?</del>,<del>被删除了哈哈</del><br/>22 23 <!--定义一段被隐藏的文字,summary标签可以定义列表的标题-->24 <details>25 <summary>鬼吹灯系列丛书</summary>26 鬼吹灯之精绝古城<br/>27 鬼吹灯之黄皮子坟<br/>28 鬼吹灯之云南虫谷<br/>29 </details>30 31 <!--对话标签-->32 <dialog open>33 <dt>男:</dt><dd>我们分手吧~~</dd>34 <dt>女:</dt><dd>为什么?</dd>35 <dt>男:</dt><dd>我怀孕了~~</dd>36 <dt>女:</dt><dd>不,不可能,我不相信……</dd>37 <dt>男:</dt><dd>你看你,我们连最起码的信任都没有了,还谈什么?</dd>38 <dt>女:</dt><dd>…………</dd>39 </dialog>40 </body>41 </html>
HTML当中的列表标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML当中的列表标签</title> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <h1>HTML当中的列表标签</h1> 9 <!--有序列表-->10 <ol type="A">11 <li>有序列表1</li>12 <li>有序列表2</li>13 <li>有序列表3</li>14 </ol>15 16 <!--无序列表-->17 <ul type="circle">18 <li>无序列表1</li>19 <li>无序列表2</li>20 <li>无序列表3</li>21 </ul>22 23 <!--格式化输出标签-->24 <pre class="brush:php;toolbar:false">25 *26 * *27 * * *28 * * * *2930 31