博主信息
博文 53
粉丝 3
评论 0
访问量 58860
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML基础知识入门:HTML的页面结构和三大基本元素属性
emagic
原创
1752人浏览过

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”);

批改老师:WJWJ

批改状态:合格

老师批语:写的很好,上传了手写版的图片,是一个好方法!继续加油
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学