Correcting teacher:WJ
Correction status:qualified
Teacher's comments:写的很好,可以写的更详细些。
<!-- 声明浏览器解析文档类型 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 文档编码格式 -->
<meta charset="UTF-8" />
<!-- viewport表示可视窗口 -->
<!-- width=device-width表示可示窗口宽度等于设备宽度,initial-scale=1.0表示无缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 页面标题 -->
<title>demo</title>
<!-- 放置class类属性,建议放在head -->
<style type="text/css">
/* 样式id选择器 */
#p_id {
color: wheat;
}
/* 类选择器 */
.p_class {
color: green;
}
.p_class_two {
color: blue;
}
/* 样式标签选择器 */
p {
font-size: 28px;
}
</style>
</head>
<!-- 页面主体,展示给用户看的内容就放在body里面 -->
<body>
<p>
这是一个段落标签,标签一般有三大属性,如id、name、class,当然也可以自定义一些特殊属性
</p>
<p id="p_id">id是标签三大属性之一,规范上,id在当前页面应该具有唯一性</p>
<p name="p">name属性</p>
<p class="p_class">
class是标签类样式
</p>
<p class="p_class p_class_two">
p_class_two属性可以覆盖前面p_class样式属性
</p>
<p style="color: red;">style是标签内元素属性,用来单独处理一个标签的样式</p>
</body>
<!-- javascript脚本语言 -->
<script type="text/javascript">
// windows表示整个文档对象
//修改文档背景颜色
document.body.style.backgroundColor = "wheat";
//修改文档标题
document.title = "这个是js修改的标题";
// 根据id来获取对应p标签内容,注意:若存在多个重复id,则只取第一个id元素
let p_id_content = document.getElementById("p_id").innerHTML;
console.log(p_id_content); //打印p_id_content内容
//根据class样式获取标签对象,因为class是可以有多个,所以需要用getElementsByClassName,返回的是一个对象集合
let p_class_content = document.getElementsByClassName("p_class");
console.log(p_class_content); //打印p_class_content内容
//根据标签来获取对象
let p_content = document.getElementsByTagName("p");
console.log(p_content);
</script>
</html>