Skip to content

HTML

#

Media query#

  • biaoyansu https://www.youtube.com/watch?v=Zt_oUGTfQzA&list=PLtredEOFmedP6zD9Jqvwbe9OQsUZu8-FG
  • use in JS
    • window.matchMedia returns a MQL(media query list) https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
    • window.matchMedia params: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
    • MQL properties https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList here mql.media= the query made in window.matchMedia;
  • not the first from https://www.w3schools.com/howto/howto_js_media_queries.asp
  • alternatives: window.innerWidth, document.body.offsetHeight (as a HTMLElement)
  • I used https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover to deduct if there is a mouse, so does keyboard

old#

过程记录#

  • .xhtml 和 .html 渲染方式不同 把.html的文件改成.xhtml就不能打开了 15分钟花在这个x上，原因是看错了

Questions#

  • overflow: hidden;
  • getElementByID("#XXX") 和 querySelector("XXX")的区别
  • visibility:hidden / display:none 区别 前者可以配合opacity,transition使用，后者不能。

Syntex#

  • 在html中可以直接用未预置的标签（自定义的，除了
    \

    ），还可在css中定义其格式。
  • 的style属性: style="max-width:60px; max-height:600px; position:relative; top:1px;"

---------script的引用 看似是将script写在html中，实际上只是避免了引用

以上两行 效果相同

---------style的引用

外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style)

同上

------------注释

html文件里面除了html标签代码，可能还会有css和js代码。

1
    html代码的注释用<!---->，要注释的内容写在中间，如：

可以换行

1

css代码的注释用/**/,如：

1/p{color:red;}/ js代码的注释用//进行单行注释，/**/进行多行注释，如：

12345/window.onload = function(){ //alert("hehe");}/

merged from docx#

WEB#HTML5学习笔记和问题 1 本文档 高亮表示重点   2 过程记录 .xhtml 和 .html 渲染方式不同？ 把.html的文件改成.xhtml就不能打开了吗？ 15分钟花在这个x上，原因是看错了 css清除一个元素的style

3 问题 overflow: hidden;

getElementByID("#XXX") 和 querySelector("XXX")的区别

visibility:hidden / display:none 区别 前者可以配合opacity,transition使用，后者不能。

=============================================

闭包函数 Yield是啥 IIFE：https://developer.mozilla.org/zh-CN/docs/Glossary/%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8F 对象：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects

4 语法： 4.1 的STYLE属性 style="max-width:60px;max-height:600px;position:relative; top:1px;"

4.2 用JS改变制定元素的样式

document.querySelector

A h2 element

A h3 element

("h2, h3").style.backgroundColor = "red"; 将为文档的第一个

元素添加背景颜色： 如果文档中

元素位于

元素之前，

元素将会被设置指定的背景颜色。

A h3 element

A h2 element

4.3 SCRIPT的引用

看似是将script写在html中，实际上只是避免了引用

以上两行 效果相同

4.4 STYLE的引用

外部样式表(External style sheet) 内部样式表(Internal style sheet) 内联样式(Inline style)

同上

4.5 注释

html文件里面除了html标签代码，可能还会有css和js代码。

1
2
3
    html代码的注释用<!---->，要注释的内容写在中间，如：1<!--<div></div>-->可以换行

    css代码的注释用/**/,如：

1/p{color:red;}/ js代码的注释用//进行单行注释，/**/进行多行注释，如：

12345/window.onload = function(){ //alert("hehe");}/

5 H5 5.1 自定义标签 在html中可以直接用未预置的标签（自定义的，除了

\

），还可在css中定义其格式。

5.2 DIV同时使用两个CLASS 同时使用两个class 通常我们只为属性指定一个class,但这并不等于你只能指定一个，实际上，你想指定多少就可以指定多少，例如：

...

通过同时使用两个class（使用空格而不是逗号分割）,这个段落将同时应用两个class中制定的规则。如果两者中有任何规则重叠，那么后一个定义将获得实际的优先应用。

5.3 输出数组时候保留中括号： 用JSON.stringify()。 读取时用JSON.parse()。

5.4 HTML5 中，