HTML

用户409379271368
142 阅读5分钟

  1. 认识网页与网站

    一般我们输入某个网站的域名,呈现在浏览器中的是一个页面,当点击当前页面的某个元素时,可能会跳转的另外的一个页面,其实网站是由多个相互之间有联系的页面构成.可以理解为老师批改试卷,每张试卷就是一个网页,一叠试卷就是一个网站,当老师想要先改某个人的试卷时,就把该试卷调到最上面,这样这张试卷就呈现在老师的面前了.记住一句话即可: 网站是由多个有联系的页面构成.

  2. 用户角度去搜索网页是如何呈现的

    用户输入域名,浏览器是如何显示这些网页的,它们的中间细节又是什么呢?用户输入域名,DNS域名解析器就会将域名解析为对应的IP地址,通过IP地址找到对应的服务器,服务器返回静态资源,浏览器接收到静态资源就下载该资源,浏览器通过浏览器内核与JS引擎解析对应的静态资源代码,最后生成一颗渲染树,等待JS代码解析完成之后,最终渲染到页面上.

  3. 服务器是什么?

    上面一直提到服务器,所谓的服务器本质就是一台主机,和我们平时使用的还是有区别的,服务器是二十四小时稳定运行的,并且是没有显示器的,服务器上面存放的是一些资源.

  4. 如果要去编写网页,那么网页的构成是什么?

    最终前端工程师的工作内容就是编写一个个网页,最终构成一个网站.网站由三部分构成,第一个部分为构建网页结构的HTML,美化网页样式的CSS,实现网页与用户交互的JavaScript.

  5. 常见的浏览器引擎?

    浏览器拿到index.html代码是如何解析的呢?---浏览器内核,也叫渲染引擎,可以将代码渲染成丰富多彩的页面.常见的渲染器内核有: Trident,Gecko,Presto,Webkit,Blink.

  6. 什么是HTML?

    了解了这么多,要开始学习构成网页结构的HTML了,HTML又叫超文本标记语言,分开来理解,超文本就是超越文本,网页不只有文本格式的,也有超链接,图片,音频,视频等;标记语言可以这么理解,当我们找一个新闻页面时,将页面上的文字复制下来粘贴到我们编写的页面中,最后浏览器呈现的内容格式却和新闻页面的严重不符,这是怎么回事呢?如何才能达到页面的那种效果?这就要使用的HTML中的标签了,HTML有一个标签叫h(标题)标签,使用h标签将标题围起来,相当于在这里做了个标记,当浏览器解析到这部分时,就知道这段文字是标题,于是就知道怎么去渲染它了,所以HTML中提供的标签能够起到标记作用,告诉浏览器这些文字应该在网页中扮演什么角色,如何去渲染它们.

  7. HTML的格式?

    HTML的大致知道了,那么HTML的结构是怎样的,不妨看看其他网页的结构组成?

    image.png 上图为京东网的截图(右键查看源代码即可),很明显能看出来,HTML由html标签嵌套一个head标签和body标签.html与head,body标签存在父子关系,head与body为兄弟关系

  <head>元数据(描述网页)</head>
  <body>
    (展示内容)
    <h1>Hello World</h1>
  </body>
</html>

`

Hello World

`

  1. 元素的组成?
    HTML是由一个个标签组成,那么这些标签要如何使用?语法是什么?首先上面的代码使用了h1(标题)标签,它是由开始标签,标题内容,结束标签组成,如下图 元素的组成.PNG
    但是并非所有标签都有结束标签,上面含有结束标签的称为双标签,有双标签就有单标签,可以这么区分它们,标签内部需要填入文字的一般为双标签,比如h,p,a标签,它们都是需要文字的;而单标签不需要填入文字,如hr,br,img标签

  2. 元素的属性
    上面并非元素的完整结构,有时候标签需要属性(键值对)来辅助,比如可以使用一下img标签,单独写img标签的话,页面只会为img标签留下一个空白位置,因为只有img的话,浏览器不知道要显示什么图片,img需要src属性来指定要显示的图片.(代码与运行结果如下)

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .title {
      color: red;
    }
  </style>
</head>
<body>
  <h1 class="title">我是标题</h1>
  <img src="">
  <img src="../a.jpg">
  <h1>标题2</h1>
</body>
</html>

`

我是标题

标题2

'

  1. HTML中的注释
    HTML中的注释为<!---->,注释中间写内容,快捷键ctrl+/.注释可以给代码起到解释说明的作用,不仅是给自己看的,也可以为接手这个项目的其他程序员观看,方便理解代码中的逻辑.

  2. HTML结构分析

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

!DOCTYPE html : 文档声明,告诉浏览器这是一个HTML文档,且告诉浏览器该网页使用的HTML的版本
html标签 : 根元素,是HTML中的顶级元素,其中的lang属性标明网页的语言,en为英文,zn-CH为中文;当浏览器访问到某个网页时,浏览器会将读取到的页面语言和本地语言进行比较判断，如果一致，不做处理，否则提示是否需要翻译.
head标签 : 头部标签,其中放的是网页的一些配置属性,也称为元数据;
meta charset="UTF-8":规定了网页使用的编码.
meta http-equiv="X-UA-Compatible" content="IE=edge" : IE浏览器的适配.
meta name="viewport" content="width=device-width, initial-scale=1.0"
title标签 : 网页的标题.
body标签 :- body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构
以下为常见的标签

avatar
文章
阅读
粉丝