HTML入门笔记1

177 阅读3分钟

--HTML的前世今生--

HTML诞生于1990年前后,由Tim Berners-Lee发明,期间,他自己编写了第一个浏览器、第一个服务器,并且用自己的浏览器访问了自己写的服务器,同时发明了WWW、HTML、URL,这一系列开创性的举动让他赢得了图灵奖。随后,他创立了万维网联盟(W3C)并担任其主席。

我们需要区分几个概念:

  • W3C与W3School是不同的,后者是W3C的中国社区成员创立并维护,更多的适用于新手。
  • 万维网与互联网的区别在于,互联网早在万维网创立之前就已经存在,彼时互联网的概念大多存在于利用ip进行点对点的信息交流。而万维网则实现了域名与ip的融合发展。

--HTML的基础内容--

html的格式如下:

<!DOCTYPE html>                                                                 <!--文档类型-->
<html lang="zh-CN">                                                             <!-- 语言类型-->
<head>                          
    <meta charset="UTF-8">                                                      <!--文件的字符编码-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">       <!--表示适配手机,禁用缩放-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">                       <!--表示请将ie升级至最新内核-->
    <title>Document</title>                                                     <!--标题-->
</head>
<body>

</body>
</html>

charset 的编码方式需要与浏览器的编码方式一直,否则将会显示乱码。

常用的章节标签有:

  • h1 ~ h6

    一级标题到六级标题

  • section

    章节

  • article

    文章

  • p

    段落标签

  • header

    头部标签

  • footer

    脚部标签

  • main

    主要内容

  • aside

    旁支内容

  • div

    划分

全局属性

  • class

    class属性的值表示区分名称,一个标签可以有多个class属性值,中间需用空格隔开

  • contenteditable

    表示标签内容可编辑

  • hidden

    表示标签内容不可见

  • id

    不到万不得已不用id属性,因为不报错,如果有多个重复的id属性标签,css样式会在这几个标签公用,而js则会出错。

  • style

    样式属性

  • tabindex

    表示按下tab键时的访问顺序,当其值为-1表示永不访问该标签,当其值为0表示最后一个访问该标签,当其值为正整数n表示按下第n次访问该标签

  • title

    用来显示完整内容

常用的内容标签

  • ol + li

    顺序表。ol内不能含有li标签之外的任何子元素

  • ul + li

    无需表

  • dl + dt + dd

    描述列表格式如下

    <dl>
      <dt>被描述对象</dt>
      <dd>描述内容</dd>
    </dl>
    
  • pre

    完整保留标签内容与格式

  • hr

    分割线

  • a

    超链接

  • em

    表示语气上的强调,默认斜体

  • strong

    表示内容上的重要,默认加粗

  • code

    标签内为代码段,字体等宽

  • quote

    行内引用,默认内联

  • blockquote

    块引用


几点需要强调的部分

1. 标签style内的内容是默认不可见的,但是若将该标签放入body,并添加{display:block;}则style内容就会在网页内可见,可用于进行页面调试。
2. 如果同时在html、css与js中设置了相同的样式,优先级为js > style > css。
3. 谨记清除默认样式。
4. 在标签内内容间多个连续的空格、回车与tab键,实际在网页内显示为一个空格,如若需要显示,足需要在外面加上pre标签。