search

博客列表 >html 文档结构和页面元素三大属性学习总结

html 文档结构和页面元素三大属性学习总结

JKY辉哥
JKY辉哥原创
2020年06月12日 17:38:35586浏览

html 文档结构和页面元素三大属性学习总结

1.HTML5 ⽂档结构

代码 描述
<!DOCTYPE html> 通知浏览器这是⼀个 HTML5 ⽂档,应始终写在第⼀⾏
<html>...</html> 根标签,或叫根元素,整个 hmtl ⽂档内容都必须写到这对标签中
<html lang="en"> 通知搜索引擎 html ⽂档使⽤的编写语⾔,如果是中⽂建议改成:<html lang="zh-CN">
<head>...</head> 供浏览器和搜索引擎使⽤,描述字符编码集,视⼝与⻚⾯标题,⽤户并不感兴趣
<meta> 设置⻚⾯元素数据, 所谓元数据, 就是描述某种特定信息的数据
<meta charset="UTF-8"> 通知浏览器 html ⽂档编写语⾔所属的字符编码集,最流⾏的是UTF-8,已成⾏业标准
<meta name="viewport" content="..." /> 下⾯三⾏是对它的解读
name="viewport" 设置视⼝(即可视区屏幕)如何显示这个⻚⾯, 例如是否允许缩放这个⻚⾯
initial-scale=1.0 设置⻚⾯初始绽放⽐例,1.0表示原样 1:1 显示,不允许有任何绽放
<title> 显示在浏览器标签上的⽂本, 指定当前⻚⾯的标题, 这个标签对 SEO ⾮常重要
<body>...</body> ⻚⾯主体内容,允许或希望⽤户的内容都应该写到这⾥,⽤户也只对这⾥的内容感兴趣
<!-- 注释内容 -> 注释⽤来描述标签功能或⽤途,它的内容不要出现在显示的⽹⻚中, 只会出现在 html 源代码中

2.关于对象

  • 请简单描述自己的女朋友
  • 姓名：晓丽， 年龄：20，性别：女， 身高：170，体重：80kg
  • <女朋友 姓名="小丽" 性别="女" 年龄="23">一个将来有可能会成为老婆的女人</女朋友>

  • 女朋友/对象用属性来描述： 姓名=”小丽” 性别=”女” 年龄=”23”

  • 2.1.window

  • 浏览器全局对象

  • 2.2.document

  • 代表当前的 html 文档

  • 2.3 浏览器的控制台

  • 控制台：浏览器内置的一个 javascript 解释器，执行器

  • 2.4HTML 文档结构代码示例

  1. <!--文档类型：html5-->
  2. <!DOCTYPE html>
  3. <!-- html 根元素 -->
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>html页面的文档结构</title>
  9.     <!-- 内联样式表 一个HTML文档可以写多个<style></style> -->
  10.     <style>
  11.       h2 {
  12.         font-size: 16px;
  13.         line-height: 40px;
  14.         text-align: center;
  15.       }
  16.       div {
  17.         padding-top: 20px;
  18.         text-align: center;
  19.       }
  21.       div h2 {
  22.         font-weight: bolder;
  23.         color: sandybrown;
  24.       }
  25.     </style>
  26.     <style></style>
  27.     <style></style>
  28.     <style></style>
  30.     <!-- JS文件-->
  31.   </head>
  32.   <!-- 主体内容 -->
  33.   <body>
  34.     <script>
  35.       1;
  36.     </script>
  37.     <script>
  38.       2;
  39.     </script>
  40.     <script>
  41.       3;
  42.     </script>
  43.     <h2>PHP中文网第12期培训班~20200611</h2>
  45.     <div>
  46.       <h2>最常见的结构网站应该使用什么</h2>
  47.       <p>一个主页index.html</p>
  48.       <p>一个图片images 文件夹</p>
  49.       <p>一个样式表styles 文件夹</p>
  50.       <p>一个脚本scripts 文件夹</p>
  51.     </div>
  53.     <script>
  54.       //javascript的脚本代码
  55.       //使用console.log()指令将代码执行结果发送到浏览器控制台显示
  57.       //显示全局对象：window
  58.       console.log(window);
  60.       //显示html文档到控制台显示
  61.       console.log(window.ducument);
  63.       //显示当前页面url
  64.       console.log(window.document.url);
  66.       //省了window
  67.       console.log(document.url);
  69.       //文档类型
  70.       console.log(window.document.doctype);
  72.       //根元素HTML
  73.       console.log(window.document.documentElement);
  74.       //头元素
  75.       console.log(document.head);
  77.       //编码
  78.       console.log(document.charset);
  80.       //title
  81.       console.log(document.title);
  83.       //修改title标题  document.title="123"   用单引号和双引号都可以
  84.       //如何用js脚本访问HTML
  85.       document.title = "用js脚本修改HTML文档标题";
  87.       //主体
  88.       console.log(document.body);
  89.       //修改主体背景颜色
  90.       document.body.style.backgroundColor = "wheat";
  92.       //样式表css
  93.       console.log(document.styleSheets);
  94.       console.log(document.styleSheets[0].type);
  96.       //js脚本
  97.       console.log(document.scripts);
  98.       console.log(document.scripts[0]); //第1个js基本
  99.       console.log(document.scripts[3]); //第4个js基本
  101.       //第四个脚本，整好是当前正在被执行的js
  102.       console.log(document.currentScript);
  104.       //获取脚本相同，判断返回值true
  105.       console.log(document.scripts[3] === document.currentScript);
  107.       console.log(document.h2);
  108.     </script>
  109.   </body>
  110. </html>
  • 运行结果
    html文档结构

