HTML入门笔记1

swzoobi
130 阅读6分钟

HTML的由来

在1990年左右，英国人_蒂姆·伯纳斯·李(Tim Berners-Lee) _发明了万维网(World Wide Web,WWW)，并发明了人类史上第一个浏览器和第一个服务器。万维网的出现解决了人们上网冲浪的需求，只要在浏览器的地址栏中输入url，通过http协议就可以请求到服务端上的html文件，再由客户的浏览器渲染显示html文件，形成客户可以看懂的页面。

可以说，WWW = url + http + html

HTML起手式

html是Hyper Text Markup Language的缩写，意思为超文本标记语言，下面是一段范例代码，也是一个html文件的起手式。

<!DOCTYPE html> 
<!-- !DOCTYPE 文档类型 告诉浏览器该文档为html文件，还支持svg xml等  -->
<html lang="en">
<!-- html标签 属性lang，即language。可以改成lange="zh-CN"，表示页面语言为中国中文 -->
<head>
  <meta charset="UTF-8" />
  <!-- charset 字符编码 默认写UTF-8，可以支持所有字符 
       如果想改成其他的，如GBK，需确保与文件设置的编写格式是一致的，否则会乱码  -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- viewport 页面视窗 这条代码用来兼容手机 
       width=device-width 页面与设备同宽  initial-scale=1.0 页面缩放值为1，即不缩放-->
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <!-- 这条指令表示在ie浏览器中使用最新edge内核 -->
  <title>Document</title>
  <!-- 网页标题 -->
</head>
<body>
  <!-- 网页内容 -->
</body>
</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>

常用章节标签

HTML的章节标签用来表示页面文章的层级关系，通常一篇文章会由各级标题、章节、段落等组成。同时为了代码的易读性，也可以根据网页的布局将代码放进对应的章节标签里。常见的章节标签有以下这些

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

下面是部分标签的演示

注：

  1. 章节标签的书写顺序，比如header-main-aside-footer的顺序写是为了代码的易读性，如果将这个顺序打乱，页面并不会报错，但改你代码的小伙伴可能会想打你
  2. 看页面可以发现h标签的字体会加大加粗，这是浏览器的默认样式，我们可以通过引入css文件或内联style等来修改这些样式

常见的内容标签

除了表示文章的层级，html还有一些表示内容的表现，列举如下

  • 有序列表 ol + li (ordered list + list item) 

    1. 内容1
    2. 内容2
    3. 内容3

  • 无序列表 ul + li (unordered lisst + list item)

    • 内容1
    • 内容2
    • 内容3

  • 描述列表 dl + dt + dd (description list + term + data)，在<dt>中放要描述的对象，在<dd>放描述的具体内容

    小明
    男的
    小红
    女的

  • pre

html会默认将文件中的多个空格缩写成一个，而放在<pre>中的文本内容到了页面上也会保留文本的格式，包括换行符和空格

  • hr

会在页面上画一条与屏幕等宽的分割线

  • br

break的缩写，表示换行

  • a

anchor(锚)的缩写，会生成一个超链接，链接跳转的内容由其href属性决定，详细内容我会在下篇文章中描述

<a href='xxx'>用户可以点击跳转的文字</a>
  • em

emphasis的缩写，表示语气上的强调，默认样式为斜体

  • strong

表示内容上的强调，默认样式为出题

  • code

用来显示代码，默认用等宽字体显示

  • q

表示文字为引用，默认样式为内联元素

  • blockquote

表示文字为引用，默认样式为块级元素

全局属性

先来看下面这个div标签

<div class='xxx' />

代码里面的class='xxx'是给这个div标签添上的属性，属性名是class，属性值是xxx

**全局属性就是所有标签都可以添加的属性，**全局属性有以下这些

  • class

class属性可以设置多个值，中间用空格隔开，添加了class属性的标签可以被css或js通过选择器选中。css中选择器的写法是.xxx ，或者[class='xxx']，意思是选中所有class为xxx的标签。

  • contenteditable 

这个单词比较长，可以分成content+edit+able，也就是内容+编辑+able后缀，可以编辑内容的意思。这个属性用来设置标签是否为可编辑，后面可以不用跟属性值，要写的话也只能是true和false这两个布尔值。加上这个属性的标签在页面上可以被用户直接编辑里面的文本内容，就像输入文本框那样。

  • hidden

用来设置该标签在页面上是否被显示，同样不需要加属性值。加上这个属性后，用户在页面上看不到该标签。实际上是浏览器为有这个属性的标签加上了display:none的样式，所以可以通过修改其style来让标签显示。

  • id

为标签设置id，作为其在全局页面的唯一标识，但是当html出现相同id时，浏览器渲染时并不会报错，css的id选择器也可以选中这两个标签，但如果使用js通过id来操作两个标签时，就会报错。可以说这个唯一标识并不具备强制性，所以不推荐使用。

不过当全局中该id唯一时，js可以通过id名直接找到该标签，执行修改样式或者添加事件等操作

/* JS代码片段 */
xx.style.color = 'red';
xx.onclick = function() {
    console.log('click');
}

另外就是浏览器本身有些内置对象，如location、document，起id要注意不要和这些大佬撞名（尽量不用id就是了！）

  • style

为标签设置样式，如果要设置多个样式中间用英文分号;隔开，在标签内设置的样式为行内样式，优先级要比外联样式和内联样式高

  • tabIndex

 在网页上，用户可以通过键盘上的tab按键与页面进行交互，tabIndex决定了该标签是否能通过tab键被用户选到以及被选中的顺序。

当tabIndex取值为大于0的正整数时，浏览器会按照数字大小来排序，数字越小，越先被选中。

当取值为0时，表示该元素是最后一个被选中的。

除了以上这两种情况，tabIndex取其他值都不会被选中，比如取值-1

**注：**我发现当取值正小数也可以被选中，比如0.1、0.2这些，但顺序很迷，还会影响到其他标签的tab交互，所以，为了不给自己和其他小伙伴挖坑，取正整数的值就可。

  • title

为标签设置title属性之后，页面上鼠标悬停到该标签时会显示title里设置的文字，一般应用于文字内容太长，需要隐藏部分内容的情况，比如掘金文章的旁栏目录，悬停到其中一个章节标题，就会显示完整的标题，这里就应用到了title属性。

结语

html作为前端的三大基础之一，看似容易，但要是抠起细节还是有很多可以研究的地方。学无止境，加油。

avatar
文章
阅读
粉丝