HTML入门笔记1

万维网 WWW & HTML 的发明

WWW 简述

  • WWW = URL + HTTP + HTML
  • WWW: World Wide Web，万维网
  • WWW 作为前缀是一个历史原因，现在进入网站，没有必要再加 WWW 作为前缀。

历史

  • 发明者：李爵士（Tim Berners-Lee）

    1. 奖项：

      • 2004年，被英女皇颁发大英帝国爵级司令勋章

      • 2017年，被颁发图灵奖

    2. 成就：

      • 自己写了第一个浏览器
      • 自己写了第一个服务器
      • 用自己写的浏览器访问了自己写的服务器
      • 发明了 WWW，同时发明了 HTML、HTTP 和 URL

  • 诞生时间：1990年诞生

  • 发明原因

    让每个人输入网址就能看到网页：上网冲浪

    • 当时世界上没有网址，李爵士就发明了 URL
    • 当时世界上没有网页，李爵士就发明了 HTML
    • 为了让这个系统更完善，李爵士就发明了 HTTP

HTML 起手式

起手示例

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

  1. <!DOCTYPE html>：文档类型，表示告诉浏览器开始写 HTML

  2. <html lang="en">：根标签，可以更改语言比如 "lang=zh-CN"

  3. <head>：一般写看不见的元素

    • <meta charset="UTF-8">

      文件的字符编码，一般写在最前面，推荐统一写 UTF-8，因为UTF-8 支持所有语言，GBK只支持一些亚洲的语言，如果写的编码与当前文件不同就会出现乱码

    • <meta name="viewport" content="width=device-width, initial-scale=1.0">

      禁用缩放，兼容手机

    • <meta http-equiv="X-UA-Compatible" content="id=edge">

      告诉IE使用最新内核

    • <title>Document</title>

      标题标签

  4. <body>：正文

  5. 注意，一般 <head> 和 <body> 不缩进

常用表章节标签初解

初解

  1. h1 到 h6，标题标签，表示内容框架，内容的层级
  2. section，章节标签
  3. article，表示文章
  4. p，表示一个段落
  5. header，头部标签
  6. footer，脚部标签
  7. main，主要内容
  8. aside，旁支内容
  9. div，块级元素，用来划分

示例

<body>
    <header>头部广告</header>
    <div>
        <main>
            <h1>文章标题</h1>
            
            <section>
                <h2>第一章</h2>
                <p>
                    一段话
                </p>
                <section>
                    <h3>1.1节</h3>
                    <p>
                        一段话
                    </p>
                    <h3>1.2节</h3>
                    <p>
                        一段话
                    </p>
                </section>
            </section>
        </main>
        <aside>
            参考资料 1 2 3
        </aside>
    </div>
    <footer>&copy; XXXX版权所有</footer>
</body>

全局属性初解

即所有标签都有的属性

  • class

    • 给标签分类/标记

    • 方便添加样式

    • 举例

      1. html代码

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

      2. CSS代码

        .middle{
    background: black;
    color: white;
}
.bordered{
    border: 10px solid red;
}

  • contenteditable

    • 表示元素是否可以被用户编辑

    • 举例 1

      <--! 该div的内容可以被用户编辑 -->
<div class="middle bordered" contenteditable></div>

    • 举例 2

      <--! 一个有用的调试例子，让style标签显示出来，并且能被编辑 -->
<body>
    <style contenteditable>
        style{display: block; border: 1px solid red}
    </style>
</body>

  • hidden

    • 可被用来隐藏一个页面元素，即有该属性的元素不会被显示

    • 举例

      <--! 该div的内容可以被用户编辑 -->
<div class="middle bordered" hidden></div>

  • id

    • 通俗说法：全页面唯一用 id，不然用 class

    • 实际情况：不到万不得已，我们不考虑用 id，因为 id 不报错，可以允许多个相同 id 的元素。

    • 举例

      1. html 代码

        <div id="xxx" hidden></div>

      2. CSS 代码

        #xxx{border: 10px solid red;}

    • JavaScript可以直接获取 id

      举例

      // 效果与上述CSS代码一样，注意 id 必须指向唯一
xxx.style.border = '1px solid red'

    • 忌讳：id 不能设置成和全局元素的属性（需要记忆）一样，新手慎用 id

  • style

    • 样式属性，优先级高于 CSS
    • 可以通过 JS 设置
    • JS设置 优先级 高于 style属性，高于 CSS

  • tabindex

    • 指定元素是否/在何处参与顺序键盘导航（一般用 Tab 按键）

    • 值

      • 负值（往往是 -1）：表示元素无法通过键盘导航访问到
      • tabindex="0"：往往表示最后一个被聚焦
      • 正值：越大越后被聚焦，相同则根据元素在当前DOM中的先后顺序决定

    • 举例

      <--! 最后被聚焦 -->
