初识html结构与html元素三大属性，css层级关系， js获取html元素

一·初识HTML

1.什么是HTML
HTML的英文全称是 Hyper Text Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。

通俗易懂的来讲，我们现在上网浏览访问的网页就是浏览器以html文档转化出来的页面，也是我们前端开发的基础之基础要想展现出来一个漂亮而且完美的页面，我们须用到基础的前端三宝 html，css，js

2.浏览器创建一个网页的过程

我们了解了网页是怎么出来的后接下来我们学习下html的基本结构

3.html的基本结构与结构说明和写法

<!-- 声明文档类型是一个html -->
<!DOCTYPE html>
<!-- html 是html整个文档的根元素 所有要在网页中显示的内容都要写在html标签里 -->
<!-- <html></html> 这种成对出现的标签我们叫做非空元素 -->
<html lang="en">
<!-- head标签叫做头元素 -->
<head>
  <!-- meat叫做元数据 这个我也不清楚 我们知道就行不用深究 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meat标签下有几个元素我们了解一下即可 不常用到 
1.charset 里面放的是当前这个文档的编码格式 例国际通用UTF-8 charset="UTF-8"
2.name="viewport"  设置视口 简单理解就是电脑屏幕怎么显示这个网页   
-->
  <!-- title 相当于当前这个网页的标题 我们要在网页顶部标签栏显示的文字 -->
  <title>这是我的第一个网页</title>
</head>
<!-- body叫做主体元素  我们要在网页中显示的主要内容都是写在主体元素里 -->
<body>
</body>
</html>
<!-- 这些就是一个html的基本结构啦，要认真看哦 我在当前这种标签写的都是注释  在网页中不会执行 这个标签就是html的注释标签-->

以上就是html的基本结构怎么写和每个元素都是什么意思都有啦，自己领悟吧！！！

4.html的基本元素标签，我下面列一些，自己动手去试

（1）html元素分为两种

（2）元素有自己的属性和属性值
属性: 必须写到元素的 “起始标签” 中,由属性名和属性值⼆部分组成语法: 属性名="属性值",属性名推荐只使⽤⼩写字⺟,属性值推荐加上双引号 案例: <input type="password" maxlength="20" placeholder="⾄少8个字符" required> 属性值的常⽤类型如下

（3）语义化的布局元素有哪些？我列举一部分

(4)常用的文本元素，我列举一部分

以上这些元素内容具体怎么使用必须得个人去实际练练才知道他们都是做什么用的

5.html元素的三大属性

（1）id属性：相当于元素的身份证，由用户保证它在当前页面的唯一性，浏览器并不检查，应该专用于获取唯一元素

（2）class属性: 类属性，返回多个具有共同特征的元素集合可以给多个元素添加同一个类

（3）style属性: 设置当前元素对象的样式给当前元素做美化内联样式

用法：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>html三大属性</title>
  </head>
  <body>
    <!-- 1. id属性： 相当于元素的身份证，由用户保证它在当前页面的唯一性，浏览器并不检查， 应该专用于获取唯一元素-->
    <!-- 2. class属性: 类属性，返回多个具有共同特征的元素集合 可以给多个元素添加同一个类-->
    <!-- 3. style属性: 设置当前元素对象的样式 给当前元素做美化 -->
    <h2 id="title-id" class="title-class bgcolor" style="color: red;">
      我的第一个网页
    </h2>
    <p id="name-id" class="title-class">我是谁谁谁</p>
  </body>
</html>

页面显示效果如下图：

二·样式的优先级

注：因为样式的优先级涉及到很多我们目前先讲四个，后期更新到新知识的时候再加更一下css样式优先级的完整版！
内联样式 > ID 选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式优先级</title>
    <!-- style 样式表标签 html的样式可以写在以下标签中 -->
    <style>
        /* 用id给元素加样式 */
        #title-id{
            color: orange;
        };
        /* 用类类元素加样式 */
        .title_class{
            color: red;
        }
        /* 直接用标签名给元素加样式 */
        h2{
            color: yellow;
        }
    </style>
</head>
<body>
    <!-- h2元素中style内联样式直接给元素加样式 -->
    <h2 id="title-id"  class="title_class" style="color: blue;">测试样式优先级</h2>
</body>
</html>

显然<h2 id="title-id" class="title_class" style="color: blue;">内联样式的优先级最高只有他设置的蓝色生效了。
这里我就不一一测试了，要学习的小伙伴可以自己动手试试。

重要的再写一遍这四种优先级

内联样式 > ID 选择器 > 类选择器 > 标签选择器

三·认识一个html中写javascript脚本代码的标签及一些js简单语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style></style>
<body>
    <h2></h2>
</body>
<!-- <script></script> 所有要在当前html文档里要执行的javascript脚本代码都写在这个标签里 -->
<script>
 // 写的就是javascript的脚本代码
    // 使用console.log()指令将代码执行结果发送到浏览器控制台显示
    // 获取全局window
    console.log(window);
    // 获取当前的html文档
    console.log(window.document);
    // 获取url
    console.log(window.document.URL);
    console.log(document.URL);
    // 获取文档类型
    console.log(document.doctype);
    // 获取根元素html
    console.log(document.documentElement);
    // 获取头元素
    console.log(document.head);
    // 获取编码
    console.log(document.charset);
    // 打印控制台title
    console.log(document.title);
    //改变网页title
    document.title = "改变网页title";
    // 获取主体body
    console.log(document.body);
    //改变body的背景颜色
    document.body.style.backgroundColor = "wheat";
    // 获取样式表css
    console.log(document.styleSheets);
    console.log(document.styleSheets[0].type);
    // 获取js脚本
    console.log(document.scripts);
    console.log(document.scripts[0]);
    console.log(document.scripts[3]);
    // 第四个脚本正好是当前正在被执行的js
    // 获取当前正在被执行的js脚本
    console.log(document.currentScript === document.scripts[3]);
    console.log(document.h2);
</script>
<script></script>
<script></script>
<script></script>
<!-- js标签可以写多个 -->
</html>

这个有兴趣的同学可以先自己动手看看

今天的内容就到这里啦！！！

小结：

本文核心知识一定要理解，万事开头难，一定要在开头的时候多努力！！！
1.熟记html的基本结构
2.熟记html常会用到的三大属性
3.理解元素，类，id，内联样式的样式优先级

一·初识HTML

二·样式的优先级

三·认识一个html中写javascript脚本代码的标签及一些js简单语法

小结：

相关文章