HTML - HTML入门笔记1 - 《前端学习》

HTML的发明者
HTML的起手式
常用表示章节的标签
全局属性
内容标签

HTML的发明者

HTML是被 Tim Berners-Lee（李爵士）在1990年左右发明的

HTML的起手式

在VSCode或WebStorm中创建index.html文件（或在代码沙盒）输入 ! 和一个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>

常用表示章节的标签

h1~h6 表示标题，大小逐级递减

<h1>文章第一标题</h1>
<h2>文章第二标题</h2>

section 表示章节

p 表示段落(paragraph)

<section>
  <h3>1.1节</h3>
  <p>愉快的一天又开始了</p>
</section>

article 表示文章
header 表示头部，可以用来写广告信息
```
<header>顶部广告</header>
```
footer 表示尾部，可以写版权信息（版权符号 © ）
```
<footer hidden>&copy;Bruce</footer>
```
main 表示主要内容
aside表示次要内容
```
<aside>
  参考资料 1 2 3 4 
</aside>
```
div 用来划分区块（division）

全局属性

class ：用于对标签进行分类，方便定义同类型标签的style
```
<div class="middle bordered" contenteditable>
```
contenteditable ：意思是内容可编辑的，标签中加了即标志标签框起来的内容部分可以在output栏编辑
```
<style contenteditable>
 ...
  </style>
```
hidden ：用于隐藏标签里的内容
```
<footer hidden>&copy;Bruce</footer>
```
id：该属性是元素在网页内的唯一标识符，作用与class相似，不到万不得已不要用该属性

style：用来指定当前元素的CSS样式

<p style = "color : red">愉快的一天又结束了</p>

tabindex：该属性值是一个整数，表示用户按下Tab键时，网页焦点转移顺序
1. 如果是该值是正整数，转移顺序按照从小到大排序，值可以不连贯，如果多个元素的tabindex属性相同，则按照在网页源码里面出现的顺序遍历。
2. 如果该值为0，则表示最后一个访问
3. 如果该值为-1，则表示永不访问
```
<style contenteditable tabindex = -1>
<header tabindex = 2>顶部广告</header>
<h1  tabindex = 0>文章第一标题</h1>
<h2  tabindex = 1>文章第二标题</h2>
```
title：该属性用来为元素添加附加说明，鼠标悬停就可以显示出来
```
<p title ="What a nice day">愉快的一天又开始了</p>
```
内容标签

ol + li（ordered list + list item）

<p>今天的代办事项</p>
  <ol>
    <li>吃</li>
    <li>喝</li>
    <li>玩</li>
    <li>乐</li>
  </ol>

ul + li（unordered list + item）

<p>我爱的零食</p>
<ul>
    <li>樱桃味可乐</li>
    <li>火锅味冰淇淋</li>
    <li>芥末海苔味脆脆鲨</li>
  </ul>

dl + dt + dd description list + description term +description detail (多个dt对应一个dd；和一个dt对应多个dd都是合法的）

<dl>
    <dt>CPU</dt>
    <dd>中央处理器</dd>
     <dt>Memory</dt>
     <dd>内存</dd>
    <dt>Hard Disk</dt>
    <dd>硬盘</dd>
  </dl>

pre （preformatted）默认情况下多个空白只被认为是一个空,使用

 就可以保留多个空格
<pre> 
   我想保留多个           空格
    </pre>
 
hr 该标签是可以添加水平分割线的该标签是单独使用的，没有闭合标签
<p>这样</p>
  <hr>
  <p>那样</p>
br（break）换行 
  <p>
   静夜思 <br>
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。
</p>
a（anchor）添加网址，放置链接
<a href="https://jirengu.com/">饥人谷官网</a>
em（emphasis） 表示语气上的强调，浏览器默认以粗体显示
strong 表示内容本身的重要性，浏览器默认以粗体显示
<pre>
    <p>
    <em>优秀的生活习惯是：</em>
  <strong>多读书，多看报，少玩手机，多睡觉。</strong>
    </p>
  </pre>
code用于包装代码，要想要多行显示就要配合使用
<pre> 
 <code>
   var a = 1
   console.log(a)
 </code>
  </pre>
q（quote） 表示引用他人的话。浏览器会在样式上，与正常文本区别显示
<p>
   沃茨基硕德：
    <q>
   不呼吸，就会死
  </q>
  </p>
blockquote：这是换行引用
```html
    沃茨基硕德
不呼吸就会死
  
 
```

HTML入门笔记1

HTML的发明者

HTML的起手式

常用表示章节的标签

全局属性

内容标签