互联网时代人们通过上网浏览信息,打开浏览器上网看到丰富的图文、视频、音乐等多媒体信息,一系列信息反馈和视觉冲击之后,您有没有想过,互联网这么发达的时代,您觉得花一点点时间学会做个网站页面不真香?
“超文本标记语言“(HTML)作为文档信息载体。当我们用html创建文档时,它将我们的语言转换成计算机可以理解的语言。这使得计算机能执行特定任务至关重要。人与计算机交互,需要一套编辑规范,编辑者(相对于计算机,这里指写html的人)使用html标签(机器识别的关键字)对内容做排版,填写内容,然后定义板块的样式和动画后的一份字符串文本,发布到远程服务器,最终被机器解析成网络传输报文协议,传输到前端(一般情况下就是我们的浏览器),就能够呈现出大家熟悉的网站页面了。
这里有一个小的指导教程,大家可以跟着来学习
一、 准备工具
编辑器 - windows系统自带的记事本工具(右击鼠标快捷键-> 新建 -> 文本文档 )
浏览器
二、 实现步骤
电脑桌面上右击鼠标,新建文本文档,helloword.html,需要注意修改.txt后缀名为.html
2.输入以下内容
<html>
<head>
<title>第一个页面</title>
</head>
<body>
<h1>您的成果</h1>
<p>hello word!</p>
</body>
</html>
用浏览器打开这个文档,可以通过修改打开方式也可以把文档拖到浏览器快捷键图标上面选择浏览器打开,预览成果。
三、总结一下您做的事情
使用windows系统的文本文档工具写了一份文本。这是一份主要信息内容(“第一个页面”、“您的成果”、“hello word!”),和信息结构化载体关键字(“html”,“head“,“title“,“body”,“h1”,“p”)的文本,组成了一份带结构的文本。我为什么称之为带结构呢?主要原因是,读者阅读需要清楚知道内容排版、模块、段落信息等等,例如:一份word文档,首行就是一个大标题,其次副标题,然后就是段落内容,其组成成分可能有图片、视频、跳转链接、注释等,它们组成了一个word文档的结构,按word文档结构规范编辑word文档是掌握word的基本要领。掌握html,需要认识html的基本结构。按照教程的html内容,它组成了html的最基本结构,<html> </html>, 可告知浏览器其自身是一个 HTML 文档。<head></head>,可告知浏览器这里是文档的头部。<body></body> 这里是文档的主体。“<>” 告知浏览器,将要用到元素标签,即“<html>”用了html标签。“<>”是标签的开始,“</>”则是标签的结束。标签是HTML语言中最基本的单位,标签的组合使用即是自由组合,也是相互约束的。例如:“<title></title>”标签,告诉浏览器本页的标题,只能在“<head></head>”标签里面使用。掌握html需要知道各种标签的作用范围,定义和用法。以上 “<h1></h1>” 是文档内容大标题,副标题有 “<h12></h2>” 、 “<h3></h3>” ..... “<h5></h5>”。“<p></p>” 标签定义了段落内容,每一次 “<p></p>”,文本内容将产生一个段落。编写html为了方便阅读,需要有良好的编写格式。每一个子标签需要顶格,“<head>"相对“<html>顶格了,我是通过输入Tab实现的。平级的标签不需要顶格,例如 ,案例中的排版 “<h1>" “<p>" 是相对于“<body>"平级的。
充分利用html标签,完成页面内容的布局,需要掌握以下要点
掌握基本的html标签,参考网络学习资源链接:https://www.w3school.com.cn/html/html_basic.asp掌握html排版技巧,使得页面内容整整齐齐
使用css,层叠样式定义,它主要是负责控制内容展示的形式,并不具有具体信息内容,它能控制html元素的布局、属性、例如在css里面,定义了某类元素的名字(.className = {}),这类元素统一长度为10px( .className = {width:10px} ),之后通过把名字赋予元素(<div class="className" > <div>),拥有class="className"的元素都会显示出长度为10px的样子。
参考内容https://www.w3cschool.cn/css/
使用script,可以控制元素的响应动作,例如移动元素、改变元素的大小,颜色、切换图片、提交表单、校验内容等等。页面常用的是javascript,需要较轻的编程知识,但是由于javascript的出现,使得页面的前端开发技术的进步,永无止境。
参考内容 https://www.w3school.com.cn/tags/tag_script.asp
html如此简单,只要您不被标签内容影响了您对超文本的阅读理解,了解html标签对内容做了结构化,掌握起来,便能够进入互联网的大舞台时代了!
获得精彩内容,记得关注哦!
输入URL到页面加载的全过程涉及多个步骤,包括域名解析、建立TCP连接、发送HTTP请求、处理服务器响应、页面渲染等。以下是详细的过程:
总结:从输入URL到页面加载的全过程涉及到多个环节,包括域名解析、建立TCP连接、发送HTTP请求、服务器处理请求、返回HTTP响应、浏览器解析HTML、下载资源、执行JavaScript、页面渲染和关闭TCP连接。了解这个过程可以帮助我们更好地理解Web页面的加载原理,优化页面性能。
、认识WEB
网页主要是由文字、图像和超链接等元素构成,除了这些基本的元素以外,还包含一些多媒体元素等,比如音频、视频等。
比如我们常见的有小米商城、京东商城、以及淘宝等,都属于我们的大型的购物平台网站,而这些网站都包含了网页中基本的元素。那么网页是怎么形成的呢?
其实网页的形参很简单,当我们前端小姐姐将页面通过代码构建好以后,再通过浏览器(IE、谷歌等浏览器)将其渲染成为用户眼中所能看得到的各种样式的页面。
既然我们的网页是通过浏览器的渲染而显示不同的页面,那么常见的浏览器有哪一些呢?如常见的五大浏览器,分别是IE、火狐、谷歌、Safari以及Opera等。
五大浏览器
但是在开发过程中,谷歌和火狐用得比较多,可以更好地帮助开发人员进行调试。IE浏览器相对来说存在兼容性问题,所以很少去使用。
为什么网页代码通过浏览器的渲染就能显示出各种不同的样式的页面呢?此处就不得不提到浏览器的内核,通常浏览器的内核分为如下几种:
而五大浏览器之间的内核都是什么呢?如下图所示:
五大浏览器的内核
二、Web标准
什么是Web标准?Web标准是由W3C组织和其它标准化组织,制定的一系列标准的集合。
W3C万维网联盟是国际最著名的标准化组织。他是1994年成立后,至今已发布了近百项相关万维网的标准。
w3c组织
那为什么要制定Web标准呢?
作用:由于市场上诞生了许多不同类型的浏览器,而这些浏览器都存在不同的内核,导致前端小姐姐开发的页面在不同的浏览器上显示会存在不同的差异,这样就会给前端开发者带来了许多麻烦。而通过Web标准就会降低这种页面之间的差异化,让浏览器在解析前端代码的时候,转向W3C的标准,呈现出统一的效果。
优点:
那么一个漂亮的页面是怎样构成的呢?它的构成分别是如下几种类型:
漂亮页面的构成
好啦![微笑]本节就分享到这儿哦!对前端感兴趣的小伙伴,可以关注我的,我会继续给大家分享前端以及其它开发内容的知识,也欢迎大家给我在评论区留言[作揖]。
*请认真填写需求信息,我们会在24小时内与您取得联系。