HTML 自用学习笔记 （一）

明芫
145 阅读2分钟

基本文档

  1. <！DOCTYPE> 是一个文档类型标记，说明Html或者XHtml的版本
  2. <html> 定义一个 HTML 文档
  3. <title> 定义标题
  4. <body> 定义主体

基本标签

  1. <h1></h1>~<h6></h6> 定义标题 HTML5中align属性已经不被支持
  2. <p> </p> 定义段落，块级元素,默认宽度100%
  3. <br> 折行
  4. <hr> 水平线

格式标签

  1. <abbr></abbr> 标记缩写（拼写检查，搜索引擎）
  2. <address></address> 定义联系信息
  3. <b></b> 粗体
<abbr title="Hello World">HW</abbr>
<address>Written by 177<b>xxxxxx@xxx.xxx</b></address>

结果： HW

Written by 177xxxxxx@xxx.xxx
  1. <blockquote></blockquote>定义块引用 ,可选属性cite(规定引用来源)
  2. <cite></cite> 标签定义作品标题
<blockquote cite="http://www.wwf.org">
  This is a long quotation. This is a long quotation.
</blockquote>
<p>
    <cite>《富春山居图》</cite>由黄公望始画于至正七年(1347)，于至正十年完成。
</p>

结果：

This is a long quotation. This is a long quotation.

《富春山居图》由黄公望始画于至正七年(1347)，于至正十年完成。

  1. <code></code> 标签定义一段代码
  2. <del></del> 删除 划线）
  3. <dfn></dfn> 定义项目
<code>print("Hello World")</code>
<del>删除的文本</del>
<dfn>定义项目</dfn>

结果： print("Hello World")
删除的文本
定义项目

  1. <em></em> 定义强调文本
  2. <i></i> 斜体
  3. <ins></ins> 被插入文本（下划线）
  4. <mark></mark> 定义带有记号的文本(高亮)
<em>强调文本</em>
<i>斜体</i>
<ins>被插入文本</ins>
<mark>带有记号的文本</mark>

结果：
强调文本
斜体
被插入文本
带有记号的文本

  1. <meter></meter> 标签定义已知范围或分数值内的标量测量
<meter value="3" min="0" max="10"></meter>

结果： image.png

  1. <pre></pre> 预格式化的文本,保留空格和换行符
<pre> 预格式化的文本,保留      (空格)和
（换行）</pre>

结果：

 预格式化的文本,保留      (空格)和
（换行）
  1. <progress></progress> 正在进行的下载(进度)
<progress value="22" max="100"></progress>

结果： image.png

  1. <q></q> 短引用（会加""） 可选的属性cite
<p>张三说<q cite="http://www.wwf.org">你好</q></p>

结果：

张三说了你好两个字

  1. <ruby></ruby> 标签定义 ruby 注释（中文注音或字符）
    <rt></rt> ruby提供该信息，和ruby一起使用
    <rp></rp> 在ruby中使用，定义不支持ruby时要显示的内容
<ruby>属性<rt>shuxing</rt><rp>shuxing不显示</rp></ruby>

结果： 属性shuxingshuxing不显示

  1. <sup></sup> 标签可定义上标文本 (高度为普通文本一半)
  2. <sub></sub> 标签可定义下标文本
<p>m<sup>2</sup> m<sub>2</sub></p>

结果：

m2 m2

  1. <template></template> 隐藏标签,需要js内控制显示
<template>
  <h2>我隐藏了</h2>
</template>

var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true)
document.body.appendChild(clon)

29.<time></time> 定义时间日期

<p>我在情人节<time datetime="2022-02-14">9:00</time>有个约会。</p>

结果：

我在情人节有个约会。

30.<u></u> 定义与常规文本风格不同的文本

<p>文本<u>错误的单词</u>。</p>

结果：

文本错误的单词。

  1. <wbr></wbr> 规定在文本中的何处适合添加换行符（单词太长，或者浏览器会在错误的位置换行，可以使用 <wbr>）
<p>
   如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>
avatar
文章
阅读
粉丝