Html页面结构-元素-类-ID等理解及学习内容

默写html页面的文档结构

1. !DOCTYPE html 文档体
2. html /html 根标签
3. 标签 meta 引入一个元素 lang 标签 编写语言
4. meta charset=“UTF-8”/ 网站编码
5. title里面是可以更改的网页标题/title
6. head /head 头部
7. body /body 身体 主体元素 内容
8. h1-h6 1级标题-6级标题
9. p元素 是一个段落
10. img 引入图片 video引入视频
11. src引入一个外部链接 图片或者视频
12. br换行 ul ol 有序列表 无序列表
13. dd dt dl 自定义的列表
14. span a 都是常用的标签

---

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

1. id获取属性 具有唯一性
2. class 获取一类元素 可以用到很多标签上面
3. style 行内元素
4. p h1 div等根元素来获取

   优先级对比

   根元素 < class元素 < id属性 < style行内

---

理解元素，类，id不同级别的样式规则

1. id用#号来表示 具有唯一性 css不报错 但是js不适用 用户来保证

 #title-id{
     color:#FFF;
 }

1. class用.表示 表示一类 可以多个使用

   .title-class{
     color:#FFF;
   }

2. style 行内样式 直接在例：p标签等表示

   style=“color:#FFF”

3. style /style 一般css都写着里面 这是Html的内联样式
   6.JavaScript可以获取并修改内容 样式 行为等
   6.1. 在Html中都需要用标签来表示 script 括号省略
   6.2. Window全局

   //window可以省略 因为像来自哪里一样省略中国
   //结尾都用;分号结尾
   //console.log 将代码发到控制台 像调试一样
   console.log(window);
   //docment 
   console.log(window.docment);
   //url
   console.log(window.docment.URL);
   //文档类型 doc type
   console.log(window.docment.doctype);
   //根元素htmlocment  Element(元素)
   console.log(window.docment.docmentElement);
   //头元素
   console.log(window.docment.head);
   //取头元素里面的东西 charset(编码)
   console.log(window.docment.charset);
   //tilte 
   console.log(window.docment.head);
   //用JS修改的语句
   docment.title="这里是修改的内容";
   //主体body同上 同理
   console.log(window.docment.body);
   //修改语言
   docment.body.style.backgroundColor="这是是颜色代码#开通";
   //样式表 也称CSS(层叠样式表)
   console.log(window.docment.styleSheets);
   //[0]表示索引 第几个 从0开始 
   console.log(window.docment.styleSheets[0].type);
   //js脚本  索引同理
   console.log(window.docment.script);
   console.log(window.docment.scrip[0]);
   //获取当前被执行脚本 快捷方式
   console.log(docment.surrentScript===[0]);
   //取元素标签 如h2 得使用元素 class id p等

   JavaScript声明变量 对象等

   //函数 function
   //sum就是一个变量 console相当于一个打印输出
   function sum(a,b){
    return a+b;  
   }
   console.log((10,20));
   //另一种方法  这里不是太懂
   let girl ={
    sum=function (a,b){
        return a+b;
    }
   }
   console.log(girl.sum(30,40));
   //用 docment  const(常量) 驼峰式命名法
   // get Element By Id 获取元素的ID
   const docment.getElementById("title-id");
   //获取h2 通过id的方式
   // ID多个 你只会拿到第一个
   const h2 =docment.getElementById("title-id");
   console.log(h2);
   h2.style.background="yellow";
   //通过class来获取 ele是元素 class是集合 所以复数  索引 获取等同理
   const eles =docment.getElementsByClassName("title-class");
   console.log(eles[0]);

   目前就是今天所学习的内容

   1.有不足之处望老师补充
   2.JS还是有点不理解 会多看视频的
   3.html+css+JavaScript 前端三宝