HTML入门笔记-01

HTML的诞生

超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言
时间：1989年诞生
作者：Tim Berners-Lee（2017年被颁发图灵奖）

HTML起手式

写html时，首先应该写哪些内容？

<!-- 文档类型 告诉浏览器是html文件类型-->
<!DOCTYPE html>
<!-- lang:规定元素内容的语言(language缩写) en -- English,可改成zh-CN -- 简体中文(中国大陆) -->
<!-- <html lang="en"> -->
<html lang="zh-CN">
<head>
    <!-- 文件的字符编码 -->
    <meta charset="UTF-8">
    <!-- viewport视窗，防止页面缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 告诉IE浏览器使用最新内核 -->
    <meta http-equiv=x-ua-compatible content="ie=edge">
    <!-- 网页标题 -->
    <title>Document</title>
</head>
<body>
</body>
</html>

HTML章节标签

章节标签主要是用来表示网页的层次结构，但这并不是严格的进行划分，常用的章节标签有如下这些：

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

<header>头部内容</header>
  <div>
      <main>
          <h1>前端是什么</h1>
          <!-- section 章节 -->
          <section>
              <h2>第一章：工作内容</h2>
              <p>前端每天都要做的事情有</p>
              <section>
                  <h3>1.1节</h3>
                  <p>我是1.1节</p>
              </section>
              <section>
                  <h3>1.2节</h3>
                  <p>我是1.2节</p>
              </section>
          </section>
      </main>
      <!-- aside 旁支内容 -->
      <aside>
         参考资料     
      </aside>
  </div>
<footer>&copy; 2020xxx版权所有</footer>

HTML全局属性

全局属性指可以对任何元素都可以使用的属性，常用的全局属性有如下这些：

class

作用：规定元素的一个或多个类名，多个类名之间用空格分隔

例如:

<div class = "middle bordered"></div>

id

作用：1. css 加样式 2. js 可以直接获取id

例如：

#xxx{
	border: 10px solid red;
}

xxx.style.border: '10px solid red';
//不提倡用这种写法， 因为这种写法对 id 的命名有要求，比如用 parent, top, self 等命名 id 就不行。因为 window 里有很多已经定义好的全局属性，不可以和这些属性同名。 
//不到万不得已不要用 id，用 class

style

作用：设置内联样式

优先级：JS > HTML 中的 style 标签 > CSS

tabindex

作用：tab键用于导航时，该属性规定tab键控制次序

正数，如 tabindex=1/ 2/ 3...，表示按顺序访问； 0 表示最后访问； -1 表示不要用 tab 访问

title

作用：规定关于元素的额外信息，鼠标移到元素上时显示一段提示文本

contenteditable(html5)

作用：指定元素是否可以在浏览器直接被编辑

hidden(html5)

作用：显示或隐藏标签

HTML内容标签

常用的内容标签有如下这些：

pre

作用：保留空格、tab、回车键

<!-- pre 保留空格 tab 回车 -->
<pre>
你好
再见
</pre>

code

作用：设置英文字体等宽

<pre>
  <!-- 字体等宽 -->
  <code>
    var a = 1
    console.log(a)
  </code>
</pre>

hr

作用：水平分割线

br

作用：换行

ol li

有序列表（ordered list）

<!-- ordered list -->
<!-- ol中只能有li -->
<ol>
	<!-- list item -->
	<li>写页面</li>
	<li>发邮件</li>
	<li>吃饭</li>
</ol>

ul li

无序列表（unordered list）

<!-- unordered list -->
<ul>
	<!-- list item -->
	<li>写页面</li>
	<li>发邮件</li>
	<li>吃饭</li>
</ul>

dl dt dd

定义列表（description term）

我的舍友们有
<dl>
	<!-- description term -->
	<dt>老胡</dt>
	<!-- 描述内容 -->
	<dd>帅哥</dd>
</dl>

em

作用：表示语气上的强调

strong

作用：表示内容上的强调

<!-- em 语气强调，strong 内容强调 -->
<p>我们<em>期末考试</em>内容是<strong>JavaScript</strong></p>

quote

作用：内联引用

blockquote

作用：块级引用

<!-- quote 内联引用，blockquote 块级引用-->
鲁迅说过<quote>123</quote><hr>
鲁迅说过<blockquote>123</blockquote>

如何让< style> 标签显示在页面上？

把< style>放在< body>里面然后设置 style {display: block}

「前端学习笔记」HTML入门