<div tabindex="200">1</div>
    
<--! 不参与导航 -->
<div tabindex="-1">2</div>

<--! 最先被聚焦 -->
<div tabindex="1">3</div>

<--! 最后被聚焦 -->    
<div tabindex="0">4</div>

<--! 被聚焦顺序：3 1 4 -->

  • title

    • 表示咨询信息文本，和它术语的属性相关，显示完整的内容，可与省略号一起使用。

    • 举例

      1. html 代码，title 属性显示完整的内容

        <header class="xxx" title="顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告">顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告</header>

      2. CSS 代码，显示不完的内容省略号效果

        .xxx{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

常用内容标签初解

  1. ol + li

    • ol：ordered list，有顺序的列表

    • li：list item，列表中的一项

    • ol 里面含有处 li 之外的子元素

    • 举例

      <ol>  
    <li>项目 1</li>
    <li>项目 2</li>
    <li>项目 3</li>
</ol>

  2. ul + li

    • ul：unordered list，没有顺序的列表
    • 其余同 ol + li

  3. dl + dt + dd

    • dl：description list，描述性 定义性列表

    • dt：descritption term，被描述的对象术语，只能作为 dl 元素的子元素出现，通常后面跟着 dd 元素

    • dd：用来指明 dl 元素中一个 术语的描述，该元素只能作为描述列表元素的子元素出现，而且必须跟着一个 dt 元素

    • 举例

      <dl>
    <dt>术语1</dt>
    <dd>术语1的描述</dd>
    <dt>术语2</dt>
    <dd>术语2的描述</dd>
</dl>

  4. pre

    • 在 HTML 中，多个空格回车或者tab，都只会缩进成一个空格

    • pre 的作用就是能保留多出来的空格

    • 表示一种预定义格式的文本，按照原文件中的编排，文本中的空白符都会显示出来

    • 举例

      <pre>
这里         的   空白符  不    会被缩进为一个
</pre>

  5. code

    • 呈现一段计算机代码，默认是以浏览器的的默认等宽字体显示

    • 举例

      <pre>
<code>
var a = 1
console.log(a)
</code>
</pre>

  6. hr

    • horizontal rule，表示水平分割线，段落级元素之间的主体转换

    • 举例

      <p>
    段落内容1
</p>

<hr>

<p>
    段落内容2
</p>

  1. br

    • break

    • 在文本中生成一个回车（换行符号）

  2. a

    • anchor，锚元素

    • 创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接

    • 重要属性举例：

      1. href 属性：超链接指向的 URL 或其片段
      2. target 属性：指定何处显示链接的资源内容

    • 举例

      请点击
<!-- 这里a标签指向一个外部链接并且在新窗口打开 -->
<a href="http://www.baidu.com" target="_blank">
    这里
</a>

  3. em

    • emphasis

    • 标记用户需要着重阅读的内容

    • 与 strong 的区别：

      • em：语气的强调
      • strong：本身内容的强调

    • 举例

      <p>
    我们<em>期中考试</em>重点是<strong>JavaScript</strong>
</p>

  4. q

    • quote

    • 表示一个短的行内（内联）引用的文本

    • 不要用换行符

    • 长文本（块级）引用，blockquote

    • 举例

      <p>
    XX说<q>我是一个内联的短引用文本</q>
    <br>
    XX又说
    <br>
    <blockquote>
        我是一个块级的 
        <br>
        长引用文本
    </blockquote>
</p>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML入门笔记1
    HTML简介 1.HTML是谁发明的？ 1990年左右，Tim Berners-Lee（蒂姆·伯纳斯·李）发明了万...
    饥人谷_韩博阅读 3,339评论 1赞 0
  • HTML入门笔记1
    今天笔者看完了饥人谷的HTML网课，对于其又有了全新的理解。今天笔者就来与大家分享一下。包括HTML的概述，历史以...
    郑馋师阅读 3,490评论 0赞 2
  • HTML入门笔记1
    HTML 是谁发明的 1990 年，由于对 Web 未来发展的远见，Tim Berners-Lee 提出了 超文本...
    星学家阅读 1,657评论 1赞 0
  • HTML入门笔记1
    HTML 是谁发明的 HTML 是 李爵士发明的 HTML 起手应该写什么 VSCode内新建 HTML 文件，输...
    zenyangcode阅读 1,137评论 0赞 0
  • HTML入门笔记1
    以下是初学html所作笔记，记录了一些常用的html标签，以备日后复习 HTML是谁发明的 HTML的首个公开描述...
    2b61575c37fd阅读 1,943评论 1赞 4