整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML:解锁网站设计的终极指南

当今数字时代,网站是企业和个人的必需品。而HTML是创建网站的基础,它赋予了网站结构、内容和交互性。本文将深入探讨HTML,提供一个全面的指南,帮助你掌握网站设计的关键。

什么是HTML?

HTML(超文本标记语言)是一种标记语言,用于描述网页的结构和内容。它由一组元素和属性组成,这些元素和属性定义了文本、图像、链接和其他网页组件。

HTML元素

HTML元素是构成网页基本构建块的标签。每个元素都有一个开始标签和一个结束标签,它们之间包含元素的内容。最常见的元素包括:

  • <head>:定义网页的元数据
  • <body>:包含网页的可见内容
  • <p>:创建段落
  • <a>:创建链接
  • <img>:插入图像

HTML属性

属性用于修改元素的行为或外观。每个元素可以具有多个属性,这些属性由名称和值对组成。例如,<img>元素可以具有src属性来指定图像文件的路径。

HTML结构

HTML文档遵循一个特定的结构,包括:

  1. **文档类型声明:**指定所使用的HTML版本
  2. **<head>元素:**包含元数据,如页面标题、描述和关键词
  3. **<body>元素:**包含网页的可见内容

HTML交互性

虽然HTML本质上是静态的,但它可以与其他技术结合使用,如JavaScript和CSS,以创建交互式网站。例如,JavaScript可以用于验证表单输入或创建动画效果。

学习HTML

学习HTML相对容易,有许多在线资源和教程可供使用。以下是一些提示:

  • 从基础开始,学习基本元素和属性
  • 练习创建简单的网页
  • 探索高级概念,如表格、表单和多媒体
  • 使用代码编辑器和浏览器调试工具

掌握HTML的好处

掌握HTML有很多好处,包括:

  • **创建自己的网站:**设计和开发你的个人或商业网站
  • **提高就业能力:**HTML是许多技术工作的重要技能
  • **理解网络:**深入了解网页如何工作
  • **激发创造力:**用你的想象力创建视觉上引人注目的网站

结论

HTML是网站设计的基石。通过理解其基本原理、元素和结构,你可以解锁创建引人入胜且功能丰富的网页的能力。无论你是想建立自己的网站还是提升你的职业生涯,掌握HTML都是必不可少的。

程序越来越火,而小程序需要学会的基本语言则是HTML+CSS+JS,今天给大家带来HTML的简介和操作思想,希望大家看完能对HTML有所了解。

HTML是什么

  1. HTML的全称是HyperText Mark-up Language,翻译过来就是超文本标记型语言。

  2. 超文本指的是超出文本的范畴,标记:理解为标签,html中所有的操作都是通过标签来实现的。

  3. html是做网页。

第一个HTML程序

创建hello.html,利用编辑工具NotePad编辑,输入一下代码,点击保存,点击运行,选择自己有的浏览器即可。

HTML遵循的规范

  1. HTML程序以<html>开始,同时以</html>结束

  2. HTML程序包含两部分内容:head和body,代码如下:

3. html的标签有开始标签,同时也要有结束标签,代码如下:

4. html代码是不区分大小写的

5. 有些标签没有结束标签,需要在标签内结束------</br>

实现换行的操作,使用标签实现的<br>,没有</br>

操作思想

网页中可能有很多的数据,不同的数据可能有不同的显示效果,这个时候需要使用标签把我们需要操作的数据包起来(封装),通过修改标签的的属性值来实现标签内数据样式的变化。标签相当于一个 容器,通过修改容器的属性值,实现容器内数据样式的变化。

总结

从学习HTML开始,带你一步一步学习,直到开发一个小程序。喜欢的还是点个赞,加个收藏;想继续关注的,还请添加关注;如果有什么话想说,可以发表评论。希望以上本篇内容能让大家有说收获,感谢大家。

