HTML基础知识学习笔记

摘要

$\quad$ 每次写文档的时候，总是有一些文章的布局想法想去实现，但是碍于自己知之甚少，所以基本上要么是效果打折，或者是用重复啰嗦的简单语句去实现。在学完HTML基础知识之后，感觉最大的收获还是在于学到了更多设计页面的技巧与方法，同时，也了解了网页后面的一些标签知识。

1. 基本概念

1.1 HTML有两个含义

最新版的HTML语言，包含旧标签和32个新标签
HTML以及CSS3

1.2 HTML5技术合集

新标签、新属性
新的通信技术：WebSockets、WebRTC等
离线存储技术：LocalStorage、断网检测
多媒体技术：视频、音频
图像技术：Canvas，SVG，WebGL
Web增强技术：History API、全屏
设备相关技术：摄像头、触摸屏
新的样式技术：CSS3新的Flex，Grid的布局方式

1.3 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-文档类型，常见的有HTML1.0~2.0、HTML3、HTML4、HTML4.0.1、XHTML1.0 HTML5
html lang="en"-页面的语言类型 en-English / zh-CN中文
<head>-配置基本信息，里面写看不见的内容
<meta charset="UTF-8" /> 字符集采用UTF-8(支持全部的语言)
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 防止页面缩放
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> -如果当前页面在IE浏览器中生成，请使用最新版本的IE浏览器
<title>Document</title>网页的标题

2. HTML标签

2.1 章节标签-表示文章的层级：

<h1~h6> -标题
<header>-页面顶部的内容
<footer>-页面底部的内容
<section>-章节
<p> -段落
<main> -主干
<aside> -旁支
<div>-划分

2.2 全局属性-所有标签都有的属性：

class -给代码块用class=xxx做一个标记
.XXX -选中所有的类名为XXX的代码块，或者使用[class=XXX]，后者的不便之处在于类名必须与XXX完全一致，用.XXX可以匹配关键字中被空格分隔的一部分。
contenteditable-带这个标签的元素可以被用户编辑。
hidden -隐藏标签
id-与class类似，但是原则上id是唯一的，class是不唯一的。但是由于id重复也不会报错，所以尽量不用id。另外，在JS中可以直接使用id名称修改元素h.style.border = "10px solid green";但是，id的名称不能是关键字(在console中windows.中出现的名称都不能用)
style -html的属性，优先级高于<head>标签，但是JS又高于style。
例如：
1.#h{ border:10px solid red; } -在head中
2.<header id="h" style="border:10px solid green;" >-在body的header中
3.h.style.border="10px solid black";-在JS中
最终效果是黑色。
tabindex -控制使用tab响应的顺序，注意0是最后一个，-1是无法选择到此处。
title-对于超出页面部分需要用省略号的情况：可以现在h标签的属性中设置：

 #h{
       white-space: nowrap;//不换行
       text-overflow: ellipsis;//溢出部分用省略号表示
       overflow: hidden;//溢出就省略
     }

接着在标签中声明title： <header id="h" tabindex=1 title="这是省略部分的全部内容">顶部链接顶部链接顶部链接顶部链接顶部链接顶部链接顶部链接顶部链接顶部链接顶部链接顶部链接</header>即可实现效果。

2.3 默认样式

$\quad$ 由于HTML刚出现的时候还没有CSS，所以在HTML中提供了默认样式用于区分页面元素。页面中鼠标右键即可看到： $\quad$ 但是由于这种默认样式一般不符合页面美观的需求，所以需要使用CSS Reset覆盖浏览器的默认样式。
$\quad$ 推荐默认格式：

 *{margin: 0;padding:0;box-sizing:boder-box;}-清除内外边距，并变成盒模型
    *::after,*::before{box-sizing:boder-box;}
    h1,h2,h3,h4,h5,h6{font-weight:normal}-h1~h6标题不加粗
    h1{font-size:48px;}
    h2{font-size:36px}
    a{color:inherit;text-decoration:none;boder-bottom:1px solid;}-a标签的颜色继承当前文字的颜色，去除下划线,用文字边框代替
    ul,ol{list-style:none}-去除默认样式
     table{-表格的各个元素之间没有空隙
      border-collapse:collapse;
      border-spacing:0
    }

