初识HTML元素与DOM结构

HTML元素

元素	描述
<!DOCTYPE html>	声明文档类型（HTML）
<html></html>	HTML文档开始、结束标签
<head></head>	头部信息标签,内部可包含meta信息、样式表以及JS等
<title></title>	页面标题
<body></body>	HTML文档正文内容区域，输出到页面的内容置于body标签内部
<script></script>	Javascript代码块，内部可直接书写JS代码
<style></style>	样式代码块，内部可直接书写CSS代码

完整的HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> </title>
</head>
<body>
</body>
</html>

HTML标签通用属性

属性名称	描述
id	HTML标签唯一标识
class	某一类的标签的标识
style	定义标签的CSS样式

比如：

<p id="subject-readonly" class="subject" style="color: #999;">这是一个文章标题</p>

DOM对象

名称	描述
window	浏览器窗口对象，管辖下属所有元素
document	即：window.document，标识当前文档

这两个常用的对象，下面有很多属性和方法，通过console.log()可以具体查看；
通过操作window、document，即可实现对整个网页的修改。

练习小结

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML结构与元素</title>
  <style type="text/css">
    h2 {
      color: aqua;
    }
    .intro {
      background-color: cadetblue;
      color: red;
    }
    #first {
      background-color: chartreuse;
    }
    #second {
      color: blue;
    }
    #third {
      background-color: yellow;
      color: brown;
    }
  </style>
</head>
<body>
<h2>HTML结构</h2>
<p id="first" class="intro">这是第一个段落</p>
<p id="second" class="intro">这是第二个段落</p>
<p id="third" class="intro">这是第三个段落</p>
<script>
  let obj = {
    title: window.document.title,
    ele: document.documentElement,
    h2: document.getElementsByTagName('h2'),
    p1: document.getElementsByClassName('intro'),
    p2: document.querySelectorAll('.intro')
  }
  obj.p2[0].style.backgroundColor = '#000';
  console.log(obj);
  console.log(window.document);
</script>
</body>
</html>

HTML元素

完整的HTML结构

HTML标签通用属性

DOM对象

练习小结

相关文章