为什么会出现HTML这个标记语言

超文本标记语言 HyperText Markup Language

HTML是超文本标记语言,标准通用标记语言的一个应用.

"超文本"就是指页面内可以包含图片,链接,甚至音乐,程序等非文字元素.

超文本标记语言的结构包括"头"部分(英语:Head),和主体部分(英语:body),其中"头"部提供关于网页的信息,"主体"部分提供网页的具体内容.

详细介绍

万维网上的一个超媒体文档称之为一个页面（外语：page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（外语：Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接），所谓超级链接，就是一种统一资源定位器（Uniform Resource Locator，外语缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

因为这种文本中含有超链接，可以将不同内存空间上的文本信息组织在一起。例如你写的HTML文件，可能会用到一个herf，它可以直接帮你链接到本地资源和网络资源，明显这种文本最大的特点就是可以通过超连接把不同空间上的资源联合在一起。至于可以显示图片背景等特点，这些功能word、PPT中都有。不是这种文本的最大特点，要使它与其他文本区别开来，当然要以它最大的特点命名。

为什么要学习HTML（HTML有什么用）

从事web开发的最基础的入门技术，下面是五个原因

1、轻松制作卡通动画

Web上的动画很多年来都是使用Flash制作的，但Flash慢慢地变得过时了。今天，如果你想创建一个可以共享在网络上的动画，CSS动画可以帮你完成。使用关键帧动画，你可以定时重复不同的CSS动画。我最喜欢的一个工具是CodePen——它可以用来创建一些有趣的场景，你可以用它来添加你自己的web元素。

2、方便快捷的内容管理和布局

很多内容管理系统在加载内容的时候允许你编辑HTML和CSS。然而，如果你要从一个应用（例如，Microsoft Word ）复制内容粘贴到像WordPress这样的内容管理系统的话，布局问题将经常发生。这个时候HTML和CSS就可以派上用场了。通过了解浏览器应用的默认格式和HTML左边的空标签，解决布局问题只是小菜一碟。

3、制作有艺术内涵的文章和网页

大多数的博客文章使用网站自带的基本风格，但有时自定义样式可以帮助你讲述一个故事。在博客文章或页面上使用艺术指导来直观地呈现你所想要说的，这可以帮助提升用户体验。HTML和CSS实现自定义风格的范围可以从字体到颜色，甚至整个网站的设计。

4、随心所欲 定制一个小网站

有许多定制和维护网站的人并不是web开发人员。有了对HTML和CSS的理解，再加上像Squarespace那样的托管服务，任何人都可以告别模板，来定制自己的小网站。

5、逆向工程——启发你对web开发的兴趣

现代浏览器允许你使用开发工具对网页进行临时更改，如变换链接的颜色。这一个很有趣(也可能是邪恶)，也很伟大的工具，可以让人们对web开发感兴趣。使用这个工具你可以建立一个网站，通过实践你可以衡量你对这个潜在的职业路径是否感兴趣。

学习HTML后我可以干什么

制作一个简单的静态网站

HTML标记语言

一、HTML的语法

1. 什么是HTML标记语言

表示网页信息的符号标记语言
特点
a) 可以设置文本的格式，比如标题、字号、文本颜色、段落等等
b) 可以创建列表
c) 可以插入图像和媒体
d) 可以建立表格
e) 超链接，可以使用鼠标点击超链接来实现页面之间的跳转

2. HTML的标记和他的属性

1) HTML文档的保存格式

  • .html
  • .htm
  • .xhtml

2) 标记和被标记的内容构建出HTML文档

格式 <标记> 内容 </标记>

3) 标记的属性

  • 用来控制内容（图像、文本等的）如何显示
    格式 <标记 属性1=属性值 属性2=属性值 ... ... >内容</标记>
    例如<body bgcolor="red">内容</body>
  • 以上的属性是用来控制我们的网页的背景颜色，bgcolor就是body的属性，他的值是red（红色）