2.4 内容标签

ol+li -有顺序的列表
ul+li -沒有順序的列表
dl+dt+dd-描述性的列表 dt-元素 dd-描述元素的语句
pre-保留空格，回车，Tab。由于在HTML中，多个连续的空白会缩成一个空格，而在pre标签中，这些空白都会保留。
code-代码片段
hr-分割线
br-回车
a-链接 target="_black"-在新窗口中打开，比如：
<a href="http://www.iciba.com/" target="_black">金山词霸</a>
href-hyper reference超链接
em-表示强调
strong-加粗
quote-引用
blockquote-换行引用

2.5 打开HTML页面

不要使用双击.html文件打开页面，否则会导致根目录路径会错误。
使用npm install npm -g命令安装npm，-g表示安装成全局的，可以在任意目录使用。使用 npm -v命令，查看是否安装成功。
使用npm i -g node-w3c-validator命令安装代码检查工具。
使用npm install http-server -g命令安装http服务器，并且在所需启动的html页面的同路径中使用hs . -c-1 选择一个地址，在网页地址中输入文件名http://192.168.56.1:8080/index.html即可打开当前路径中名为index.html页面。示例：访问页面：

使用命令npm install -g yarn安装yarn(npm包管理工具)
注意：如果安装过程中已经打开了VS Code，那么需要重启才能看到npm -v命令...
或者使用npm i -g parcel-bundler命令安装parcel(web应用打包工具) 在yarn中加入yarn global add parcel，接着使用命令parcel index.html获得地址后，即可实现与前面相同的效果。示例: 打开网页：

2.6 a标签href的取值

网址:

http://...
https://...
//...(无协议的网址)

* 路径:

/a/b/c以及a/b/c(`/`开头表示从根目录开始)
index.html以及.index.html

* 伪协议

javascript:;实现点击什么都不做(注意与href="#"区分)
mailto:邮箱
tel:手机号
tel:class的名字

2.7 target 标签的取值

target="_blank"-空白页面
target="_self"-默认值
target="_top"-最顶层的页面(页面中存在两个窗口的情况，比如使用iframe标签引入了其他页面)
target="_parent"-父亲窗口中打开
target="xxx"-如果页面中存在名为xxx的窗口则用该窗口打开，否则新建一个名为xxx的窗口
同时target还可以指向页面中的iframe，例如:

2.8 table 标签的取值

只有<thead>,<tbody>以及<tfoot>(顺序不唯一)
<tr> - table row table中的一行
<th> - table head cell表头单元格
<td> - table data cell表格单元数据
table layout -表的样式
1. auto-自动计算间距
2. fixed-根据设定的值，固定宽度
3. 其他的不做了解
设置表格边框

简单情况下：

<table>
        <thead>
          <tr>
            <th>拼写</th>
            <th>翻译</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>tr</td>
            <td>table row - 表中的一列</td>
          </tr>
        </tbody>
        <tfoot>
        </tfoot>
</table>

样式：

添加更多属性：

table {
        width: 800px;//设置宽度
        table-layout: fixed;//固定宽度
        border-collapse: collapse;//合并单元格之间的空隙
        border-spacing: 0;//设置空隙为0
      }
      td,
      th {
        border: 1px solid rgb(0, 17, 255);
      }

效果：

2.9 img标签

作用：发出http get请求,显示一张图片
属性：
1. alt -当href标签后的请求加载不到时，显示alt中的内容。
2. height,width-设置高度，宽度，不用写单位默认是以px为单位
3. 谨记：永远不要让图片变形!
监听事件：onload,onerror

<div>
      <img id="xxx" src="/badgetway.png" alt="图片加载失败" />
      <script>
        xxx.onload = function() {
          console.log("图片加载成功");
        };
        xxx.onerr = function() {
          console.log("图片加载失败");
          xxx.src = "/404.png";
        };
      </script>
    </div>

让图片适应手机页面：