3.元素的三大通用属性

  • id:获取页面中的唯一元素
  • class:获取页面中的一类元素
  • style：设置某个元素的内联样式
  • id,class:用在 css，js 中获取一个或多个元素对象
  • style:用来设置某个元素的具体样式的

  • 元素的三大通用属性代码演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>元素的三大属性</title>
  7.     <style>
  8.       /* id获取元素 */
  9.       #title-id {
  10.         color: red;
  11.       }
  13.       .title-class {
  14.         color: blue;
  15.       }
  16.       /* style属性设置的样式优先级大于class */
  17.       /* style属性设置的样式：内联样式，仅对当前元素有效 */
  19.       /* css:层叠样式表 */
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <!--1. id属性：由用户保证它在当前页面的唯一性，浏览器并不检查，专用于获取唯一元素 -->
  24.     <!--2. class属性：类属性，返回多个具有共同特征的数据集合 -->
  25.     <!--3. style属性：设置当前元素的样式 -->
  26.     <h2 id="title-id" class="title-class bgcolor" style="color: red;">
  27.       PHP中文网第12期培训班
  28.     </h2>
  29.     <p id="title-id" class="title-class bgcolor">主讲：朱老师</p>
  30.     <p class="title-class" id="title-id">php还是世界上最好的语言嘛？</p>
  32.     <style>
  33.       .bgcolor {
  34.         background-color: yellow;
  35.       }
  36.     </style>
  38.     <style>
  39.       /* 元素、标签选择器 */
  40.       /* 元素选择器优先级小于类选择器,类选择器又小于id选择器*/
  41.       /* tag < class < id */
  42.       p {
  43.         color: violet;
  44.       }
  45.     </style>
  47.     <script>
  48.       //定义一个求和函数
  49.       let girl = {
  50.         sum: function (a, b) {
  51.           return a + b;
  52.         },
  53.       };
  54.       console.log(girl.sum(30, 40));
  56.       //修改h2标签里面的文本内容
  57.       document.getElementById("title-id").textContent = "hello,joe";
  59.       //显示h2标签内容
  60.       //   const h2 = document.getElementById("title-id");
  61.       //   console.log(h2);
  62.       //   h2.style.color = "red";
  64.       //改变id的title-id元素背景色为黄色
  65.       //   const ele = document.getElementById("title-id");
  66.       //   console.log(ele);
  67.       //   ele.style.backgroundColor = "yellow";
  69.       //类选择器title-class
  70.       const eles = document.getElementsByClassName("title-class");
  71.       console.log(eles[1]);
  73.       //标签选择器p
  74.       const p = document.getElementsByTagName("p");
  75.       console.log(p);
  76.       console.log(p[1]);
  78.       // 直接使用css选择器来获取：几代前端人的梦想
  79.       //用title-id拿数据
  80.       let x = document.querySelector("#title-id");
  81.       console.log(x);
  83.       //用.title-class类拿数据
  84.       //获取满足条件的第一个，只返回一个
  85.       //   let y = document.querySelector(".title-class");
  87.       //返回全部满足条件全部元素
  88.       let y = document.querySelectorAll(".title-class");
  89.       console.log(y);
  91.       //返回共同有类选择器title-class和bgcolor全部元素
  92.       let z = document.querySelectorAll(".title-class.bgcolor");
  93.       console.log(z);
  94.     </script>
  95.   </body>
  96. </html>
  • 运行结果
    页面元素三大通用属性

4.总结

  • 浏览器 window 是全局对象；
  • document 代表当前文档；
  • 浏览器的控制台：浏览器内置的一个 javascript 解释器，执行器，用命令； console.log()输出到控制台内容；
  • 元素的三大属性，元素(标签)选择器优先级小于类选择器,类选择器又小于 id 选择器
  • JS 脚本操作页面元素优先级最高 > id > class > tag。
上一条：HTML文档结构以及元素的三大通用属性的掌握，使用浏览器控制台配合js命令获取HTML不同文档内容下一条：第二次作业 HTML页面的文档结构、元素三大通用属性、样式规则
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多