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. spring json的支持

    在spring中可以通过配置来实现对json的支持: 以下连接是看到的一篇对这方面内容讲解比较好的文章 http://www.cnblogs.com/fangjian0423/p/springMVC- ...

  2. ReentrantLock总体概括

    一.锁的实现原理: JAVA concurrent包下面的锁是通过AbstractQueuedSynchronizer内的Node类下面的state属性来实现的,并且锁的可重入属性也是通过state实 ...

  3. 将url动态转换成二维码插件 - 兼容IE8

    插件地址  http://static.runoob.com/assets/qrcode/qrcode.min.js ,网页直接打开,然后ctrl+s保存到本地. <!DOCTYPE html& ...

  4. docker安装指定版本TAG的镜像

    在docker中安装镜像,一般过程是,docker search 软件名称. 本文以tomcat为例,讲解下载指定版本TAG的tomcat. 搜索tomcat镜像 $ sudo docker sear ...

  5. 【bzoj3684】 大朋友和多叉树 生成函数+多项式快速幂+拉格朗日反演

    这题一看就觉得是生成函数的题... 我们不妨去推下此题的生成函数,设生成函数为$F(x)$,则$[x^s]F(x)$即为答案. 根据题意,我们得到 $F(x)=x+\sum_{i∈D} F^i(x)$ ...

  6. Anaconda 入门详解

    Anaconda Anaconda简介 Anaconda是一个免费开源的Python和R语言的发行版本,用于计算科学(数据科学.机器学习.大数据处理和预测分析),Anaconda致力于简化包管理和部署 ...

  7. EditText格式化11位手机号输入xxx xxxx xxxx

    EditText格式化11位手机号输入xxx xxxx xxxx  /**     * 格式化11位手机号码输入 xxx xxxx xxxx格式     * 如果一直是添加:输入到第三个或第8个数字时 ...

  8. ms-sql 给表列添加注释

    需求: 在创建数据库是对相应的数据库.表.字段给出注释. 解决方案: 首先,要明确一点的是注释存在sysproperties表中而不是跟创建的表捆绑到一起的(我的理解). 一.使用SQL Server ...

  9. 基于python的多线程暴破脚本

    搭建了一个本地wordpress,写一个基于多线程异步I/O的暴力破解 1 测试 提交错误的表单数据时,查看请求参数 登录时发送的cookie 2 登录分析 经过多次测试,发现无论是输入正确的密码还是 ...

  10. activemq控制面板含义

    Name 消息队列的名称 Number Of Pending Messages 等待消费的消息数量,即未出队列的消息数量.可以理解为总接收数-总出队列数 (未持久化的话,重启acmq后会清零) Num ...