9. HTML标签

1.英语小课堂

英文

翻译

英文

翻译

heading

标题

order

顺序，秩序

body

正文

ordered

有顺序的

paragraph

段落

unordered

无顺序的

section

章，节

description

描述

article

一篇文章

term

术语

main

主要

data

数据

aside

旁边的，不是主要的

quote

引用

anchor

锚，定点

block

块

strong

强壮，重要

inline

一行内，内联

emphasis

强调，重读

break

打断

strong和emphasis，strong是本身重要，emphasis是主观认为重要

2.学习工具

VSCode推荐插件

Prettier=》cmd+shift+P

设置自动格式化代码

auto save：onFocusChange

Format on save: 打勾

3.HTML起手式

Emmet感叹号

VSCode创建index.html

输入!会自动添加如下代码

<!DOCTYPE html><!--文档类型 告诉浏览器开始写html了--> 
<html lang="zh-CN"><!--根标签必须写 lang表示language，中文一般写成zh-CN，代表中国大陆中文，google翻译插件就是根据这个来判断页面语言--> 
<head><!--head 和 body不缩进 head里写的都是看不见的元素--> 
    <meta charset="UTF-8"><!--UTF-8代表字符编码，如果charset和实际写的语言不同的话会造成乱码，UTF-8支持全人类的语言，全球统一使用--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- viewport：视窗，整行代码可以防止页面缩放-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--如果当前浏览器使用的是IE，请升级成最新的IE内核  -->
    <title>Document</title>
</head>
<body>  
</body>
</html>

方方要求的emmet

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

4.章节标签 & 全局属性

章节标签表示文章/书的层级

标题`h1 - h6`

章节`section`

文章`article`

段落`p`

头部`header`

脚部`footer`

主要内容`main`

旁支内容`aside`

划分`div`

全局属性

`class` 给标签分类 `.class`

`contenteditable` 使用户可编辑

把style放进body，可以在页面上显示style并且修改

<style contenteditable>
     style{
       display:block
     }
    .middle{
      background: #000;
      color:white;
    }
    .bordered{
      border: 10px solid red;
    }
  </style>

`hidden`隐藏

`id` 不到万不得已不要用id，因为重复id不会报错。`#id`

id可以在js中直接被调用

xxx.style.border = "1px solid blue"

凡是window.的保留字串不可以拿来做id name,可以在开发者模式console打window.来查看

`style`每个元素里可以写一个style

style（在html）优先级高于css，如果两个地方都写了style的话

如果js里也写了，js会覆盖所有的style

`tabindex`可以用键盘控制

正值表示顺序访问

tabindex=0 代表最后一个访问

tabindex=-1代表不要到这个位置

`title`可以显示完整内容

鼠标悬浮，会显示title的内容

title太长不想换行：

white-space:nowrap//不要换行

Text-overflow:ellipsis//溢出就省略

Overflow:hidden//省略用...

5.默认样式 & CSS reset

为什么有默认样式

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

怎么看默认样式

Chrome开发者工具

Elements->Styles->user agent stylesheet

User Agent

就是浏览器

CSS reset

默认样式已经不符合我们的需求，要把默认样式干掉

  <style>
    *{margin:0;padding:0;box-sizing:border-box;}
    *::after, *::before(box-sizing:border-box;)
    h1,h2,h3,h4,h5,h6{font-weight:normal;}
    h1{font-size:48px;}
    h2{font-size:36px;}
    a{color:inherit;text-decoration:none;border-bottom:1px solid}
    ul, ul {list-style: none;}
  </style>

常见CSS reset

方方经常用的：https://gist.github.com/FrankFang/df5e57a0799823ed89a960a642b3a1e2

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
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

6.常用的内容标签

ol+li:

ul+li

dl+dt+dd

dl:discription list

dt:discription term

dd:description data

pre:

一般打多个空格只显示一个空格，如果想保留就用pre

hr

水平分割线

br

换行

a

用来创建链接

国内：会加target="_blank"

国外：不加，让用户自己选择怎么打开页面

em语气强调

strong本质强调

code

写代码的，字体全部是等宽，默认是内连元素，可以使用pre包裹

quote内联引用

blockquote块级引用

7.客观题： HTML 入门测试已通过

8.主观题： HTML入门博客

上一页8. HTML概览下一页10. HTML重难点

最后更新于4年前

9. HTML标签

9. HTML标签

1.英语小课堂

2.学习工具

推荐书籍

VSCode推荐插件

设置自动格式化代码

推荐网站

3.HTML起手式

4.章节标签 & 全局属性

章节标签表示文章/书的层级

标题`h1 - h6`

章节`section`

文章`article`

段落`p`

头部`header`

脚部`footer`

主要内容`main`

旁支内容`aside`

划分`div`

全局属性

`class` 给标签分类 `.class`

`contenteditable` 使用户可编辑

`hidden`隐藏

`id` 不到万不得已不要用id，因为重复id不会报错。`#id`

`style`每个元素里可以写一个style

`tabindex`可以用键盘控制

`title`可以显示完整内容

5.默认样式 & CSS reset

为什么有默认样式

怎么看默认样式

User Agent

CSS reset

常见CSS reset

6.常用的内容标签

7.客观题： HTML 入门测试已通过

8.主观题： HTML入门博客

hashtag9. HTML标签

hashtag1.英语小课堂

hashtag2.学习工具

hashtag推荐书籍

hashtagVSCode推荐插件

hashtag设置自动格式化代码

hashtag推荐网站

hashtag3.HTML起手式

hashtag4.章节标签 & 全局属性

hashtag章节标签表示文章/书的层级

hashtag标题h1 - h6

hashtag章节section

hashtag文章article

hashtag段落p

hashtag头部header

hashtag脚部footer

hashtag主要内容main

hashtag旁支内容aside

hashtag划分div

hashtag全局属性

hashtagclass 给标签分类 .class

hashtagcontenteditable 使用户可编辑

hashtaghidden隐藏

hashtagid 不到万不得已不要用id，因为重复id不会报错。#id

hashtagstyle每个元素里可以写一个style

hashtagtabindex可以用键盘控制

hashtagtitle可以显示完整内容

hashtag5.默认样式 & CSS reset

hashtag为什么有默认样式

hashtag怎么看默认样式

hashtagUser Agent

hashtagCSS reset

hashtag常见CSS reset

hashtag6.常用的内容标签

hashtag7.客观题： HTML 入门测试已通过

hashtag8.主观题： HTML入门博客

9. HTML标签

1.英语小课堂

2.学习工具

推荐书籍

VSCode推荐插件

设置自动格式化代码

推荐网站

3.HTML起手式

4.章节标签 & 全局属性

章节标签表示文章/书的层级

标题`h1 - h6`

章节`section`

文章`article`

段落`p`

头部`header`

脚部`footer`

主要内容`main`

旁支内容`aside`

划分`div`

全局属性

`class` 给标签分类 `.class`

`contenteditable` 使用户可编辑

`hidden`隐藏

`id` 不到万不得已不要用id，因为重复id不会报错。`#id`

`style`每个元素里可以写一个style

`tabindex`可以用键盘控制

`title`可以显示完整内容

5.默认样式 & CSS reset

为什么有默认样式

怎么看默认样式

User Agent

CSS reset

常见CSS reset

6.常用的内容标签

7.客观题： HTML 入门测试已通过

8.主观题： HTML入门博客