3. ❗️语法不区分字母大小写

<HTML>、<Html>、<html>都是定义相同的标记，但是在编写网页的时候尽量使用小写

4. 文档注释

❗️注释一段内容时使用“< !--”开始，以"-->"结束（使用时去掉空格）

5. 代码格式

空格键和回车键在网页中都不会起到任何作用，无论多少个空格键和回车键都会被替换成一个空格键，我们为了让代码清晰易读，可以使用空格和回车键进行编排。
⚠️：缩进时保持严格的规则，以“Tab”键进行缩进！

6. 字符实体

1) 什么是字符实体？

比如我们想在网页上面显示一个“<”小于符号，但是“<”在HTML中是文档标记的开始语言， 如果我们直接使用“<”可能会出差错，所以我们就会一些实体名称来代替！

2) 常见的字符实体⭐️

显示结果 描述 实体名称 实体编号
  空格 &nbsp;  
< 小于号 &lt; <
> 大于号 &gt; >
& 和号 &amp; &
" 引号 &quot; "
' 撇号 &apos;(IE不支持) &#39
￠ 分 &cent; ¢
£ 镑 &pound £
¥ 日圆 &yen; ¥
€ 欧元 &euro; €
§ 小节 &sect; §
© 版权 &copy; ©
® 注册商标 &reg; ®
™ 商标 &trade; ™
× 乘号 &times; ×
÷ 除号 &divide; ÷

正常情况下，HTML会截短文本中的空格。想要在文本中添加多个空格需要采用字符实体。

二、html的基本结构

1. <html>内容</html>

HTML文档的文档标记，也称为HTML开始标记,这对标记分别位于网页的最前端和最后端.
<html>在最前端表示网页的开始,</html>在最后端表示网页的结束.

2. <head>内容</head>

HTML文件头标记，也称为HTML头信息开始标记
用来包含文件的基本信息，比如网页的标题、关键字， 在<head></head>内可以放<title></title>、<meta></meta>、<style></style>等等标记
❗️在<head></head>标记内的内容不会在浏览器中显示

3. <title>内容</title>

HTML文件标题标记
功能 网页的“主题”，显示在浏览器的窗口的左上边
⚠️网页的标题不能太长，要短小精悍，能具体反应页面的内容，<title></title>标记中不能包含其他标记

4. <body>内容</body>

HTML文档的主体标记
功能 <body>...</body>是网页的主体部分，在此标记之间可以包含如<p></p>、<h1></h1>、<br/>、<hr>等等标记，正是由这些内容组成了我们所看见的网页

body标记的常见属性

a) bgcolor 设置背景颜色
<body bgcolor="red"></body>
b) text 设置文本颜色
<body text="green"></body>
c) link 设置连接颜色
<body link="blue"></body>
d) vlink 已经访问了的链接颜色
<body vlink="yellow"></body>
e) alink 正在被点击的链接颜色
<body alink="red"></body>

5. <meta>内容</meta>

页面的元信息（meta-information）

1) 功能

提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

2) 必须的属性

