HTML标签

coolke
245 阅读3分钟

HTML标签

1.HTML概览

  1. 万维网[World Wide Web]
    • WWW=URL+HTTP+HTML
    • 发明者: 蒂姆·伯纳斯·李（Tim Berners-Lee）
  2. HTML排错
    • a.看vscode/webstorm的颜色提示
    • b.使用验证器
      • 在线验证:w3c validator
      • npm工具:node-w3c-validator

2.起手式

1656508097385.png

3.章节标签

(表示文章/书写层级)

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

拓:版权所有标志©的写法:© xxx

4.全局属性

(所有标签都有的属性)

  • class [ 对标签标记,分类 ]

    • eg:<div class="middle"></div>

  • id [对标签标记,分类]

    • eg:<div id="middle"></div>
    • 在CSS里加样式 eg:#xxx
    • 在JS里直接通过id获取对应元素 eg:id.style.border = "1px solid red"
      • 不推荐这种写法,因为windows里有很多已经定义好的全局属性,如parent, top等,所以如果id是其中之一则无法在JS里直接找到。
      • 不到万不得已不用id,因为可能会不报错,一般都用class.
      • 全局唯一用id,不唯一用class的说法并不严谨.

  • contenteditable [使页面内容可被编辑]

  • hidden [隐藏标签]

  • style [编辑标签样式]

    • style优先级: JS > CSS > HTML. 即同一元素分别用HTML,CSS,JS进行style编辑, 最终以JS为准. 因为JS内容可覆盖HTML,且虽然style用的CSS语法,但是它是HTML属性.
    • style一般放在<head></head>里.如果把style放在<body></body>里面,然后设置 style {display: block},style属性就会显示在页面上.

  • tabindex [控制Tab的顺序]

    • Tab键可在浏览器页面进行内容选择,tabindex属性可控制Tab的选择顺序
    • 选择顺序由1开始从小到大访问,可以不连续 eg: tabindex=1 优先于 tabindex=2 优先于 tabindex=7
    • tabindex=0 指代追后一个访问
    • tabindex=-1 指代拒绝进行访问

  • title [标题]

    • 单行溢出的处理: white-space: nowrap;[不换行]

    overflow: hidden;[溢出的部分隐藏]

    text-overflow: ellipsis;[溢出的部分用省略号表示]

    title="完整的内容"[当鼠标悬浮在上面时会显示完整内容]

5.内容标签

  • ol+li[有序列表]
  • ul+li[无序列表]
  • dl+dt+dd[描述列表]
    • 结构方式:输入dl+ 点击Tab
  • pre[保留空格,回车,Tab等操作]
    • 浏览器有个默认规则是"多个连续的空白(包括回车,空格等)只显示一个空格"可将<pre></pre>放在标签里面包裹住内容就能保留住空白格式. eg:输入
<h1>
HTML入门笔记1
HTML标签
</h1>

显示

HTML入门笔记1 HTML标签

输入

<h1><pre>
HTML入门笔记1
HTML标签
</pre></h1>

显示

HTML入门笔记1
HTML标签

  • hr[做分割线]
  • br[打断此行,进行换行]
  • a[超链接]
    • eg:<p>访问<a herf="http://qq.com">QQ</a></p>会显示

      访问QQ

      这会在现有窗口打开链接,如果想要在新窗口打开链接,如下所示:<p>访问<a herf="http://qq.com" target="_blank">QQ</a></p>会显示

      访问QQ

  • em[强调]
    • 默认是斜体,对语气上的强调
  • strong[强调]
    • 默认是加粗,对本质上的强调
  • code[写代码时字母等宽]
    • <code></code>写代码,可以使字母等宽,但是无法换行,可以用<pre></pre>包裹使其换行
  • quote[行内引用]
  • blockquote[换行引用]

6.默认样式

(HTML标签自带的样式)

  • 查看
    • 开发者工具 > Elments > Styles > user.agent stylesheet
  • CSS reset [更改默认样式]
    • 关于table:
      • 一定要加两句
table {
border-collapse:
collapse;border-spacing: 0;
}

两句都是合并border的意思,二句是为了使得IE识别.

「资料来源：饥人谷」
avatar
文章
阅读
粉丝