当我们访问一个网站的时候,我们通常是在浏览器中输入我们所需要访问的网址,然后点击就可以浏览我们所需要浏览的网站,但浏览器在我们输入域名到返回给我们最后的结果也是经历了一番繁琐的操作。

浏览器通常的步骤如下

1.浏览器的地址栏输入URL并按下回车。

2.浏览器查找当前URL是否存在缓存,并比较缓存是否过期。

3.DNS解析URL对应的IP。

4.根据IP建立TCP连接(三次握手)。

5.HTTP发起请求。

6.服务器处理请求,浏览器接收HTTP响应。

7.渲染页面,构建DOM树。

8.关闭TCP连接(四次挥手)

接下来我们主要分析第七点,也就是浏览器如何根据获取到的文件渲染出相应的页面,主要从HTML、CSS、JS这三点来分析

HTML

HTML称为超文本标签语言,是一种标识性的语言。普通的txt文档在加了HTML标签之后,就变得具有语义了,浏览器能根据不同的语义进行不同的解析。目前常见的HTML分为两种,一种是HTML另一种是XHTML。相较于XHTML的”严格“,HTML以其相对较为”宽松“的特效获得了较为广泛的喜爱

浏览器获取到HTML文挡的时候,会逐行解析文档,并根据文档内容将文档内容转化为DOM树在在浏览器中渲染出来

<html>
 <body>
 <h1>
 Hello World
 </h1>
 </body>
</html>
这是一个最基础的HTML文档,当浏览器获取到这个文件的时候,通过解析文字中的语义化标签,通过解析标签的<(Tag open state:开始标签)到>(Tag name state:结束标签),属性名称和相应值,直到文档结束,并将其转换为DOM树并最终在浏览器中绘制出来。

DOM树

CSS

浏览器遇到语义解释性的CSS标签嵌入文件,那么此时IE的下载过程会启用单独连接进行下载,并在下载后继续进行解析。并且只有在文件解析完成后才会在往下解析(浏览器阻塞),浏览器对CSS样式的解析是从左到右的,比如.box .left p,会在页面中找到所有的p标签,然后在p标签中找其父元素有.left类的p元素,再找祖父元素有.box的p标签

如下图示,浏览器会按照从右向左的顺序去读取选择器。先找到span然后顺着往上找到class为“haha”的div再找到id为“molly”的元素。成功匹配到则加入结果集,如果直到根元素html都没有匹配,则不再遍历这条路径,从下一个span开始重复这个过程

提升渲染效率的几个点
- 尽量少的去对标签进行选择,而是用class
- 不要去用标签限定ID或者类选择符
- 减少层级关系,使查询效率更高
- 尽量少的去使用后代选择器,降低选择器的权重值
- 不要放空的class
- 多用继承属性,可以通过继承避免对属性重复使用

JS

浏览器遇到语义解释性的JS标签嵌入文件,那么此时IE的下载过程会启用单独连接进行下载,并在下载后继续进行解析。并且只有在JS文件解析完成并且加载完后才会继续往下解析(浏览器阻塞)

  • 预解析
在当前作用域中,JavaScript代码执行之前,浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义(主要指的是ES6之前,由于ES6引了let和const所以会存在不同)
  • 逐行解析代码
JS代码在逐行解析代码的时候,变量赋值表达式是可以修改预解析的值。但如果有多个表达式对相同的变量多次赋值,那么除过函数声明不能修改上次的赋值,变量赋值和函数表达式都可以修改这个变量的值

总结

整个渲染的过程大致上可以概述为

- 用户输入网址,服务器返回html文档

- 浏览器开始解析HTML文档

- 浏览器解析文档过程中解析到CSS或者JS标签嵌入文件,这时候浏览器优先解析标签嵌入文件,待标签嵌入文件解析完成并执行完成后在继续解析HTML文档

- 浏览器将解析好的DOM进行绘制,在浏览器中绘制出来

参考资料

https://segmentfault.com/a/1190000016253407

https://www.jianshu.com/p/b41f1258c044