Html入门笔记1

2020-04-26 133 阅读2分钟

历史

1900年左右，Html诞生。Tim Berners-Lee提出了“万维网”的构想，并同时发明了HTML、HTTP和URL。

起手式

在vscode中使用!+tab：

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

DOCTYPE文档类型
lang设置语言
charset字符编码
<title></title>标题
<body></body>正文

常用章节标签

表示文章的层级

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

全局属性

所有标签都有的属性

<class>分类
<id>名字
- 可用于设置分类、获取对应元素
<contenteditable>内容可被用户编辑
<hidden>隐藏
<style>效果
- 一般设置在<head>以隐藏
- 如果 CSS、Html、JS 的属性同时存在，则以JS为最终效果
<tabindex>控制tab键的响应顺序
- 值不必连续
- 0 表示最后才被 tab 访问
- -1 表示不可被 tab 访问
- 如果多个元素拥有相同的值，它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。
<title>鼠标悬浮时显示完整内容

常用内容标签

<ol>+<li> ordered list + list term
<ul>+<li> unordered list + list term
<dl>+<dt>+<dd> description list + description term + description data
<pre> 显示文本中的空白符（空格，换行）
<code> 显示代码，使字体等宽，与<pre>一起使用可显示多行代码。
<hr> horizontal rule
<br> break rule 打断，换行
<a> anchor 链接
<em> emphasis 语气强调
<strong> 内容强调
<q> quote
- <blockquote> 块引用