HTML入门笔记

128 阅读2分钟

1. HTML是谁发明的

发明者是 Tim Berners-Lee 和他的同事 Daniel W. Connolly。

2. HTML起手式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

3. 常用的表章节的标签

标题 h1~h6 用于表示标题,h1默认的标题最大,h6 最小

<h1>标题</h1>

章节 section 表示一个包含在HTML文档中的独立部分

<section>内容</section>

文章 article 元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构

<article>内容</article>

段落 p 通常用来的表示一个段落

<p>内容</p>

头部 header 通常用于页面头部的标签

<header>内容</header>

脚部 footer 通常用于页面脚部的标签

<footer>内容</footer>

主要内容 main 通常用于包裹页面主要内容的标签

<main>内容</main>

旁支内容 aside 通常用于侧边栏的标签

<aside>内容</aside>

划分 div 通常用于划分一个区域的标签

<div>内容</div>

4. 全局属性

  • class 类
  • contenteditable 可编辑的
  • hidden 隐藏
  • id (唯一性,但是唯一性不可靠,能不用尽量不用)
  • style 样式
  • title 标题(鼠标悬停在上面时候显示的内容)
  • tabindex 可以用tab键选中
tabindex=0 表示最后被选中
tabindex=-1 表示不能被选中

5. 常见的内容标签

  • ol+li 有序列表+列表项
<ol>
    <li></li>
    <li></li>
</ol>
  • ul+li 无序列表+列表项
<ul>
    <li></li>
    <li></li>
</ul>
  • dl+dt+dd 自定义列表+列表项+列表描述
<dl>
    <dt>
    <dd></dd>
    </dt>
</dl>
  • pre 标签里面,所有的空格,回车等格式都会被保留
<pre>内容</pre>
  • hr 标签表示水平分割线
<hr/>
  • br 标签表示打断,强制换行
<br/>
  • a 标签是表示超链接
<a href="链接"></a>
  • em 标签,斜体,表强调
<em>内容</em>
  • strong 标签,粗体,表强调
<strong>内容</strong>
  • code 标签里面包含代码
<code>代码</code>
  • q 标签,quote的缩写,表示引用(行内引用,不换行)
<q>引用的内容</q>
  • blockquote 标签,表示引用(块级引用,换行)
<blockquote>引用的内容</blockquote>