HTML基础知识：HTML的页面结构及三大基本元素属性

HTML的页面结构

HTML 页面树状结构图
HTML5文档结构

序号	代码	描述
序号	<!DOCTYPE html>	通知浏览器这是一个HTML5文档，应始终写在第一行
序号	<html>…</html>	根元素，或叫标签，整个HTML文档内容都必须写在标签内
序号	<html lang="en">	通知搜索引擎HTML文档使用的编辑语言，如果是中文建议改成：<html lang="zh-CN">
序号	<hend>…</hend>	头部标签，供浏览器和搜索引擎使用，描述字符编码集，视口与页面标题，用户并不感兴趣（写给浏览器看的，用户看不见）
序号	<meat>	设置页面元素数据，所谓元数据，就是描述某种特定信息的数据
序号	<meat charset="UTF-8">	通知浏览器html文档编写语言所属的字符编码集，最广泛使用’UTF-8(可识别所有语言)’，以成行业标准。（除了UTF-8还有GB2312 、ISO-8859-1、GBK等）
序号	<meat name="viwport" conter="..."/>	下面三行是对它的详细解读
序号	<name="viwport">	设置视口（即可视区屏幕）如何显示这个页面，例如是否允许缩放这个页面
序	<initial-scale=1.0>	设置页面初始缩放比例，’1.0’表示原样1:1显示，不允许有任何绽放
序号	<title>	显示在浏览器标签上的文本，指定当前页面的标题，这个标签对SEO非常重要
序号	<body>…</body>	主体标签，页面主体内容，允许或希望用户看见的内容都应该写到这里，用户也只对这里的内容感兴趣
序号	<!--注释内容-->	注释用来描述标签功能或用途，他的内容不会出现在显示的网页中，只会显示在HTML源代码中

HTML5元素

元素类型	标签类型	语法	实例
非空元素	双标签	<起始标签属性1 属性2 …>元素</起始标签>	<p>PHP中文网</p>
空元素	单标签	<标签属性1 属性2 …>	<img src="meinv/girl.jpg" alt="女孩">

HTML内容的获取方式

1.通过浏览器控制台 Console来获取

2.获取方式

// 必须使用<script></script>标签包含
<script>
    //写的就是javascript的脚本代码
    //使用console.log()指令将代码执行结果发送到浏览器控制台显示
    //调用全局widow   大BOOS
    console.log(window);
    //调用当前html文档
    console.log(windoe.document);  
    //调用URL
    console.log(windoe.docume.URL);//windoe可以省略
    console.log(document.URL);
    //文档类型
    console.log(document.docype);
    //根元素html
    cnsole.log(document.documentE1ement);
    //头元素
    console.log(document.head);
    //编码
    console.log(document.charsrt);
    //title标签
    comsole.log(document.title);
    docume.title='更改内容'   //字符串必须用引号包裹可以是双引号也可以是单引号
    //主体bady
    comsole.log(docume.bady);
    docume.bady.style.bgckgroundColor='wheat';
    //css样式表
    console.log(socument.styleSheets);
    console.log(socument.styleSheets[0].pyte);
    //js脚本
    console.log(socument.scripts);
    console.log(socument.scripts[0]);
    //当前正在被执行的脚本
    console.log(socument.currentScript);
    //直接使用选择器来获取
    只返回满足条件的第一个，只返回一个
    lex x=document.querySelector('#title-id');
    //返回满足条件的全部元素
    lex y=document.querySelector('.title-class');
    console.log(y);
</script>

三大基本元素

id属性：获取页面的唯一元素，由用户保证它在当前页面中的唯一性，浏览器并不检查，应该专用于获取一个元素
class属性：类属性，获取页面中的一类元素，返回多个具有共同特征的元素集合
style属性：设置某个元素的内联样式，此标优先级要大于class小于id，设置当前元素对象的样式（内联样式，只对当前样式有效）

id，class：用在css，js 中获取一个或多个元素对象
style：用来设置某个元素具体样式的
4.选择器排序：ID（id选择器）>class（类选择器）>tag(标签选择器)

总结

进一步了解了HTML5的结构组成以及标签属性
学会了如何用Console来获取内容
知道了三大基本元素的特性以及使用方法
因为是小白，所以部分代码不太理解需要后期加强学习巩固

HTML的页面结构

HTML内容的获取方式

三大基本元素

总结

相关文章