HTML 基本认识

一、简介

　　1.HTML是超文本标记语言，标准通用标记语言下的一个应用，解释性语言。

　　2.“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

　　3.超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

二、语言特点（内容摘抄自--百度百科）

　　1.简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。　　

　　2.可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

　　3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行原因之一。

　　4.通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

三、整体结构

　　HTML标准文件结构有一个基本的整体结构，即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

　　1.文件代码整体

　　　　标记符<html>,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,<html></html>是超文本标记语言文件的开始标记和结尾标记。

　　2.头部内容

　　　　<head></head>；这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，

　　　　其中标题标记符用于定义网页的标题，它的内容显示在网页窗口栏中，网页标题可被浏览器用作书签和收藏清单。

　　　　 HTML head 元素：

　　　　

　　　HTML当中的meta标签

 <!DOCTYPE html>

 <html>

     <head>

         <title>HTML当中的meta标签</title>

         <!--设置网页的编码-->

         <meta charset="utf-8"/>

         <!--设置网页的关键字-->

         <meta name="keywords" content="页面关键字"/>

         <!--设置网页的描述-->

         <meta name="description" content="网页相关描述信息" />

         <!--设置网页的更新信息-->

         <meta name="revised" content="更新信息,2017年3月2日09:55:00"/>

         <!--设置网页刷新频率以及跳转地址-->

         <meta http-equiv="refresh" content="3,http://www.bing.com" />

         <!--设置标题处的ico小图标-->

         <link rel="shortcut icon" href="./my1.ico" type="image/x-icon"/>

         <!--引入一个外部的css层叠样式表-->

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

     </head>

     <body>

     </body>

 </html>

HTML当中的meta标签

　　　head标签中的Script标签和Style标签

 <!DOCTYPE html>

 <html>

     <head>

         <title>head标签中的Script标签和Style标签</title>

         <meta charset="utf-8"/>

         <!--通常是写js用的标签-->

         <script>

             //在网页打开的同时弹出了一个对话框

             //alert('弹框内容');

         </script>

         <!--引入一个外部的js文件-->

         <script src="1.js"></script>

         <!--在当前页面来添加css样式-->

         <style>

             font{

                 color:red;

             }

         </style>

     </head>

     <body>

     </body>

 </html>

head标签中的Script标签和Style标签

　　3.主体内容

　　　　<body></body>；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

　　　 HTML当中的文本标签

 <!DOCTYPE html>

 <html>

     <head>

         <title>HTML当中的文本标签</title>

         <meta charset="utf-8"/>

     </head>

     <body>

         <!--标题标签-->

         <h1>让我们来看一下，<u>字体</u>字体的大小变化</h1>

         <h2>让我们来看一下，字体的大小变化</h2>

         <h3>让我们来看一下，字体的大小变化</h3>

         <h4>让我们来看一下，字体的大小变化</h4>

         <h5>让我们来看一下，字体的大小变化</h5>

         <h6>让我们来看一下，字体的大小变化</h6>

         <!--水平线标签-->

         <hr/>

         <!--b标签：普通的加粗标签-->

         <b>文字加粗</b><br/>

         <!--strong标签：加粗强调的作用，SEO可以着重抓取到的内容-->

         <strong>文字加粗（强调）</strong><br/>

         <!--斜体、强调标签-->

         <em>斜体（强调）</em><br/>

         <!--普通的斜体标签-->

         <i>让你随时<u>脉动</u>回来！</i><br/>

         <!--普通的斜体标签-->

         <cite>让你随时脉动回来！</cite><br/>

         <!--下标标签-->

         H<sub>2</sub>0<br/>

         <!--上标标签-->

         2<sup>2</sup>=4

         <!--段落标签-->

         <p>p标签代表段落，一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字一段文字</p>

     </body>

 </html>

HTML当中的文本标签

