HTML入门笔记1

HTML的发明者

HTML是由英国计算机科学家蒂姆·伯纳斯-李创建的。

1.HTML起手应该写什么

<!DOCTYPE html>
<!-- 文件类型 -->
<html lang="en">
  <!-- 'lang'是language的意思，这里默认是'en'，我们一般改为'zh-CN'或者'zh-hans' -->
  <head>
    <!-- 这里通常放一些不用让用户看到的内容，即不会在页面展示。 -->
    <meta charset="UTF-8" />
    <!-- 一种文件字符编码 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 让IE默认使用最新版本，也可指定想使用的IE版本 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 网页的标题 -->
  </head>
  <body>
    <!-- 这里写页面可以展示的内容 -->
  </body>
</html>

2.常用的表示章节的标签如下：

h1~h6（一级标题 - 六级标题）
section （章节）
article（文章）
main （主体内容）
aside（旁支内容）
header（头部内容——通常是导航栏）
footer（底部内容——通常用来标注版权所有等内容）

3.HTML的16个全局属性如下：

（1）class（规定元素的一个或多个类名）
（2）id （区分于class，id是规定元素的唯一标识。但不推荐使用，因为不会报错）
（3）contentediable （规定内容是否可编辑）
（4）hidden （规定内容是否隐藏）
（5）style （规定元素的行内 CSS 样式）
（6）accesskey（浏览器用来创建激活或聚焦元素的快捷键）
（7）dir（文字的方向）
（8）lang（规定元素的语言）
（9）style（设置行内样式）
（10）tabindex（规定元素的tab的跳转次序）

正数——tab键正序访问
0——tab键最后访问
-1——tab键不访问

（11）title（鼠标移到元素上时显示一段提示文本）
（12）draggable（规定用户是否可以拖到元素）
（13）dropzone（规定在拖动被拖动数据时是否进行复制、移动或链接）
（14）spellcheck（规定是否对元素进行拼写和语法检查,对拼写错误的单词会在其下方出现红线）
（15）translate（规定是否应该翻译元素内容）
（16）data-*（用于存储页面或应用程序的私有定制数据）

4.常见的内容标签如下：

（1）a标签（超链接）

    <a href="//google.com">谷歌</a>
    <!-- 'href'是Hyper Reference 译为超级引用，即超链接 -->

（2）p标签（段落）

    <p>
      对这个世界如果你有太多的抱怨,跌倒了就不敢继续往前走,为什么人要这么的脆弱堕落,请你打开电视看看
    </p>
    <!-- 段落文本 -->

（3）ul li标签（无序列表）

    <ul>
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
    </ul>
    <!-- 无序列表 -->

（4）ol li标签（有序列表）

    <ol>
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
    </ol>
    <!-- 有序列表 -->

（5）pre标签（展示文本中原有的格式）

    <p>
        <pre>
      对这个世界如果你有太多的抱怨,         跌倒了就不敢继续往前走,为什么人要这么的脆弱堕落,请你打开电视看看
        </pre>
    </p>

效果图：

image.png

（6）strong 标签（强调文本）

<p>我要<strong>好好学习，天天向上！</strong></p>

效果图如下：

image.png