HTML学习的一些笔记
为什么会出现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) 常见的字符实体⭐️
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |
|
|
| < | 小于号 | < |
< |
| > | 大于号 | > |
> |
| & | 和号 | & |
& |
| " | 引号 | " |
" |
| ' | 撇号 | '(IE不支持) |
' |
| ￠ | 分 | ¢ |
¢ |
| £ | 镑 | £ |
£ |
| ¥ | 日圆 | ¥ |
¥ |
| € | 欧元 | € |
€ |
| § | 小节 | § |
§ |
| © | 版权 | © |
© |
| ® | 注册商标 | ® |
® |
| ™ | 商标 | ™ |
™ |
| × | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
正常情况下，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学习的一些笔记的更多相关文章
- hadoop2.5.2学习及实践笔记（二）—— 编译源代码及导入源码至eclipse
生产环境中hadoop一般会选择64位版本,官方下载的hadoop安装包中的native库是32位的,因此运行64位版本时,需要自己编译64位的native库,并替换掉自带native库. 源码包下的 ...
- Python学习的个人笔记（基础语法）
Python学习的个人笔记 题外话: 我是一个大二的计算机系的学生,这份python学习个人笔记是趁寒假这一周在慕课网,w3cschool,还有借鉴了一些博客,资料整理出来的,用于自己方便的时候查阅, ...
- 开始记录学习java的笔记
今天开始记录学习java的笔记,加油
- 菜鸟教程之学习Shell script笔记(上)
菜鸟教程之学习Shell script笔记 以下内容是,学习菜鸟shell教程整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-shell.ht ...
- hadoop2.5.2学习及实践笔记（四）—— namenode启动过程源码概览
对namenode启动时的相关操作及相关类有一个大体了解,后续深入研究时,再对本文进行补充 >实现类 HDFS启动脚本为$HADOOP_HOME/sbin/start-dfs.sh,查看star ...
- 深度学习Keras框架笔记之AutoEncoder类
深度学习Keras框架笔记之AutoEncoder类使用笔记 keras.layers.core.AutoEncoder(encoder, decoder,output_reconstruction= ...
- 深度学习Keras框架笔记之TimeDistributedDense类
深度学习Keras框架笔记之TimeDistributedDense类使用方法笔记 例: keras.layers.core.TimeDistributedDense(output_dim,init= ...
- 深度学习Keras框架笔记之Dense类(标准的一维全连接层)
深度学习Keras框架笔记之Dense类(标准的一维全连接层) 例: keras.layers.core.Dense(output_dim,init='glorot_uniform', activat ...
- Elasticsearch7.X 入门学习第九课笔记-----聚合分析Aggregation
原文:Elasticsearch7.X 入门学习第九课笔记-----聚合分析Aggregation 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. ...
- Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD
原文:Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链 ...
随机推荐
- 数据库的交互模式 常用的dos命令 （第一天）
浏览器和服务器和数据库的交互模式 windows nt(windows系统)的分类:服务操作系统有(server03 server08(R2) 12 16) 个人操作系统有(xp win7 win8 ...
- CCCC L3-013. 非常弹的球
题意: 刚上高一的森森为了学好物理,买了一个“非常弹”的球.虽然说是非常弹的球,其实也就是一般的弹力球而已.森森玩了一会儿弹力球后突然想到,假如他在地上用力弹球,球最远能弹到多远去呢?他不太会,你能帮 ...
- C++ opencv 数字识别
#include "cv.h" #include "highgui.h" #include "cxcore.h" #include < ...
- maven 依赖报错
1 maven项目,在Intellij 右侧 Maven projects - Lifecycle - clean , validate, compile, ….,右击clean,选中Run ‘pro ...
- java课程之团队开发冲刺阶段2.3
一.总结昨天进度 1.完成整合功能 二.遇到的问题 1.在整合的过程中,总是发现在switch开关提醒了两次,后来发现是因为我使用了setChecked方法,而这个方法触发onCheckedChang ...
- 原子类型字段更新器AtomicXxxxFieldUpdater
本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门 原子类型字段更新器 在java.util.concurr ...
- 对input type=file 修改样式
效果图先给: 在html中涉及到文件选择的问题,文件选择使用 input(class="filter_input form-control" type="file) 但是 ...
- 2020年9大顶级Java框架
诞生于1995年的Java,目前已在134,861个网站上广泛使用,包括ESPN.SnapDeal等.在其24年的成长史中,Java已经证明了自己是用于自定义软件开发的顶级通用编程语言. Java广泛 ...
- CentOS 7设置开机启动服务，添加自定义系统服务
由于版本的迭代,最近刚刚接触 CentOS 7,各种蛋疼 发现跟以前用的CentOS 6有着一些本质上的差别,连启动服务都不会启动了,一怒之下自己找资料,于是有了这篇文章... 1.建立服务文件 ...
- 吴裕雄--天生自然 JAVASCRIPT开发学习：事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
生产环境中hadoop一般会选择64位版本,官方下载的hadoop安装包中的native库是32位的,因此运行64位版本时,需要自己编译64位的native库,并替换掉自带native库. 源码包下的 ...
Python学习的个人笔记 题外话: 我是一个大二的计算机系的学生,这份python学习个人笔记是趁寒假这一周在慕课网,w3cschool,还有借鉴了一些博客,资料整理出来的,用于自己方便的时候查阅, ...
今天开始记录学习java的笔记,加油
菜鸟教程之学习Shell script笔记 以下内容是,学习菜鸟shell教程整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-shell.ht ...
对namenode启动时的相关操作及相关类有一个大体了解,后续深入研究时,再对本文进行补充 >实现类 HDFS启动脚本为$HADOOP_HOME/sbin/start-dfs.sh,查看star ...
深度学习Keras框架笔记之AutoEncoder类使用笔记 keras.layers.core.AutoEncoder(encoder, decoder,output_reconstruction= ...
深度学习Keras框架笔记之TimeDistributedDense类使用方法笔记 例: keras.layers.core.TimeDistributedDense(output_dim,init= ...
深度学习Keras框架笔记之Dense类(标准的一维全连接层) 例: keras.layers.core.Dense(output_dim,init='glorot_uniform', activat ...
原文:Elasticsearch7.X 入门学习第九课笔记-----聚合分析Aggregation 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. ...
原文:Elasticsearch7.X 入门学习第二课笔记----基本api操作和CRUD 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链 ...
浏览器和服务器和数据库的交互模式 windows nt(windows系统)的分类:服务操作系统有(server03 server08(R2) 12 16) 个人操作系统有(xp win7 win8 ...
题意: 刚上高一的森森为了学好物理,买了一个“非常弹”的球.虽然说是非常弹的球,其实也就是一般的弹力球而已.森森玩了一会儿弹力球后突然想到,假如他在地上用力弹球,球最远能弹到多远去呢?他不太会,你能帮 ...
#include "cv.h" #include "highgui.h" #include "cxcore.h" #include < ...
1 maven项目,在Intellij 右侧 Maven projects - Lifecycle - clean , validate, compile, ….,右击clean,选中Run ‘pro ...
一.总结昨天进度 1.完成整合功能 二.遇到的问题 1.在整合的过程中,总是发现在switch开关提醒了两次,后来发现是因为我使用了setChecked方法,而这个方法触发onCheckedChang ...
本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门 原子类型字段更新器 在java.util.concurr ...
效果图先给: 在html中涉及到文件选择的问题,文件选择使用 input(class="filter_input form-control" type="file) 但是 ...
诞生于1995年的Java,目前已在134,861个网站上广泛使用,包括ESPN.SnapDeal等.在其24年的成长史中,Java已经证明了自己是用于自定义软件开发的顶级通用编程语言. Java广泛 ...
由于版本的迭代,最近刚刚接触 CentOS 7,各种蛋疼 发现跟以前用的CentOS 6有着一些本质上的差别,连启动服务都不会启动了,一怒之下自己找资料,于是有了这篇文章... 1.建立服务文件 ...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...