　　文本标签页面展示效果：

 <!DOCTYPE html>

 <html>

     <head>

         <title>HTML当中的文本标签</title>

         <meta charset="utf-8"/>

     </head>

     <body>

         <h1>HTML当中的文本标签</h1>

         <!--定义文档的输出方向-->

         <bdo dir="ltr">正大光明</bdo><br/>

         <bdo dir="rtl">正大光明</bdo><br/>

         <!--定义一个短的引用-->

         沙僧说：<q>师傅，大师兄和二师兄被妖怪抓走啦~~</q><br/>

         <!--表示一个缩写的形式-->

         <abbr title="United States">US</abbr><br/>

         <!--删除线标签-->

         测试删除线测试删除线测试删除线测试删除线测试删除线<del>苍老师？</del>，<del>被删除了哈哈</del><br/>

         <!--定义一段被隐藏的文字,summary标签可以定义列表的标题-->

         <details>

             <summary>鬼吹灯系列丛书</summary>

             鬼吹灯之精绝古城<br/>

             鬼吹灯之黄皮子坟<br/>

             鬼吹灯之云南虫谷<br/>

         </details>

         <!--对话标签-->

         <dialog open>

             <dt>男：</dt><dd>我们分手吧~~</dd>

             <dt>女：</dt><dd>为什么？</dd>

             <dt>男：</dt><dd>我怀孕了~~</dd>

             <dt>女：</dt><dd>不，不可能，我不相信……</dd>

             <dt>男：</dt><dd>你看你，我们连最起码的信任都没有了，还谈什么？</dd>

             <dt>女：</dt><dd>…………</dd>

         </dialog>

     </body>

 </html>

HTML当中的文本标签

　　HTML当中的列表标签

 <!DOCTYPE html>

 <html>

     <head>

         <title>HTML当中的列表标签</title>

         <meta charset="utf-8"/>

     </head>

     <body>

         <h1>HTML当中的列表标签</h1>

         <!--有序列表-->

         <ol type="A">

             <li>有序列表1</li>

             <li>有序列表2</li>

             <li>有序列表3</li>

         </ol>

         <!--无序列表-->

         <ul type="circle">

             <li>无序列表1</li>

             <li>无序列表2</li>

             <li>无序列表3</li>

         </ul>

         <!--格式化输出标签-->

         <pre>

         *

         * *

         * * *

         * * * *

         </pre>

     </body>

 </html>

HTML当中的列表标签

　　页面显示效果：

　　在<ol>标签中增加 type 属性，使其属性值为 A or a or 1 会显示不同的排序编码，可视情况而定

　　HTML当中的超链接标签

　　<a></a>：超链接标签
　　　　　　属性： 值：
　　　　　　href： 路径或外部网站
　　　　　　title： 鼠标移入链接时提示的内容
　　　　　　target： _self (默认，从当前标签页打开链接)
　　　　　　　　　　 _blank (在新标签页中打开链接)
　　　　　　　　　　 _parent (在父级框架中打开链接)
　　　　　　　　　　 _top (在顶级框架中打开链接)
　　　　　　　　　　 framename(在制定框架名的位置打开链接)

 <!DOCTYPE html>

 <html>

     <head>

         <title>HTML当中的超链接标签 a</title>

         <meta charset="utf-8"/>

     </head>

     <body>

         <!--相对路径链接到本地的文件-->

         <a href="./1.html">链接本地HTML文件</a><br/><br/>

         <!--链接到了一个外部的网站-->

         <a href="http://lol.qq.com" target="_blank">英雄联盟官网</a>

         <!--使用绝对路径链接到本地文件-->

         <a href="D:\Wamp\www\test\lesson_HTML\test.html" title="超链接信息">5.html</a>

     </body>

 </html>

HTML当中的超链接标签

　　页面显示效果：

　　a标签的锚点功能