HTML学习的一些笔记的更多相关文章

  1. hadoop2.5.2学习及实践笔记（二）—— 编译源代码及导入源码至eclipse

    生产环境中hadoop一般会选择64位版本,官方下载的hadoop安装包中的native库是32位的,因此运行64位版本时,需要自己编译64位的native库,并替换掉自带native库. 源码包下的 ...

  2. Python学习的个人笔记（基础语法）

    Python学习的个人笔记 题外话: 我是一个大二的计算机系的学生,这份python学习个人笔记是趁寒假这一周在慕课网,w3cschool,还有借鉴了一些博客,资料整理出来的,用于自己方便的时候查阅, ...

  3. 开始记录学习java的笔记

    今天开始记录学习java的笔记,加油

  4. 菜鸟教程之学习Shell script笔记(上)

    菜鸟教程之学习Shell script笔记 以下内容是,学习菜鸟shell教程整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-shell.ht ...

  5. hadoop2.5.2学习及实践笔记（四）—— namenode启动过程源码概览

    对namenode启动时的相关操作及相关类有一个大体了解,后续深入研究时,再对本文进行补充 >实现类 HDFS启动脚本为$HADOOP_HOME/sbin/start-dfs.sh,查看star ...

  6. 深度学习Keras框架笔记之AutoEncoder类

    深度学习Keras框架笔记之AutoEncoder类使用笔记 keras.layers.core.AutoEncoder(encoder, decoder,output_reconstruction= ...

  7. 深度学习Keras框架笔记之TimeDistributedDense类

    深度学习Keras框架笔记之TimeDistributedDense类使用方法笔记 例: keras.layers.core.TimeDistributedDense(output_dim,init= ...

  8. 深度学习Keras框架笔记之Dense类(标准的一维全连接层)

    深度学习Keras框架笔记之Dense类(标准的一维全连接层) 例: keras.layers.core.Dense(output_dim,init='glorot_uniform', activat ...

  9. Elasticsearch7.X 入门学习第九课笔记-----聚合分析Aggregation

    原文:Elasticsearch7.X 入门学习第九课笔记-----聚合分析Aggregation 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. ...

  10. Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD

    原文:Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链 ...

随机推荐

  1. android——TextView默认文字开发时显示运行时隐藏

    根布局添加属性: xmlns:tools="http://schemas.android.com/tools" textview添加属性: tools:text="默认文 ...

  2. 汇编，寄存器，内存，mov指令

    一.代码 和 汇编 和 二进制之间的关系 二.复习一下计算机组成原理的知识 1.寄存器 计算机中有三个存储 32位cpu提供的寄存器有三种类型8位 16位 32位 64位的只是32位的扩展 并且程序大 ...

  3. 如何保障Assignment写作效率？

    有没有因为开学要交的Assignment而日夜赶工.身心俱疲啊?写Assignment确实是个体力+脑力活,要一直保持旺盛的精力并不容易.精神和身体的疲劳会慢慢分散你的注意力,进而影响效率和写作质量. ...

  4. 留学Essay写作做到精准表达很关键

    很多留学生在essay写作中可以迅速想到合理的中文论点.可是,写出来的英文论点却漏洞百出,不忍直视.在essay写作中我们要如何精准地用英文写出自己内心的独白呢?除了咨询老师,靠自己一样能做到! 1引 ...

  5. 查看两个集合中有没有相同的元素的方法。Collections disjoint

    在做项目的时候遇到一个种情况,就是要比较两个集合中是否有相同的元素,经过查找资料,找到了Collections类下的disjoint方法下面做的一个小例子: import java.util.Coll ...

  6. git push 现有代码到一个新的分支

    git push origin HEAD:task/xxx-test-local git push的一般形式为 git push <远程主机名> <本地分支名>  <远程 ...

  7. linux中redis伪主从搭建

    1.解压redis.tgz到usr/local/redis下 2.在redis/下执行 make 3.在redis/src/下执行 make install PREFIX=/usr/local/red ...

  8. day24(024-多线程(上))

    ###24.01_多线程(多线程的引入)(了解) 1.什么是线程 线程是程序执行的一条路径, 一个进程中可以包含多条线程 多线程并发执行可以提高程序的效率, 可以同时完成多项工作 2.多线程的应用场景 ...

  9. Day 9：双列集合Map及实现该接口的类的常用方法

    为什么要学双列集合? 因为单列集合无法处理映射关系,会有成对出现的数据 Map接口  如果是实现了Map接口的集合类,具备的特点: 存储的数据都是以键值对的形式存在的,键不可重复,值可以重复 Map接 ...

  10. HTML5新标签使用及CSS选择器(伪类)

    这些标签能够让搜索引擎更直接的解析页面内容. <header></header>语义:文档或者页面的头部 <nav></nav>语义:导航这两者不是组合 ...