html 标签与元素

2019/04/14 Html

扎扎实实地学, 不要急

标题

<h1>This is a title</h1>
<h2>This is a title</h2>
<h3>This is a title</h3>
<h4>This is a title</h4>
<h5>This is a title</h5>
<h6>This is a title</h6>

This is a title

This is a title

This is a title

This is a title

This is a title
This is a title

空行

html 所有标签都需进行闭合, 请在使用 <br> 标签时同样将其闭合为 <br />

<br />


段落

<p>This is my first paragraph.</p>
<p>This is another paragraph.</p>

This is my first paragraph.

This is another paragraph

链接

<a href="https://zoharyip.club">Zohar's Bolg.</a>
Zohar's Bolg.

<a name="bookmark1">扎扎实实地学, 不要急</a><br />
...<br /><br />
<a href="#bookmark1">Jump to BookMark1</a>

<!-- other page -->
<a href="https://zoharyip.club/2019/04/14/html-note/#bookmark1">Jump to BookMark1 in other page</a>
Jump to BookMark1

Jump to BookMark1 in other page

图片

<img src="https://zoharyip.club/favicon.ico" alt="little pig" />
little pig

图片链接

使用 <a></a> 标签, 将 <img/> 包围起来, 即可生成图片链接

<a href="https://zoharyip.club"><img src="https://zoharyip.club/favicon.ico" alt="little pig" /></a>
little pig

背景图

使用常见图片格式, 若图片小于页面, 则重复铺排, 此处不予演示

<body background="path/of/the/img"></body>

格式化

通用

标签 作用 演示
<b></b> 加粗 这是加粗
<strong></strong> 强调 这是强调
<em></em> 强调 这是强调
<i></i> 斜体 这是斜体
<big></big> 增大 这是增大
<small></small> 缩小 这是缩小
<sup></sup> 上标 这是上标
<sub></sub> 下标 这是下标
<del></del> 删除 这是删除
<ins></ins> 下划 这是下划

缩写

  • abbr: 定义缩写

      <abbr title="etcetera">etc.</abbr>
    
    etc.
  • acronym: 定义首字母缩写

      <acronym title="World Wide Web">WWW</acronym>
    
    WWW

引用

<blockquote>This is a long quotation, the browser will check out the blockquote tag and set a left margin and line feed for it.</blockquote>
<br/>
<q>This is a small quotation</q>
This is a long quotation, the browser will check out the blockquote tag and set a left margin and line feed for it.

This is a small quotation

计算机格式

  • 输出

      <samp>
      demo.example.com login: Apr 12 09:10:17
      Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
      </samp>
    
    demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
  • 代码

      <code>
      var person = {
          firstName:"Bill",
          lastName:"Gats",
          age:50
          }
      </code>
    
    var person = { firstName:"Bill", lastName:"Gats", age:50 }
  • 代码块

      <pre>
      var person = {
          firstName:"Bill",
          lastName:"Gats",
          age:50
          }
      </pre>
    
      var person = {
          firstName:"Bill",
          lastName:"Gats",
          age:50
          }
      
  • 按键

      <kbd>K</kbd><br/>
      <kbd>CTRL</kbd> + <kbd>A</kbd>
    
    K
    CTRL + A
  • 变量

      <var>E = m * c * c</var>
    
    E = m * c * c

表格

<div style="text-align:center">
    <table border="1" style="margin: auto">
    <tr><th>FIRST</th><th>SECOND</th><th colspan="2">THIRD</th></tr>
    <tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td></tr>
    <tr><td>2.1</td><td>2.2</td><td colspan="2">2.3</td></tr>
    </table>
</div>
<!-- 
    tr: 行
    th: 列标题
    td: 单元格
 -->
FIRSTSECONDTHIRD
1.11.21.31.4
2.12.22.3

列表

  • 无序列表

    无序列表的项目符号可选,以 ul 标签的属性设置: type="disc/circle/aquare"

      <ul>
          <li>Mike</li>
          <li>Jackson</li>
          <li>Anna</li>
      </ul>
    
    • Mike
    • Jackson
    • Anna
  • 有序列表

    有序列表的项目序号可选: type="a/A/I/i"

      <ol>
          <li>Teacher</li>
          <li>Student
              <ul type="circle">
                  <li>Mike</li>
                  <li>Anna</li>
                  <li>John</li>
              </ul>
          </li>
          <li>Master</li>
      </ol>
    
    1. Teacher
    2. Student
      • Mike
      • Anna
      • John
    3. Master
  • 定义列表

      <dl>
          <dt>Mike</dt><dd>boy</dd>
          <dt>Jackson</dt><dd>boy</dd>
          <dt>Anna</dt><dd>girl</dd>
      </dl>
    
    Mike
    boy
    Jackson
    boy
    Anna
    girl

布局元素

内联元素

元素仅在行内起作用, 重要的内联元素:

元素 作用
<span></span> 文本容器

块元素

元素以区域块方式起作用, 重要的块元素:

元素 作用
<div></div> 元素容器
<p></p> 段落
<header></header> 页眉
<nav></nav> 导航
<section></section>
<aside></aside> 侧栏
<footer></footer> 页脚

框架

用于引入多个 html 页面

<html>
<frameset cols="25%,50%,25%">
    <frame src="/html/frame_a.html" />
    <frame src="/html/frame_b.html" />
    <frame src="/html/frame_c.html" />
</frameset>
</html>

内联框架

用于在页内显示其他页面

<iframe src="https://zoharyip.club" width="360" height="480"></iframe>

字符实体

实体 作用 编号 示例 编号示例
&nbsp; 空格 &#160;    
&lt; 小于号 &#60; < <
&gt; 大于号 &#62; > >
正在加载今日诗词....

Access Statistics

Table of Contents