wangjie-fourth 的个人博客

记录精彩的程序人生

目录
HTML学习笔记01
/    

HTML学习笔记01

HTML的历史

HTMLTime Berners-Lee1990年发明的。这位老爷子在2004年获取英国女皇为他颁发的大英帝国爵级司令勋章,在2016年,获得了图灵奖。

这位老爷子,不仅仅发明了HTML,更是定义了一整套现在人们网页使用的流程,发明了WWWHTTPURL。老爷子在发现自己制定的一套约定有很大的发展空间,需要花费自己更多的精力维护时,辞退自己原本工作,创办了W3C组织,用于指定一系列的规则。

默认样式

一、默认样式的历史

老爷早期也就发明了HTML,也就是说那个时候CSS并没有发明出来。他只定义几个HTML标签,然后游览器在识别这些标签的时候,会根据约定为其附上默认样式

现在,我们仍然可以看到这些默认样式。我们可以通过开发者工具Elements -> Styles -> user agent stylesheet查看默认的样式 。
image.png

二、默认样式的缺点以及解决办法

这些默认样式有以下不好的地方:

  • 不完全遵守后来的CSS语法
    由于这些默认样式,比CSS还早。所以部分语法不符合CSS语法,当然这也没啥事,毕竟只要游览器能看懂就行。这也引发出一个问题:是不是游览器的默认样式都是不一样的?
  • 默认样式太丑
    比如说table标签的默认样式,居然每格都不是连在一起。所以,一般在开发的时候,为了避免默认样式对我们后期写样式造成影响,我们会将默认样式去除掉。这个过程就叫做CSS Reset。下面是一个CSS Reset的示例代码:
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

这个故事也告诉我们,在写前端样式,发现自己样式总是不对的时候,就有可能是标签的默认样式在捣乱。

三、自己对HTML的理解

这里要说说自己对HTML的看法。它完完全全就是个约定。

果然计算机就是个老实人,傻乎乎的在意我们之间的约定

其实后面学习标签的时候,你就能理解到,那些标签的默认样式其实很丑。后期,都是自己再去重新写样式代码。所以你不用在乎emstrong在代码上的区别,只要知道在约定上:

  • em:表示在语气上强调;
  • strong:在内容上强调;

至于它的样式?不用很在意它,因为很丑,你迟早都会覆盖它的。你只要记住你与HTML的约定。不过话说回来,好像人类与计算机之间的交流,都靠约定???

语法与标签的学习

一、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="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
</html>
  • <!DOCTYPE html>:表示了这个文档得文档类型;
  • <html lang="en">:表示这个使用得语言,通过我们改成zh-CN
  • <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游览器使用最新版内核解析该文件

二、章节标签

通常来说,一个网页就是表示一篇文章。下面得标签可以理解成体现一个文章得结构,其实就是帮助计算机理解文章得结构。

  • 头部:header
  • 标题:h1~h6
  • 章节:section
  • 段落:p
  • 脚部:footer
  • 主要内容:main
  • 旁支内容:aside
  • 划分:div
  • 文章:article
    image.png
    div通常用来将几个标签作为一个整体括起来

三、通用属性

下面得属性是所有标签都有得属性。

  • class
  • contenteditable
  • hidden
  • id
  • tabindex
  • title

class

用于将标签分类,方便做统一得事情,比如设置样式。不同标签得class可以重复;
注意:
1、class有俩个值得时候,代表一个整体;
比如下面divclassmiddle bordered;不能理解成,这个divclass既是middle,又是bordered

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

2、与style标签使用时
(1)有俩个class值时,需要都写上才能定位

<head>
    <style>
      [class="middle bordered"] {
        background-color: black;
        color: white;
      }
    </style>
</head>
<body>
    <div class="middle bordered">
    </div>
</body>

(2)只要标签含有这个class,就应用样式

<head>
    <style>
      .middle {
        background-color: black;
        color: white;
      }
    </style>
</head>
<body>
    <div class="middle bordered">
    </div>
</body>

contenteditable

使这个标签变得可以编辑;
1、应用
style标签显示,调试
image.png

hidden

使这个标签隐藏;

id

标签得唯一标识;
1、注意
(1)尽量不要使用这个属性,使用class属性代替

  • HTML不会检查这id得唯一性;
    所以即使你如果有重复,html也不会报错;后期出现错误,难以定位这个错误;

2、用处
(1)与css结合使用

# id {

}

表示idxxx得标签,将会应用这个样式

(2)与js结合使用

xxx.style.border = '1px solid green'

可以直接写标签得id,就可以获取这个标签;

  • 但这对id值有限制,不能取保留字;即window下面得所有属性都不行;不推荐使用这种方式获取元素

style

用于定义该标签得css样式;优先级比css样式高;

js如果定义css样式,那么js中得优先级最高;

tabindex

用于定义键盘中点击tab键,光标得移动位置

  • 当值为正数时,不必是连续的;
  • 当值为0时,表示最后才被 tab 访问
  • 当值为-1时,tab键永远都不会选中这个标签

title

表示这个标签文字过多,并且将其设置下面得css;即表示多余得内容用省略号代替。当你鼠标选中省略号,将会展示这个标签得title值;

<head>
    <style>
      p {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    </style>
</head>
<body>
    <p title="显示这个标签得所有内容">
这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话
    </p>
</body>

四、内容标签

  • ol + li
  • ul + li
  • dl + dt + dd
  • pre
  • hr
  • br
  • a
  • em
  • strong
  • code
  • quote
  • blockquote

列表标签

ol + li:【有序列表】

ol:order list
li:list item

ul + li:【无序列表】

没有顺序的列表
ul:unorder list

dl + dt + dl:【描述列表】

dl:description list
dt:description term
dd:description data

pre

html在语法上有一个约定:默认情况下,tab、多个空格、换行都会被解析成一个空格。但有的时候,你又希望自己写的格式保留。这时候就可以使用pre标签。
image.png
效果:
image.png

code

用于展示代码的标签。等宽的样式
image.png
效果如下:
image.png

hr

分割线

br

换行

a

超链接标签

  • href
  • target_blank新打开

强调标签

em

用于在语气上强调某些字段。
默认样式很难看,基本都会重写

strong

用于在内容上强调某些字段。

quote

表示该标签的内容是引用的。

评论