HTML 기본 이해
1. 소개
1.HTML은 Hypertext Markup Language로, 해석 언어인 Standard Universal Markup Language에 따른 응용 프로그램입니다.
2. "하이퍼텍스트"는 페이지에 그림, 링크는 물론 음악이나 프로그램과 같은 텍스트가 아닌 요소까지 포함될 수 있음을 의미합니다.
3. 하이퍼텍스트 마크업 언어의 구조는 "head" 부분(영문: Head)과 "body" 부분(영문: Body)으로 구성되며, "head" 부분은 웹페이지에 대한 정보를 제공합니다. 본문" 부분은 웹페이지에 대한 정보를 제공합니다. 웹페이지의 특정 콘텐츠입니다.
2. 언어 기능 (내용 발췌 - 바이두 백과사전 )
1. 단순성: 하이퍼텍스트 마크업 언어 버전 업그레이드는 슈퍼세트 방식을 채택하여 더욱 유연하고 편리합니다.
2. 확장성: 하이퍼텍스트 마크업 언어의 광범위한 적용으로 인해 향상된 기능과 추가된 식별자에 대한 요구 사항이 생겼습니다. 하이퍼텍스트 마크업 언어는 시스템 확장을 보장하기 위해 하위 클래스 요소 방식을 채택합니다.
3. 플랫폼 독립성: 개인용 컴퓨터가 인기가 있지만 MAC 등 다른 기계를 사용하는 사람들이 많습니다. 월드와이드웹(WWW).
4.다양성: 또한 HTML은 인터넷의 보편적 언어이자 간단하고 보편적인 올인원 마크업 언어입니다. 이를 통해 웹 페이지 제작자는 텍스트와 이미지가 결합된 복잡한 페이지를 만들 수 있으며, 이러한 페이지는 사용되는 컴퓨터나 브라우저 유형에 관계없이 인터넷상의 다른 사람 누구나 볼 수 있습니다.
3. 전체 구조
HTML 표준 파일 구조는 기본적인 전체 구조, 즉 하이퍼텍스트 마크업 언어 파일의 시작과 끝 태그, 하이퍼텍스트 마크업 언어의 헤더와 엔터티로 구성됩니다. 페이지의 전체 구조를 확인하는 데 사용되는 이중 마커가 3개 있습니다.
1. 전체 파일 코드
ulesules lves , 이는 파일이 하이퍼텍스트 마크업 언어(전체 이 태그의 중국어 이름), Hypertext Markup Language 파일의 태그입니다.
2. 헤더 내용
; 이 두 개의 마커는 각각 헤더 정보의 시작과 끝을 나타냅니다. 헤더에 포함된 태그는 페이지의 제목, 서문, 설명 및 기타 내용으로, 내용 자체로 표시되지는 않지만 웹페이지의 표시 효과에 영향을 미칩니다. 헤더에 가장 많이 사용되는 태그는 제목 태그와 메타 태그입니다. 제목 태그는 웹 페이지의 제목을 정의하는 데 사용되며 웹 페이지 제목은 웹 페이지 창 표시줄에 표시됩니다. 브라우저 및 컬렉션 목록에 의한 북마크.HTML 헤드 요소:
meta tag in HTML
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>
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>
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