收藏
WJ批改状态：合格
老师批语：写的非常好，认真，继续加油！
一个简单的 html 页面如下
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>20200611</title></head><body><h1>PHP小刚的日志</h1><span>这是一个span元素</span><p>这是一个P元素<strong>p元素中的一个加重字</strong></p></body></html>
主要由 4 个部分组成
<!DOCTYPE html> html文件的文档类型，用于声明html文本类型。
<html>...</html> html页面代码根元素标签，包含头部标签与主体内容。
<head>...</head> html页面代码头部元素标签，包含meta、tittle等头部元素，多用于seo优化，视口设置等。
<body>...</body> html页面代码主体元素标签，包含浏览器主窗口中的元素。注意：这里的 “元素” 与 <body>…</body> 中的 “元素” 是不一样的概念。
结构如下图
这几个部分也共同组成了浏览器的
javascript全局对象window，结构如下
ps:浏览器集成了javascript解释器。
html页面
<body>...</body>中的元素标签都具有3个通用属性
id id选择器，具有唯一性，浏览器不检查，需要用户自行约束
class 类选择器，样式优先级小于标签中style属性的样式
style 在元素标签中设置样式，优先级最高
下面我们来看一段html代码
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>20200611</title></head><style>h1 {color: green;}#h1-id {color: blue;}.h1-class {color: red;}</style><body><h1 id="h1-id" class="h1-class" style="color: yellow;">PHP小刚的日志1</h1><h1 id="h1-id" class="h1-class">PHP小刚的日志2</h1><h1 class="h1-class">PHP小刚的日志3</h1></body></html>
实际效果图 
由此可知样式优先级：
style中设置的样式 > css中#id样式 > css中.class样式 > 标签选择器样式
获取html元素方式
window.document document对象
window.document.URL document对象中的url属性，URL大写
window.document.doctype document的类型
window.document.head document对象中head属性
…
由于
window是全局对象，以上代码可以省略window，那么，在浏览器控制台输出 document对象我们可以这么写
console.log(docement.documentElement) 输出html对象
console.log(document.body) 输出body对象
console.log(document.doctype) 输出html类型字符串
console.log(document.styleSheets) 输出样式表
console.log(document.scripts) 输出脚本对象
console.log(document.currentScript) 输出当前正在执行的脚本
…
注意：这种方式无法获取到body中的标签，如 <h1> 、<p> 、<div> 、<ul> 等
要获取body中的标签元素对象需要使用到javascript中的方法
getElementById() 通过id的值获取
getElementsByClass() 通过class的值获取，注意Elements的复数区别
getElementsByTagName() 通过元素名称获取，如 <h1> 中的 h1
…
在控制台中输出
console.log(document.getElementById("id-name")) 用id选择器获取元素
console.log(document.querySelector("#h1-class")) 用css选择器获取元素
…
来看部分javascript方法样例
// 通过id获取元素，总返回第一个function eleid() {const ele = document.getElementById("h1-id");console.log(ele);return;}// 通过class获取元素，返回一个集合function elesclass() {var els = document.getElementsByClassName("h1-class");console.log(els[0]);console.log(els[1]);console.log(els[2]);return;}// 通过标签获取元素，返回一个集合function elestag() {var elst = document.getElementsByTagName("h1");console.log(elst);return;}// 通过css样式获取元素function elescss() {// 获取满足条件的第一个var elscssid = document.querySelector("#h1-id");// 获取满足条件的所有var elscssclass = document.querySelectorAll(".h1-class");console.log(elscssid);console.log(elscssclass);return;}
可以使用html按钮点击事件来调用它们
<button onclick="eleid()">eles</button><button onclick="elesclass()">els</button><button onclick="elestag()">elstag</button><button onclick="elescss()">elscss</button>
总结：
对于html结构有清晰的认识，各个部分的作用是什么
认识css样式是如何生效的
样式优先级顺序要符合要求，避免重复设置样式
通过javascript脚本获取元素时，对象不同，获取方式不同
在html中的元素输出要注意单数复数问题，这取决于获取结果的数量
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
