博主信息
博文 3
粉丝 0
评论 0
访问量 5304
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
文档结构介绍&html元素的三大通用属性
梦醒了
原创
1610人浏览过

HTML5 文档结构介绍&html元素的三大通用属性

image-20200612184610207

image-20200612184639721

标签元素解释

  • <!DOCTYPE html> 通知浏览器这是一个 HTML5 文档,应始终写在第一行
  • <html>...</html> 根标签,或叫根元素,整个 hmtl 文档内容都必须写到这对标签中
  • <html lang="en">通知搜索引擎 html 文档使用的编写语言,如果是中文建议改成:<html lang="zh-CN">
  • <head>...</head>供浏览器和搜索引擎使用,描述字符编码集,视口与页面标题,用户并不感兴趣
    <meta>设置页面元素数据, 所谓元数据, 就是描述某种特定信息的数据
  • <meta charset="UTF-8"> 通知浏览器 html 文档编写语⾔所属的字符编码集,最流行的是UTF-8,已成行业标准
  • <meta name="viewport" content="..." />下面三行是对它的解读
  • name="viewport"设置视⼝(即可视区屏幕)如何显示这个页面, 例如是否允许缩放这个页面
  • initial-scale=1.0 设置视口初始绽放比例,1.0表示原样 1:1 显示,不允许有任何绽放
  • <title>显示在浏览器标签上文本, 指定当前页面的标题, 这个标签对 SEO 非常重要
  • <body>...</body>页面主体内容,允许或希望用户的内容都应该写到这里,用户也只对这⾥的内容感兴趣
  • <!-- 注释内容 -> 注释用来描述标签功能或用途,它的内容不要出现在显示的网页中, 只会出现在 html 源代码中

html元素的三大属性

id属性:(id选择器)由用户保障当前页面唯一性,浏览器不做检查,js获取属性时只会获取到检测的第一个元素。

class属性:(类选择器)类属性,返回多个具有共同特征的元素集合。

style属性:(标签选择器)内联样式,将覆盖任何全局的样式设定。

id选择器>类选择器>标签选择器

HTML DOM 事件对象 console.log()

console.log() 方法用于在控制台输出信息。该方法对于开发过程进行测试很有帮助。

相比alert他的优点是:

  1. 可以看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容。

  2. console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。

  3. console里面的内容非常丰富,你可以在控制台输入:console,就可看到:

    image-20200612191343693

script标签中记录的就是javascript的脚本代码
使用console.log()指令将代码执行结果发送到浏览器控制台显示

  • 查看全局对象window
  1. console.log(window);
  • 查看当前HTML文档
  1. console.log(window.document);
  • 查看当前文档URL地址

    1. console.log(window.document.URL);
    2. console.log(document.URL);
  • 查看当前文档类型

    console.log(document.doctype);

  • 查看当前根元素HTML

  1. console.log(document.documentElement);
  • 查看当前头元素
  1. console.log(document.head);
  • 查看当前编码
  1. console.log(document.charset);
  • 查看当前title
  1. console.log(document.title);
  • 修改当前titil
  1. document.title = "如何使用JS脚本访问HMTL";
  • 查看当前主体body
  1. console.log(document.body);
  • 修改当前主体body
  1. document.body.style.backgroundColor = "red";
  • 查看样式表css
  1. console.log(document.styleSheets);
  • 根据索引查看第一个样式表类型

    1. console.log(document.styleSheets[0].type);
  • 获取当前正在被执行的js脚本

    1. console.log(document.currentScript);
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:作业非常的整齐
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学