为什么会出现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. SpringAOP 使用注解的简单使用

    1. 导入jar包 /SpringAOPmy/lib/com.springsource.net.sf.cglib-2.2.0.jar/SpringAOPmy/lib/com.springsource. ...

  2. volatile作用与处理器嗅探的简解

    先贴一下 volatile 的作用定义 如果一个字段被声明成volatile,Java线程内存模型确保所有线程看到这个变量的值是一致的 首先问题就来了,一个共享变量再被volatile修饰过后,怎么被 ...

  3. POJ1200 A - Crazy Search（哈希）

    A - Crazy Search Many people like to solve hard puzzles some of which may lead them to madness. One ...

  4. Java 14 都要来了，为什么还有这么多人固守Java8？

    作者:刘欣 从Java 9开始,Java版本的发布就让人眼花缭乱了. 每隔6个月,都会冒出一个新版本出来,Java 10 , Java 11, Java 12, Java 13, 到2020年3月份, ...

  5. 使用html画爱心

    <!DOCTYPE html"> <html> <head> <meta http-equiv="Content-Type" c ...

  6. lvs和keepalived

    LVS调度算法参考 RR:轮询 WRR :加权轮询 DH :目标地址哈希 SH:源地址hash LC:最少连接 WLC:加权最少连接,默认 SED:最少期望延迟 NQ:从不排队调度方法 LBLC:基于 ...

  7. nginx基础知识小结

    配置文件讲解: #user nobody; #开启进程数 <= CPU数 worker_processes 1; #错误日志保存位置 #error_log logs/error.log; #er ...

  8. Linux下yum出现no module named pycurl 解决办法

    1.1 no module named pycurl 解决办法 下载curl:http://curl.haxx.se/download/curl-7.21.3.tar.gz .tar.gz ./con ...

  9. 201803-1 跳一跳 Java

    思路: 一个变量plus记录叠加的数,遇到2就+2 import java.util.Scanner; public class Main { public static void main(Stri ...

  10. Html4.0.1 标签使用笔记

    1.lang=zh,en有什么用? 告诉搜索引擎爬虫,网站是关于什么内容的,优先显示网站排名.一般竞价排名,根据百度搜索引擎,需要签订关键词协议,首页第一个竞价排名大概是30-50元/条,竞价排名范围 ...