Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html 文档结构和页面元素三大属性学习总结
Blogger Information
Blog 14
fans 0
comment 2
visits 12661
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html 文档结构和页面元素三大属性学习总结
JKY辉哥
Original
587 people have browsed it

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。
Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：写的很不错，加油！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post