【HTML】HTML5的介绍
【HTML】HTML5的介绍
学习完python基础以后,我们来了解一下 html 的相关知识,有助于我们以后对于爬虫内容的学习理解。
制作我们第一个网页
在我们进行正式学习之前,先来热热身,首先在桌面创建记事本,然后在其中复制以下代码,更改记事本后缀 .txt 为 .html ,完成我们的第一个html网页吧。
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>制作我的第一个网页</title>
</head><body>
<h1>hello,world!</h1>
</body></html>
网页打开效果是这样子的:
html和css的关系
css 是用来修饰 html 样式的,在这里我举个简单的例子,假设 html 是一个女生,那么css就是女生身上穿着的色彩风格各异的衣裳!其实事实上,html本身是有一些默认样式的,但如果如果我们想改变html标签的样式,就需要借助css为其增加个性化的风格,所以html+css构成了我们网页的基本页面结构和样式。
下面我们把上文的代码做一些个性化修改,运用上css,我们把代码修改成如下样子:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>Html和CSS的关系</title>
<style type="text/css">h1{font-size:30px;color:#930;text-align:center;}</style>
</head><body>
<h1>hello,world!</h1>
</body></html>
HTML结果展示:
在此,我做出解释:
- 代码 font-size:30px用于修改窗口文字显示的大小;
- 代码 color:#930用于修改窗口文字颜色的变化;
- 代码 text-align:center用于修改窗口文字居中的变化;
标签的语法
标签由英文尖括号 < > 括起来,例如 < head > 就是一个标签。
HTML 中的标签一般都是成对出现的,分开始标签 和 结束标签。结束标签比开始标签多了一个‘ / ’。
例子如下:
< head >< /head > 和 < p > < /p > 。
标签与标签之间是可以嵌套的,但先后顺序必须保持一致,我们可以看上文代码来感受这一特点。
而且HTML标签是不区分大小写,例如 < h1 > 和 < H1 >是一样的,但一般我们建议小写,因为大部分程序员都以小写为准。
我们通过下述代码来深化对本块知识的理解:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>标签的语法</title></head><body><h1>为何北方高校还迟迟不开学?</h1><p>近日,随着疫情情况好转,各大高校纷纷开学,可北方高校仍无消息。</p></body></html>
HTML结果展示:
在这里,我解释一下 < h1 >标签 和 < p >标签 的含义: < h1 >标签 代表意为一级标题,我们在这单纯的理解为标题的意思,< p >标签 代表意为段落,可以看做是正文内容。
html5文档结构
参考上文中的代码,我们来讲一下,html的结构骨架:
< !DOCTYPE html >:意为文档类型声明,表示该文件为 HTML5文件。< !DOCTYPE > 声明必须是 HTML 文档的第一行,位于 < html > 标签之前。
< html >< /html >标签对:< html >标签 位于HTML文档的最前面,用来标识HTML文档的开始;< /html >标签位于HTML文档的最后面,用来标识HTML 文档的结束;这两个标签对成对存在,中间的部分是文档的头部和主题。
< head >< /head >标签对:标签包含有关HTML文档的信息,可以包含一些辅助性标签。如< title >,< link / >,< meta / >,< style >,< script >等,但是浏览器除了会在标题栏显示< title >元素的内容外,不会向用户显示 head 元素内的其他任何内容。
< body >< /body >标签对:它是HTML文档的主体部分,在此标签中可以包含< p >,< h1 >,< br >等众多标签,< body >标签出现在< /head >标签之后,且必须在闭标签< /html >之前闭合。
认识head标签
head标签显示在文档的头部,描述了文档的各种属性和信息,包括文档的标题等,绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
head标签为双标签,有头标签,也有尾标签,< head >< /head >。
< head >标签表示头部标签,通常用来嵌套meta、title、style等标签。
下面我们来介绍一下这些子标签:
< title >标签:在< title >和< /title >标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。
网页的 title 标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的 title 。
< meta http-equiv=Content-Type content=text/html;charset=gb2312 >标签:它表示强制浏览器编码设为简体中文(GB2312)。这一标签的作用是相当关键的,在制作网页的过程中千万不可省略,因为缺少该标签可能会导致网页中出现乱码现象。
< style >标签:< style >标签是双标签,用于设置当前网页的个性化样式。
认识body标签
在网页上要展示出来的页面内容一定要放在body标签中。
我们来看下面的脚本代码来加深理解:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>龙岭迷窟</title>
</head><body><!-- 标题标签 --><h1>龙岭迷窟</h1><!-- 段落标签 --><p>《龙岭迷窟》主要讲述了胡八一、王胖子和大金牙(佟磊饰)因为一只出自陕西乡间的绣花鞋,前往古蓝县开启寻宝之旅,并偶遇了寻找龙骨天书的Shirley杨,在了解她此行的目的之后,决心一齐探险龙岭迷窟寻找雮尘珠的下落。</p><!-- 段落标签 --><p>在整个历程中,这支探险小分队面临重重险阻,既要智解变幻莫测的机关陷阱,勇斗神秘罕见的奇虫异兽,又要应对地痞恶霸马大胆(周晓鸥饰)一伙的威胁,而铁三角的默契也将伴随着危险的升级实现深化。</p>
</body></html>
html显示结果:
html的标签注释
什么是标签代码注释?
代码注释的作用是帮助程序员标注代码的用途,过一段时间后再看你所编写的代码,就能很快想起这段代码的用途。
代码注释不仅方便程序员自己回忆起以前代码的用途,还可以帮助其他程序员很快的读懂你的程序的功能,方便多人合作开发网页代码。
标签注释的语法如下:< !-- 注释文字 – >
正是因为代码注释是为了方便程序员对脚本代码的理解,所以注释代码是不会在结果窗口中显示出来的,而是在程序员修改脚本的时候才出现,而对于 基本用户 是不显示的。
知识拓展
我们上文中所说的代码,为什么只需要在文本文件中编写完,修改后缀名之后就可以打开使用呢?
我们之前的博客中,讲到 python 的时候,第一件事就是下载 python 的编译环境,然后才是深入学习,而我们今天学的 html 则不需要编译环境,原因是 HTML的代码不同于python等语言的代码,html 的代码是通过纯解释执行的,而python代码是需要编译的(但不是严格的编译执行)。
相关知识可以参考以下网站:
https://zhidao.baidu.com/question/17789065.html(编译执行和解释执行的区别)
https://www.sohu.com/a/207310296_776230 (Python代码是编译执行还是解释执行?)
今日份学习就到这里了!
【HTML】HTML5的介绍相关推荐
- html5相关介绍ppt,html5介绍全解.ppt
html5介绍全解 渐变 (Gradients) 线性渐变: background: linear-gradient(to right, red, orange, yellow, green, blu ...
- html5语义化标记元素_语义HTML5元素介绍
html5语义化标记元素 Semantic HTML elements are those that clearly describe their meaning in a human- and ma ...
- HTML5实践 -- 介绍css3中的几个属性:text-shadow、box-shadow 和 border-radius
转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/21/2779873.html 今天我们的内容是css3的text-shadow. ...
- HTML5:Flash2x介绍、安装教程
一.介绍 1.什么是Flash2x 将动画效果直接转换出来,给其他一些视觉的项目中使用,最常见的转换,变成H5页面,它是Flash制作成Html5的最好用的工具,没有之一,是Flash动画制作软件的& ...
- HTML5培训教程:HTML5基础介绍
HTML5发展史: HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队. • HTML 5 ...
- mac如何看html5视频播放器,苹果Mac系统看HTML5视频教程介绍
上一回,小编教了大家一个Mac用 HTML5 免费看优酷和土豆等付费视频,这回小编又找到一个用HTML5看视频的好方法,很多很好用的资源,你可以在Mac上看各种地方台的直播以及乐视.凤凰卫视.TVB. ...
- 苹果电脑 html5 视频,苹果Mac系统看HTML5视频教程介绍
上一回,小编教了大家一个Mac用 HTML5 免费看优酷和土豆等付费视频,这回小编又找到一个用HTML5看视频的好方法,很多很好用的资源,你可以在Mac上看各种地方台的直播以及乐视.凤凰卫视.TVB. ...
- 苹果电脑怎么看html5,苹果Mac系统看HTML5视频教程介绍
上一回,小编教了大家一个Mac用 HTML5 免费看优酷和土豆等付费视频,这回小编又找到一个用HTML5看视频的好方法,很多很好用的资源,你可以在Mac上看各种地方台的直播以及乐视.凤凰卫视.TVB. ...
- HTML5 Boilerplate介绍
一:HTML5 Boilerplate是什么?解决了什么问题? 对于第一次听说这个人,肯定都有这个疑问把! 实际上,HTML5 Boilerplate只是一个单纯的HTML模版. 什么?HTML模版? ...
最新文章
- 已知子网掩码如何计算IP地址中的主机位
- mac 用 brew
- Core Animation
- 干货|NLP 的四张技术路线图,带你系统设计学习路径
- MnasNet 测试
- Oracle Data Guard 主库 归档文件 删除策略 .
- oracle取差值集合
- 0间隔24h采集线报+源码的资源网
- pytorch 训练face出现的问题
- 个元素前面 个元素放在第i 链表将第j_彻底理解链表中为何使用二级指针或者一级指针的引用...
- Hbase高级功能过滤(Filter)
- [转]二分图的必须边
- 常用开发资源整理(更新日:2017/4/26)
- 2021年认证杯SPSSPRO杯数学建模C题(第一阶段)破局共享汽车求解全过程文档及程序
- “毒液” 高危漏洞背后的技术较量
- 解决gradle下找不到符号错误
- 索尼a5100_女生适合的入门微单—索尼a5100,强推。
- 知乎Redis的演进之路:从单机到2000万QPS的挑战
- 点评Hack易支付 - 免签约支付平台 -彩虹易支付,1分钟快速接入支付功能
- PE-CE P in MPLS network网络术语
热门文章
- 拯救者r720黑苹果_虽然好等,3499的联想拯救者电竞手机,或让黑鲨红魔ROG无法招架...
- matlab拓扑优化流程图,Sigmund的99行Matlab拓扑优化程序简析
- 牛逼的python库-python命令行调试工具pdb的基本用法
- 2022年度全球250个最大专利持有者:松下、三星、日立、中科院、佳能列前五 | 美通社头条...
- 奇异值分解-通俗教程
- 前端基础之关于数组的方法整理
- Unity的每个界面右下角有一个麦克风标志和一个刷新标志解决方案
- 使用闪回数据库(FLASHBACK DATABASE)和还原点(RESTORE POINT)
- django中发送html邮件以及html中含有图片的邮件
- AssetManager加载远程资源