简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML文档结构和元素的三大通用属性及优先级
Blogger Information
Blog 16
fans 2
comment 0
visits 19892
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文档结构和元素的三大通用属性及优先级
肖傲的博客
Original
1130 people have browsed it

一、HTML 文档结构

1.html的结构

  1. <!-- 声明文档类型:html -->
  2. <! DOCTYPE html>
  3. <!-- html:根元素 -->
  4. <html lang="en">
  5.   <!-- head:头元素 -->
  6.   <head>
  7.     <!-- 声明字符集编码 -->
  8.     <meta charset="UTF-8" />
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  10.     <!-- 页面标题 -->
  11.     <title>我是页面标题</title>
  12.   </head>
  13.   <!-- 主题元素 -->
  14.   <body>
  15.     <h2>中文网第12期培训班</h2>  
  16.   </body>
  17. </html>

2.常用标签

1. <!DOCTYPE html> 声明文档
2. <html></html 根标签
3. <meta>设置页面的元素数据
4. <meta charset="UTF-8"> 声明字集编码是’UTF-8’
5. <head></head> 页面的头部
6. <h1></h1> 标题标签 有 1-6 级标题
7. <body>...</body> 页面的主体内容
8. <p>></p> 段落标签
9. <div></div> 通用容器标签子
10. <a></a> <br> 链接标签 和换行
11. <titele> 指定当前页面的标题
12. <strong> <em> 加粗和斜体
13. <ol>+<li></li>+</ol> <ul>+<li></li>+</ul> 有序列表 和无序列表
14. <img> <video> 图片和录像
15. <strong> <em> 加粗和斜体

3.初识js熟悉html文档

通过使用console.log()指令代码获取html文档

  • 获取全局window

  • console.log(window);

  • 获取当前的html文档

  • console.log(window.document);

  • 获取当前访问地址

  • console.log(window.document.URL);

  • 获取当前文档类型

  • console.log(document.doctype);

  • 获取根元素html

  • console.log(document.documentElement);

  • 获取头元素head

  • console.log(document.head);

  • 获取编码

  • console.log(document.charset);

  • 获取title标题

  • console.log(document.title);

  • 获取主体body

  • console.log(document.body);

二、html 的三大通用属性

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

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

优先级大小 style>id>class>tag

要理解优先级大小需要结合实例去理解

class 实例：
  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.       /* class获取元素 */
  9.       .tilele-class {
  10.         color: blue;
  11.       }
  12.       /* id获取元素 */
  13.       #title-id {
  14.         color: gray;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <h2 class="tilele-class" id="title-id">php中文网</h2>
  20.   </body>
  21. </html>

运行结果：

class 和id 实例：
  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.       /* class获取元素 */
  9.       .tilele-class {
  10.         color: blue;
  11.       }
  12.       /* id获取元素 */
  13.       #title-id {
  14.         color: gray;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <h2 class="tilele-class" id="title-id">php中文网</h2>
  20.   </body>
  21. </html>

运行结果：

id的优先级比class高，所以显示class的颜色

class 和id 及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.       /* class获取元素 */
  9.       .tilele-class {
  10.         color: blue;
  11.       }
  12.       /* id获取元素 */
  13.       #title-id {
  14.         color: gray;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <h2 class="tilele-class" id="title-id" style="color: red;">
  20.       php中文网
  21.     </h2>
  22.   </body>
  23. </html>

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！