博客列表 >HTML基础知识入门:HTML的页面结构和三大基本元素属性

HTML基础知识入门:HTML的页面结构和三大基本元素属性

emagic
emagic原创
2020年06月12日 00:55:061368浏览

0611作业

一、 默写html页面的文档结构

html是一种标记语言,在html中的内容都要使用标签的方式来标记和表示,区分功能

  1. <!DOCTYPE html>
  2. <!-- html5文档类型 -->
  3. <html lang="en">
  4. <!-- 根元素,语言为英文,中文把en改为zh-CN -->
  5. <head>
  6. <!-- 头元素标签 -->
  7. <meta charset="UTF-8" />
  8. <!-- meta 元数据,高速浏览器一些基本编码集等 -->
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  10. <!-- viewport视⼝,可视窗口,无缩放 initial-scale=1.0 -->
  11. <title>默写html页面的文档结构</title>
  12. <!-- 页面标题 -->
  13. </head>
  14. <!-- 头元素 闭合标签-->
  15. <body>
  16. <!-- 主体元素 -->
  17. <h2>HTML的结构</h2>
  18. <!-- 二级标题标签,一级为h1 -->
  19. <div>
  20. <!-- div块标签 -->
  21. <p>段落文字xxx</p>
  22. <!-- 段落标签 -->
  23. </div>
  24. </body>
  25. <script>
  26. // js代码区域
  27. alert("12期学习");
  28. </script>
  29. </html>

快速注释可以用快捷键ctrl+/

默写html文档结构


二、默写html元素的三大通用属性

序号 属性名 特性
1 id属性 通过id获取页面中的元素(唯一,哪怕重复也只取出第一个就不往下找了),选择器中一般用#开头
2 class类属性 获取一类元素的集合,选择器中一般用.开头
3 style属性 设置某个元素的内联样式

html元素的三大通用属性


三、理解元素,类,id不同级别的样式规则

样式优先级影响规则: 元素样式<类样式<id级别样式

可以使用CSS选择器来获取

  1. let x = document.querySelect("#test-id");
  2. let y = document.querySelectAll(".test-class");

**课堂小结复习:

  1. 对象可以通过属性来描述,如页面、标签都可以是对象,
    如<div id="唯一id属性" class="类属性" style="样式属性">显示的内容</div>

  2. window对象指的是浏览器的全局大对象,页面中的全部内容都是他的属性;
    document对象代表的是html文档对象;

  3. 可以在浏览器控制台中操纵元素对象
    console.log(window.document.URL) 命令中前面的window默认可以省略,URL要大写

  4. 元素三大通用属性:id,class,style

  5. 样式优先级:元素/标签tag样式 < class类样式 < id样式

  6. 可以使用CSS选择器来选择元素对象
    document.querySelect 只返回满足条件的第一个,
    document.querySelectAll会找到满足条件的全部元素。
    注意事项:如果使用CSS选择器来选择有空格的名称的元素,需要用.来替换空格
    如:
    body中的<h2 id="title-id" class="title-class bgcolor" style="color: red;">元素,
    使用CSS选择器要写成document.querySelectorAll(“.title-class.bgcolor”);

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议