HTML-01

作者: 云顶天宫写代码 | 来源:发表于2022-07-16 23:19 被阅读0次

    HTML简介

    前端工程师的发展前景?
    在学习之前我们首先来了解一下,前端工程师的发展前景:
    随着近几年来互联网的迅猛发展和普及,HTML5前端工程师已经成为互联网时代软件产品研发中不可缺少的一种专业的研发角色。
    广义HTML5前端是包括HTML、CSS和JavaScript在内的一套技术组合,是前端开发最基础部分。
    HTML5被广泛应用于各种3D游戏制作,PC页面、移动端界面、小程序等技术开发,发展十分火爆。
    现在手机页游3D化、HTML5营销场景化、游戏化是互联网大趋势,各个行业越来越重视用户行为和视觉体验。几乎整个互联网行业都缺前端工程师。

    前端工程师主要是做什么的?
    其实不管是前端工程师还是后台工程师(Java、Python等)我们要做的工作无非就是软件的开发。
    所以说学好HTML也是非常重要的,学好HTML不光可以做前端开发,对我们未来的爬虫技术也是有很大帮助的!]

    前端工程师在此过程中的工作是:

    一个网页的形成呢,首先需要由网页设计师根据需求进行网页的设计,然后前端工程师将设计师设计的静态图片设计成网页,最后后台工程师
    将网页设计成动态效果以及数据的交互。

    (1)需要将设计师的设计转换为代码,然后交给后台工程师,在由他们去编写服务器的代码。
    (2)需要和设计师沟通,需要和产品经理沟通,需要和后台工程师沟通。
    (3)我们的编写的网页会在整个项目的最前端由用户查看。

    主打浏览器

    之后我们学习的主打浏览器为谷歌(Chrome)。
    我们可以通过 http://tongji.baidu.com/data/browser查看浏览器占有的市场份额,也就是上一节课我给大家说的那个网站。这里有一个截图在这,剩余内容需要我们去访问查看。
    从图中可以看到,目前谷歌浏览器站45.19%的市场份额!
    谷歌浏览器的性能也是非常强大的,所以以后我们学习前端技术呢,就使用谷歌浏览器了。

    Web标准简介

    由于浏览器的内核不同,所以他们的工作原理、解析也肯定不同,这样在显示上就会有些许差别。
    意思也就是说我们前端工程师辛辛苦苦写的代码在不同的浏览器上展现出来的情况是不一样的,这样是不是就非常的让人头疼呀,那我们是不是就应该制定一个标准去让他们展示的内容相同呢?

    问题
    这就和我们说话一样对吧,有的同学来自不同的城市,就会有不同的方言,哪那一个方言是所有人都能听懂的呢?

    是不是就是普通话呀,对吧?

    所以说这个Web的标准呢也是这样,就是能够让我们前端工程师写的代码被所有的浏览器都认得,而且表达的意思呈现出来也需要是一致的。

    Web标准构成:

    那么Web标准到底是什么样的呢?

    Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。

    一个网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。

    对应的标准也分三方面:
    (1)结构标准:结构用于对网页元素进行整理和分类,主要包括XHTML和XML两个部分。
    (2)表现标准:表现用于设置网页元素的版本、颜色、大小等外观形式,主要包括CSS。
    (3)行为标准:行为是指网页模型的定义及交互的编写,主要包括对象模型(如W3C DOM)、ECMAScript等。

    推荐安装的编辑器

    image.png

    HTML 的骨架格式

    image.png image.png

    主要标签

    01 一个HTML文件中,主要是由标签构成的,那么什么是标签呢?

    之前也提到过,“<>”就是标签,比如:我们想写一个标签,那么格式就是:<标签名>,这就是一个HTML的一个标签。 但要注意的是,其中标签名是HTML语言指定的标签名称,我们不能随意编写。

    双标签

    02 双标签,此标签成对出现,有头有尾。

    “<标签名>”表示该标签的作用开始,一般称为“开始标签(start tag)” “</标签名>” 表示该标签的作用结束,一般称为“结束标签(end tag)”。 其中,尾标签要区别于头标签,所以在标签名前有个“/”,两个标签中的元素,就是我们在使用标签时,给元素设置的内容。

    单标签

    单标签,也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。

    比如:换行

    <br />

    <标签名 />

    嵌套关系与并列关系

    01 嵌套关系

    <head>
    <title>...</title>
    </head>
    02 并列关系

    <head></head>
    <body></body>
    建议

    1. 如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。
    2. 如果是并列关系,最好上下对齐。

    文档类型

    使用VSCode创建HTML文件时,除了有HTML骨架外,还有<!DOCTYPE>和<meta>标签,那这两个是什么呢?

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>欢迎来到 HTML5 的乐园!!!</title>
    </head>
    <body>
     
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    
    </body>
    </html>
    

    编码问题

    (1)ASCII:美国信息交换标准代码,这是世界上最通用的单字节编码系统,主要用来显示现代英语及其他西欧语言。

    (2)ISO8859-1:ASCII的扩展,也是单字节编码。

    (3)GB2312:全称为信息交换用汉字编码字符集,国家简体中文字符集,兼容ASCII。

    (4)GBK:汉字内码扩展规范,主要是扩展了GB2312,在它的基础上又加了更多的汉字,而且加入了对繁体字的支持。

    (5)UTF-8(Unicode):目前最常用的字符集编码方式,它包含了全世界所有国家需要用到的字符又被称为万国码。

    那么在 HTML 中,正确的字符编码是什么? HTML5 中默认的字符编码是 UTF-8。
















    作业提问:

    image.png image.png image.png

    相关文章

      网友评论

          本文标题:HTML-01

          本文链接:https://www.haomeiwen.com/subject/maqrirtx.html