《HTML入门笔记1》HTML由李爵士发明的 h1-h6 标题 section 小节 article 文章 p 段落 h

HTML是谁发明的

HTML由李爵士发明的

HTML起手式

<!DOCTYPE html> <!--文档类型-->
<html lang="zh-CN"> <!--html必要，lang 表示语言是什么 这里的 en 指的是英文，zh-CN指的是中文-->
<head><!--head里面包含着看不见的标签，它和body一般不缩进-->
    <meta charset="UTF-8"> <!--文件的字符编码是UTF-8(支持所有)，如果写的编码和实际html编码不同的话会出现乱码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--最新版本的Ie浏览器-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!--防止页面缩放-->
    <title>标题</title> <!--标题-->
</head>
<body>
    
</body>
</html>

常用的章节标签

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

<!DOCTYPE html>
<html>

<head><!--head里面包含着看不见的标签-->
  <meta charset="utf-8">
  <title>HTML标签</title>  
</head>  
<body>
  <header>顶部广告</header> <!--头部-->
    <div> <!--划分-->
  <main> <!--主要内容-->
    <h1>文章标题</h1>
    <section> <!--小节-->
      <h2>第一章</h2> 
      <p>这是一段话一段话</p>
    </section>
    <section>
      <h3>1.2节</h3>
      <p>一段话就是好多好多人嗷嗷</p> <!--段落-->
    </section>
    <footer>&copy饥人谷版权所有</footer> <!--脚部-->
  </main>
  <alisd><!--次要内容-->
    参考资料 1 2 2
  </alisd>
  </div>
</body>
</html>

全局属性

class ：给标签分类就是某一部分是什么样子的进行归类

contenteditable ：可编辑任何元素就是客户可以直接编辑可以用作调试技巧

hidden : 就是隐藏

id ：给标签加名字然后添加样式与class 类似，

id 属性规定 HTML 元素的唯一的 id。id 在 HTML 文档中必须是唯一的。id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。不到万不得已不用id 在控制台打出windows.时控制台所显示的所有单词都不能作为 id的名字 就是忌讳

style：规定元素的样式 css html js属性同时存在的话，js优先级会覆盖css。

tabindex：规定元素的tab键次序，就是相当于鼠标，tab 顺序根据后面数字大小的顺序来规定的但是不一定是连着的 🤡注意如果 tabindex=0 则tab顺序为最后一个，tabindex=-1 则不会进行访问。tabindex=1，它会按照1 2 3顺序走，特殊值0“最后访问”，特殊值-1“别访问我”。

title：规定有关元素的额外信息 鼠标放上去显示完整的一段话

contextmenu ：规定元素的上下文菜单，上下文菜单在用户点击元素时显示

内容标签

ol+li 有顺序列表

<body>
  <div>
    <main>
      <h1>前端是什么</h1>
      <section>
        <h2>第一章：工作内容</h2>
        <p>前端每天要做的事情有</p>
        <ol><!--ordered list 有顺序的列表-->
          <li>发邮件</li> 
          <li>跟产品经历沟通</li>
          <li>写页面</li>
          <li>打lol</li><!--list item ol只能还有li-->
        </ol>
  </div>
</body>

ul+li 无序列表

<body>
  <div>
    <main>
      <h1>前端是什么</h1>
      <section>
        <h2>第一章：工作内容</h2>
        <p>前端每天要做的事情有</p>
<ul> <!--unordered list 没有顺序的列表-->
          <li>写作业</li>
          <li>打游戏</li>
          <li>查资料</li>
        </ul>
   </div>
</body>

dl+dt+dd

<dl> <!--表述列表-->
          <dt>思思</dt> <!--表述东西-->
            <dd>大美女</dd><!--表述内容-->
</dl>

pre （由于默认多个连续的空白都显示一个空, 所以加上pre就可以实现与代码操作相同）
```
  <h2><pre>第一章：   
        
        
        
        工作内容</pre></h2>
```
hr 用来做分割线（单）

code （写代码时，代码字母等宽，且默认不会换行）

这里一般是pre 包裹 code

 <pre>
        <code>
          var a =1
          console.log(a)     
        </code>
 </pre>

br 换行使用（单）
a 网址

<p>
          访问网站<a href="http://qq.com" target="-blank">qq</a>  <!--这里target 是只用新窗口打开-->
</p>

em 语气上的强调
strong 是强调内容本身的重要性
quote 引用的意思
blockqute 是一种一整块引用的意思