《HTML入门笔记1》

245 阅读3分钟

1.HTML 是谁发明的

以下内容引自百度。

HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。

2.HTML的起手式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>

</head>
<body>
content
</body>
</html>
  • 声明文档类型。
  • 使用根标签,确定出文档使用的语言为中国的中文,即zh-CN
  • <head>标签中为看不到的元素,可以通过设定其style{display: block}来看到。
  • <meta>标签中从上到下分别表示本文档支持UTF-8字符集、如果在IE浏览器中打开会自动更新IE浏览器到最新版本、页面不会缩放。
  • <title>标签中是该文档的名字。

之后可以在content处添加标签和内容,完善你的HTML之后可以在content处添加标签和内容,完善你的HTML文档。*

3.常用的表章节的标签

在上面代码的<body>标签中写入以下章节标签,通过它们可以看HTML文档的结构。

<body>
  <header> 我是顶部 </header>
  <div>
    <main>
      <h1> 我是一级标题 </h1>
      <section>
        <h2> 我是二级标题,我在第一个section。 </h2>
        <p>我是一段话我是一段话我是一段话重要的事情说三遍!</p>
        <section>
          <h3> 我是三级标题,我在第二个section。</h3>
          <p>我是一段话,从我到一级标题都是主要内容,都在main标签里面。</p>
        </section>
      </section>
    </main>
    <aside>
     我是旁支内容。
    </aside>
  </div>
  <footer>我是底部。header标签和footer标签之间是个整体,使用div标签包含他们。</footer>

  
</body>

各个标签的展示如下:


我是顶部

我是一级标题

我是二级标题,我在第一个section。

我是一段话我是一段话我是一段话重要的事情说三遍!

我是三级标题,我在第二个section。

我是一段话,从我到一级标题都是主要内容,都在main标签里面。

我是旁支内容。
我是底部。header标签和footer标签之间是个整体,使用div标签包含他们。

4.全局属性

  • class : 分类,给标签分类,可以加多个,在css中编辑其样式。
  • contenteditable : 内容可编辑,允许用户直接编辑该标签中的元素。
  • hidden : 将标签隐藏。
  • id : 与class类似,但不到万不得已不要用,浏览器中说是唯一但并不是;此外,id的值不能与window已经存在的全局属性重复。
  • style : 规定标签的样式,优先级大于css中规定的样式,但低于JS中规定的。
  • tabindex : 用户摁下tab选定元素的顺序,值越低,优先级越高,不必连续。值为-1时表示永远不被选中,值为0时表示最后一个被选中 。
  • title : 文字超长,页面上出现省略号时,鼠标悬浮显示的内容。

5.常用的内容标签及它们的含义

  • ol+li : ordered list + list items;
  • ul+li : unordered list + list items;
  • dl+dt+dd : description list;
  • pre : 预定义格式文本,文本中的space(空格)回车及tab均会保留,默认为内联样式;
  • hr : 分割线;
  • br : 换行;
  • a : anchor 锚点,属性有herf后跟链接,target确定新打开的页面是否在新页面中,若其参数为_blank则新开一个页面;
  • em : emphasize 强调,默认斜体,语气上的强调;
  • strong : 本质上的强调,默认加粗;
  • code : code标签包含的字默认等宽;
  • quote : 引用,默认是内联样式;
  • blockquote : 换行的引用。