HTML入门笔记1

HTML 是谁发明的

HTML 是李爵士发明的

HTML 起手应该写什么

VSCode内新建 HTML 文件，输入英文!号，等出现提示后按 Tab 键

章节标签




  
  
    
    
    
    
    
    
    Document
    
  
  
    顶部广告
    
      
        文章标题

        
          第一章
          
            这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话
            这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话
            这是一段话这是一段话这是一段话
          

          
            1.1 节
            一段话
          
          
            1.2 节
            一段话
          
        
      
      
        参考资料 1 2 3
      
    
    © xxx版权所有

表示文章/书的层级

标题 h1 ~ h6
章节 section
文章 article
段落 p
头部 header
脚部 footer
主要内容 main
旁支内容 aside
划分 div

全局属性

所有标签都有的属性

class

上面的选择器没有选中，正确写法如下：

因为如果以 [] 的方法做选择器， "middle bordered" 是一个整体属性，所有这种写法非常不方便

新的写法如下：

这种写法，写一部分就匹配到对应的标签

contenteditable

div 嵌套的文字内容在网页显示时候，是可以编辑

将 style 标签放到 body 标签内，加上 contenteditable 和
style { display: block; border: 1px solid red; }
这部分代码，可以让 sytle 标签显示出来，
实时修改 CSS 看到效果，一个简单的编辑器

hidden

让标签隐藏

顶部广告

但可以通过 CSS 重新显示出来

id

顶部广告

如果是全页面唯一的，可以用 id, 不是就用 class
其实不到万不得已，不要用 id,因为可能会不报错


  顶部广告
  
  © xxx版权所有

上面的 header 和 footer 都是相同的 CSS 效果。所以不到万不得已，不要用 id

顶部广告

xxx.style.border = "1px solid green";

如果是唯一的 id，可以直接像上面一样修改 CSS
等价于：

顶部广告

但不到万不得已，不要这样写
因为如果 id 用 JavaScript 的保留字段，这个方法不生效，如下：

顶部广告

self.style.border = "1px solid green";

上面这样写就不生效了

顶部广告

document.getElementById("top");

xxx.style 直接获取对应属性，只有老司机敢用，一般上面方法稳点

style

顶部广告

xxx.style.border = "10px solid black";

样式优先级，javascript > 内联样式 > head 的 style 标签样式

tabindex

顶部广告

© xxx版权所有

按 Tab 键按顺序切换到对应位置
但 0 是最后，-1 表示永远不要到这个位置

title


  顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告

CSS 省略号的写法如上
title 的作用是鼠标浮到对应位置可以显示完整的内容

默认样式

为什么有默认样式

因为 HTML 被发明的时候，CSS 还没有出生

怎么看默认样式

Chrome 开发者工具
Elements -> Styles -> user agent stylesheet

User Agent

就是浏览器

CSS reset

默认样式已经不符合我们的需求

常见 CSS reset

个人常用的代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6{
    font-weight: normal;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

可以抄大厂的代码

进入大厂首页
Chrome 开发者工具，找到类似代码
复制到自己的项目
命名为 reset.css

内容标签

ol + li
有序列表
ul + li
无序列表
dl + dt + dd
描述列表
pre
保留空格、回车、Tab 就用 pre
code
用来放代码，字体等宽的
hr
分割线
br
换行
a
链接, targer="_blank" 新标签打开
em
强调，语气方面,字体是斜体
strong
重要，本身，字体加粗
quote
引用，行内的
blockquote
引用，换行的





  
  
  
  Document



  
    
      这是分割线
      
      前端是什么

      
        
          第一章:

          工作内容
        
        前端每天要做的事情有

        
          发邮件
          跟产品经理撕逼
          写页面
          吃饭
          休息
          学习
        

        我的同事有
        
          Ben
          技术爱好者
        

        我会写 JavaScript,下面演示：
                    
var a = 1
console.log(a)
            
        
        
          访问网站 QQ
        

        
          我们 期末考试 重点是JavaScript
        

        李白的诗：床前明月光
        

        欧阳修说过马上 枕上 厕上

        
          1.1 节
          一段话
        
        
          1.2 节
          一段话
        
      
    
    
      参考资料 1 2 3
    
  
  © xxx版权所有

版权：归饥人谷所有