FAQ中心
页面树结构
转至元数据结尾
转至元数据起始

一、浏览器页面组成介绍

在浏览器上展示的网页实际上是由html标签、css样式表、JS代码组成的。

  • htlm：浏览器上展示的内容需要html标签来承载，可以理解为网页的内容骨架。

  • css样式表：样式表顾名思义是给html标签添加样式，如颜色、字体、显示位置等。

  • JS代码：可以动态控制html和css，同时也可以处理于浏览器与用户交互的功能。

二、html标签

1、简介

html标签是一门标记语言，通过使用标记标签来描述网页，其包含了HTML 标签及文本内容，不同的标签有不同的显示特性。

2、基本语法

  • html标签是由尖括号包围的关键字，比如<html>

  • html标签通常成对存在，如：<div> </div>。部分标签也可单独存在，如<input >

  • 成对存在的标签第一个标签是开始标签、第二个为结束标签，结束标签需要再关键字前加多一个/，如：<div> </div>。

  • 不同的html标签会有自己特有的属性，不同的属性可以对html标签进行特殊化的处理，如<img src="url">

3、常用标签

<div>块标签</div>
<span>行内标签</span>
<p>段落标签</p>
<a href="链接地址">超链接</a>
<img src="图片链接" alt="some_text">
<input type="text/password/button">


二、css样式

1、简介

css指层叠样式表，多个样式定义可层叠为一个。css样式是用来定义html如何显示的，可以实现网页内容和显示样式分离配置。

2、基本语法

css样式语法由选择器、属性、属性值来组成。

选择器 {
    属性1:值;
    属性2:值;
}
​
div {
    background-color: red;
    text-align:center;
}


3、常用选择器 *

  • id选择器，使用#和id值来表示

    • 在同一个作用域中，标签的id值是唯一的，通过id值仅可找到唯一的一个标签

    • <div id="div1">id为div1的标签</div>
    • #div1 {
          ...
      }

  • 类选择器，使用.和类名表示

    • 类指css的类名，多个标签可能会有相同的类名，该选择器可影响多个标签。

    • <div class="class1">css类名为class1的标签</div>
    • .class1 {
          ...
      }

  • 标签选择器

    • 标签选择器实际上是就是使用html标签来作为选择器，直接写标签名即可，会影响多个标签

    • <div>div标签</div>
    • div {
          ...
      }

  • 属性选择器

    • 属性

    • <div pageid='123'>pageid属性为123的div标签</div>
    • div[pageid] {
          ...
      }
      div[pageid='123'] {
          ...
      }

4、常用样式

  • 宽：width 、高：height

    • div {
        height: 200px;
        width: 50%;
      }

  • 字体颜色：color

    • div {
          color : red;   /* 使用颜色名来设置颜色*/ 
          color : #ffffff;  /* 使用颜色16进制编码来设置颜色 */
          color : rgb(255,255,255);   /* 使用三原色配色表来设置颜色 */
      }

  • 背景颜色：background-color

    • div {
          background-color: red;
      }

  • 字体

    • ​
      div {
          font-size: 16px; /* 设置字体大小 */
          font-style: normal; /* 斜体 */
          font-weight: 300;  /* 值：normal 标准、bold 加粗、100-900 数字后不跟单位 */ 
      }

  • 隐藏

    • div {
          display: none
      }

三、js代码控制dom元素

1、获取标签元素对象

当网页被加载时，浏览器会创建页面的文档对象document，可以在浏览器控制台中直接调用到document对象，而获取指定标签就需要基于document对象来获取。

// 通过 id 找到 HTML 元素
document.getElementById("id1")
// 通过标签名找到 HTML 元素
document.getElementsByTagName("div")
// 通过类名找到 HTML 元素
document.getElementsByClassName("class1")
// 通过选择器来获取元素
document.querySelector("#id1")
document.querySelectorAll("div [pageid='123']")

2、动态创建并添加标签

  • 创建标签

    • const input = document.createElement("input");

  • 添加内容

    • input.innerHTML = "input标签文本"

  • 添加标签属性

    • input.type = "button"

  • 作为子元素添加到节点树上

    • element.appendChild(para);

3、设置标签样式

在获取到标签对象之后，可以修改标签对象的style属性的值来修改标签样式，style下存储的是当前标签的css属性组成的对象，需要注意的是css的一些属性名会使用-来连接两个词，而在js中推荐使用驼峰体的格式来命名变量，所以修改这部分样式时，需要把-去掉，并把-右边的第一个字母大写，如font-style属性则写成fontStyle。

// 设置字体颜色为红色
div.style.color = "red";
// 设置背景颜色
div.style.backgroundColor = "#fffff"
// 设置标签隐藏
div.style.display = "none";



  • 无标签