<style>
      * {
        margin: 0;
        padding: 0;//内外边距设置为0
        box-sizing: border-box;
      }
      img {
        max-width: 100%;//最大宽度为100%
      }
</style>

2.10 form标签-表单标签

作用-发起http get或者post请求,然后刷新页面。
属性-
1. action-控制请求哪个页面
2. autocomplete-自动补全
3. method-GET/POST
4. target-应该提交到那个页面，与a标签中相同

 <div>
      <form action="https://xxx.xxx.com" method="GET">
        <input type="text" />
        <input type="submit" value="提交" />
      </form>
 </div>

效果如下：

autocomplete-自动填充 示例：

<div>
      <form action="/xxx" method="GET" autocomplete="on">
        <input name="username" type="text" />
        <input type="submit" value="提交"/>
        //使用<button type="submit">提交</button>可实现同样的效果
      </form>
 </div>

效果：

那么问题来了：
<input type="submit" value="提交"/>效果上同等于 <button type="submit">提交</button>那么二者区别在何处？
区别之处:
<button type="submit"> <img width="20" src="/badgetway.png" alt="图片加载失败" /> <strong>提交</strong> </button> button中可以添加其他标签。

2.11 常见input标签

<input type="color" />-颜色选择器

<input type="password" />-输入密码

radio-单选

选择性别(二者取相同的名字，这样可以确保不能被同时选择)

<input name="gender" type="radio" />男
<input name="gender" type="radio" />女

checkbox-多选 需要以name分组

        <input name="habbit" type="checkbox" />唱
        <input name="habbit" type="checkbox" />跳
        <input name="habbit" type="checkbox" />Rap
        <input name="habbit" type="checkbox" />篮球
        <hr />
        <input name="yuqian" type="checkbox" />抽烟
        <input name="yuqian" type="checkbox" />喝酒
        <input name="yuqian" type="checkbox" />烫头

file-上传文件
<input type="file" />-选择单个文件
<input type="file" multiple />-选择多个文件
hidden-用于隐藏某些内容

2.12 其他

textarea-多行文本
情况1：<textarea></textarea>

用户可以自由拖放文本框大小。
情况2：使用<textarea style="resize:none;width:80%;height:80px;"> 大家好，我是练习时长两年半的个人练习生...</textarea>可以固定大小。
select-从范围中选择

 <select>
          <option value=" ">-请选择-</option>
          <option value="1">星期一</option>
          <option value="2">星期二</option>
          <option value="3">星期三</option>
          <option value="4">星期四</option>
</select>

效果如下：

require-不能为空的选项

<input name="username" type="text" required />

注意事项：

一般不监听input的click事件
form中的input要有name
form里面要放一个type=submit才能出发submit事件
input标签一般都有onchange/onfoucs(鼠标焦点至此)/onblur(鼠标焦点离开)

3.HTML快捷键

Ctrl+Shift+L 格式化
Tab 自动补全

4.相关软件的安装

4.1 npm安装

$\quad$ npm是Node.js的包管理工具，安装Node.js就会自带npm。官网下载

一路确定就是，最好不要随便改安装路径，不然很有肯找不到。使用node-v确认安装成功。这时候虽然自带安装了npm，但是不是全局的(随便找个地方都能使用)，使用npm install npm -g设置npm为全局。

4.2 Yarn安装

$\quad$ Yarn与npm一样，是一个包管理器，优点在于比npm速度更快。使用命令npm install -g yarn安装Yarn。

4.3 node-w3c-validator代码检查工具安装

$\quad$ node-w3c-validator是HTML的一款代码检查工具，因为有时候VC Code的报错不是那么明显，所以需要使用一些其他工具检查代码错误。使用命令npm i -g node-w3c-validator安装该插件，或者使用yarn global add node-w3c-validator安装，使用node-w3c-validator --version查看是否安装成功。
$\quad$ 最后使用node-w3c-validator -i [文件名]，检查代码中的错误：

这部分内容前面也提到过。

5.参考资料

github.《Yarn安装与使用详细介绍》跳转至源文章
github.《npm 全面介绍》跳转至源文章
《node-w3c-validator官网》跳转至源文章