HTML入门笔记

MiaMou
300 阅读3分钟

1. HTML的诞生及发明者

HTML于1990年左右诞生，由英国计算机科学家Tim Berners-Lee发明。

Tim Berners-Lee当时自己写了第一个浏览器，写了第一个服务器，用自己写的浏览器访问了自己写的服务器，因此发明了万维网 WWW = URL + HTTP + HTML 。

万维网是基于互联网发明的网络，实现输入地址就能看到网页的功能，本质是信息共享。

2. HTML起手式

写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>

<!DOCTYPE html> 表示文档类型是html，因为还有其他文档类型如xhtml
<html lang="en"> html标签，根标签。lang属性表示文档的语言是英语，lang是language我们可以将en改成zh-CN，表示语言是中文
<meta charset="UTF-8"> meta标签，charset属性值是UTF-8，表示文件的字符编码是全球编码，尽量不要使用GBK，它只支持中文等亚洲编码，可能会产生乱码
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 此meta标签表示防止页面缩放，兼容手机
<title>Document</title> title标签，表示网页的标题是Document

3. 常用章节标签

标签列表

章节标签表示文章/书的层级。

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

代码展示

<body> 
    <header>顶部广告</header>

    <!-- div表示一个整体，作用划分，把main和aside看作一个整体 -->
    <div>
    <!-- 主要内容main -->
    <main>
    <h1>文章标题</h1>

    <section>
        <h2>第一章</h2>
        <p>这是一段话这是一段话这是一段话</p>

        <section>
            <h3>1.1 节</h3>
            <p>一段话</p>
        </section>
        
    </section>
    </main>

    <!-- 次要内容aside -->
    <aside>
        参考资料 1 2 3
    </aside>
    </div>

    <!-- &copy; 是版权标志 -->
    <footer> &copy; 饥人谷版权所有</footer>
</body>

4. 全局属性

所有标签都有的属性。

属性列表

  • class 对网页元素分类
  • contenteditable 可以让用户在网页上编辑对应标签的内容
  • hidden 隐藏标签
  • id id的全局唯一性没有保障，就算有两个重复的id，HTML也不会提示写错了；其次id属性的值不好命名，因此不到万不得已不要用id，class足够
  • style 设置内联样式，style优先级：JS > HTML > CSS
  • tabindex 用于网页tab切换网页元素
    • tabindex属性值可以是正数，不必是连续的
    • tabindex属性值可以是0，表示最后才被 tab 访问
    • tabindex属性值可以是-1，表示不可被 tab 访问
  • title 规定元素的额外信息（可在工具提示中显示），比如和样式结合解决单行文字溢出

代码展示

<head>
    <!-- 省略部分代码 -->
    <style>
        .middle{
            background: black;
            color: white;
        }
        .bordered {
            border: 10px solid green;
        }
        #xxx{
            border: 10px solid yellow;
            <!-- 下面三行是单行文字溢出解决 -->
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <!-- 省略部分代码 -->
    <header id="xxx" title="完整的内容" style="border: 10px solid yellow;">顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告顶部广告</header>
    <div class="middle bordered" contenteditable>
      <main>...</main>
      <aside>...</aside>
    </div>
</body>

5. CSS reset

HTML中有默认样式，可在开发者工具查看: Elements--style--user agent stylesheet。
但默认样式已经不符合我们的需求，所以要用CSS reset重写样式。

推荐样式：

  1. gist.github.com/FrankFang/d…
  2. copy大厂的代码
    • 进入大厂首页
    • Chrome开发者工具，找到类似代码
    • 复制到自己的项目
    • 命名为reset.css

6. 常用内容标签

标签列表

  • ol + li 有序列表
  • ul + li 无序列表
  • dl + dt + dd 描述列表
  • pre 可以产生多个空格
  • code 用来展示代码，可以和pre标签一起用
  • a 链接标签，*注意 target属性，其默认值是_self，表示在当前页面打开链接；若值为_blank，则在新窗口打开链接
  • hr 分割线，单标签
  • br 换行， 单标签
  • em 语气强调（默认斜体）
  • strong 内容强调（加粗）
  • quote 引用
  • blockquote 换行引用

代码展示

<!-- 部分代码 -->
            更新<a href="http://qq.com">内容</a>
            <hr>
            <h1>前端是什么</h1>
            
            <section>
                <!-- <h2>第一章：工作内容</h2> -->
                <h2>
                <!-- html默认多个连续的空格(缩进/回车)都只是一个空格, pre用来保留空格，回车 -->
                <pre>
            第一章：          工作内容
                </pre>
                </h2>
 
                <p>前端每天要做的事情有</p>
                <!-- unordered list -->
                <ul> 
                    <li>发邮件</li>
                    <li>写页面</li>
                    <li>吃饭</li>
                </ul>

                <!-- description list 描述列表 -->
                我的同事们有
                <dl>
                    <dt>Jennifer</dt>
                    <dd>大美女</dd>
                </dl>

                我会写 JavaScript, 如下
                <pre>
                <code>
    var a = 1
    console.log(a)
                </code>
                </pre>

                <p>
                    我们<em>期末考试</em>重点是<strong>JavaScript</strong>           
                </p>
avatar
文章
阅读
粉丝