简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML文档结构，通用属性，以及选择器优先级
Blogger Information
Blog 17
fans 1
comment 0
visits 14756
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
699 people have browsed it

HTML文档结构

  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>HTML文档结构</title>
  7. </head>
  8. <body>
  10. </body>
  11. </html>
代码 注释
<!DOCTYPE html> 声明文档类型
<html>*</html> 根元素整个文档必须写在这对标签中
<html lang="en"> 通知搜索引擎 html⽂档使⽤的编写语⾔,是中⽂建议改成:”zh-CN”
<head></head> 头元素，供浏览器搜索引擎使用
meta charset=”UTF-8” 通知浏览器html文档所使用的字符编码集
meta name=””content=”” 下面对其解读
name=”viewport” 设置视⼝(即可视区屏幕)如何显示这个⻚⾯, 例如是否允许缩放这个⻚⾯
width=device-width 宽度等同与设备的宽度
initial-scale=1.0 设置⻚⾯初始绽放⽐例,1.0表示原样 1:1 显示,不允许有任何绽放
<title></title> 标题
<body></body> 主题元素

元素通用属性

  • id属性：由用户保证它在当前页面的唯一性，浏览器并不检查，应该专用于获取唯一元素
  • class属性：类属性，返回多个具有共同特征的元素集合
  • style属性：设置当前元素对象的
    <p id="one" class="tow" style="color:red"></p>

选择器优先级:style(内联)>id(id选择器)>class(类选择器)>tag(标签选择器)

  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.       p {
  9.         color: blue;
  10.       }
  11.       .tow {
  12.         color: green;
  13.       }
  14.       #one {
  15.         color: orange;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <h2>常用选择器</h2>
  21.     <p>tag标签选择器</p>
  22.     <p class="tow">class选择器</p>
  23.     <p class="tow" id="one">id选择器</p>
  24.     <p class="tow" id="one" style="color: red;">style选择器</p>
  25.   </body>
  26. </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！