　　　　使 a 链接标签可跳转到页面指定元素的位置

 <!DOCTYPE html>

 <html>

     <head>

         <title>a标签的锚点功能</title>

         <meta charset="utf-8"/>

         <style>

             /*找到4个div添加了一些属性*/

             div{

                 /*设置一下div的宽度*/

                 width:500px;

                 /*设置一下div的高度*/

                 height:500px;

                 /*设置一下div的边框：1像素宽，实线，红色*/

                 border:1px solid red;

             }

         </style>

     </head>

     <body>

         <h1>a标签的锚点功能</h1>

         <a href="#one">第一章：三打白骨将</a><br/>

         <a href="#two">第二章：倒拔垂杨柳</a><br/>

         <a href="#three">第三章：火烧赤壁</a><br/>

         <a href="#four">第四章：刘姥姥进大观园</a><br/>

         <!--第一章-->

         <h2><a id="one"></a>第一章：三打白骨将</h2>

         <div>

             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。

             </p>

         </div>

         <!--第二章-->

         <h2><a id="two"></a>第二章：倒拔垂杨柳</h2>

         <div>

             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。

             </p>

         </div>

         <!--第三章-->

         <h2><a id="three"></a>第三章：火烧赤壁</h2>

         <div>

             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。

             </p>

         </div>

         <!--第四章-->

         <h2><a id="four"></a>第四章：刘姥姥进大观园</h2>

         <div>

             <p>胡八一（靳东饰）上山下乡来到中蒙边境的岗岗营子，带上了家中仅存的一本书——《十六字阴阳风水秘术》①，闲来无事将书中文字背得滚瓜烂熟。之后参军到西藏，遇上雪崩掉落一条巨大的地沟当中，胡八一利用自己懂得的墓葬秘术逃得不死。复员后，胡八一和好友王胖子（赵达饰）一起加入了一支前往新疆考古的考古队。一行人历经万险来到了塔克拉玛干沙漠中的精绝古城遗址，进入了地下“鬼洞”。洞中机关重重、陷阱不断，这神秘的鬼洞似乎在一位先知的掌控之中。

             </p>

         </div>

     </body>

 </html>

a标签的锚点功能

　　

　　HTML当中的常见实体内容：

HTML学习笔记《一》 ---- HTML基本认识的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

  10. ucos实时操作系统学习笔记——任务间通信（消息）

    ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...

随机推荐

  1. Sublime Text shift+ctrl妙用（转载）

    1 :按住shift+ctrl然后按←或→可快速选中一行中的某一部分,相当于双击鼠标选中. 当你想在代码末尾加注释的话,这个方法很好用 输入文字->光标移到文字末尾->按住shift+ct ...

  2. vue复选框选中值获取

    <div id="d5"> <p>{{box5.toString()}}</p> <input type="checkbox&q ...

  3. Android studio 安装的安装若干问题

    1.在国内如何更新android sdk? 由于众所周知的某些原因,我们无法直接连接android sdk的更新服务更新sdk,所以可以通过国内的ftp站点把常用的sdk组件如android plat ...

  4. TestNG参数

    dependsOnMethods可以使测试用例按某个特定的顺序执行 实例: @Test(dependsOnMethods=“s”) public  void  a() System.out.print ...

  5. web worker原理 && SSE原理

    第一部分 什么是 web worker? 我们一直强调JavaScript是单线程的,但是web worker的出现使得JavaScript可以在多线程上跑,只是web worker本身适合用于一些复 ...

  6. Python -- Gui编程 -- Tkinter的使用 -- 基本控件

    1.按钮 tkBtton.py import tkinter root = tkinter.Tk() btn1 = tkinter.Button(root, anchor=tkinter.E,\ te ...

  7. windows设置多用户模式

    在实际使用我们较多使用的都是windows系统的单用户模式,它意味着当我们登录一个用户的时候如果另外一个用户也在登录,那么就得等待另外一个用户退出后才可以登录我们这个用户,但是实际需求中,我们经常会遇 ...

  8. 深度剖析Dubbo源码

    -----------------学习dubbo源码,能给你带来什么好处?----------- 1.提升SOA的微服务架构设计能力   通过读dubbo源码是一条非常不错的通往SOA架构设计之路,毕 ...

  9. 在word中优雅地插入代码

    PlanetB:带行号 http://www.planetb.ca/syntax-highlight-word   Pygments(推荐):不带行号,多种样式可选 http://pygments.o ...

  10. Git的gitattributes文件详解

    转自:Git的gitattributes文件详解 Git的gitattributes文件是一个文本文件,文件中的一行定义一个路径的若干个属性. 1. gitattributes文件以行为单位设置一个路 ...