html学习笔记(自用版)

HTML学习笔记

  • 基础知识
  • 常见报错

基础知识

  1. 工具:vscode

  2. web标准的构成html学习笔记(自用版)_第1张图片

  3. html页面固定结构
    在vscode中输入!+TAB或者!+回车可以快速得到固定结构。
    html学习笔记(自用版)_第2张图片

  4. 放在该行 ctrl+/为注释 双击可取消注释,也可以实现批量注释。复制粘贴也只需放在该行 ctrl+c 、ctrl+v。ctrl+s 保存。tab加空格 shift+tab删空格。

  5. 有开始有结束有要包裹的内容用双标签,否则用单标签。标签间的关系有html学习笔记(自用版)_第3张图片

  6. ctrl+d 实现快速更改标题号 此时要选中序号 否则会将h选入
    html学习笔记(自用版)_第4张图片

  7. 段落标签p 输入p直接TAB/回车 可以生成对应双标签
    段落太长可在顶部的查看中选择自动换行
    多个段落 可以p*n

  8. 换行单标签br 水平分割线单标签hr
    html学习笔记(自用版)_第5张图片

  9. 图片标签 img+tab/回车 可自动生成
    在这里插入图片描述
    html学习笔记(自用版)_第6张图片

src = source alt是图片加载失败时的替换文本
title是鼠标悬停时显示的文本 width宽度height高度
如果只设置width和height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形);如果同时设置两个,当比例设置不当时,图片可能会变形。

  1. 相对路径更灵活
    显示当前文件所有东西—>./ 进入文件夹—>/ 到上一级目录—>…/
    同级目录html学习笔记(自用版)_第7张图片
    下级目录(文件夹名字/直接写目标文件名字)
    在这里插入图片描述
    上级目录
    …/目标文件

  2. 音频标签
    html学习笔记(自用版)_第8张图片

  3. 视频标签
    html学习笔记(自用版)_第9张图片

  4. 链接标签 / a标签
    href(hyperlink reference)超链接引用
    a+Tab/回车 即可显示超链接完整标签
    空链接使用 href=“#”
    在这里插入图片描述
    html学习笔记(自用版)_第10张图片

  5. 列表标签
    无序列表
    html学习笔记(自用版)_第11张图片

    有序列表
    

html学习笔记(自用版)_第12张图片

	 自定义列表

html学习笔记(自用版)_第13张图片

  1. 表格标签
    html学习笔记(自用版)_第14张图片
    html学习笔记(自用版)_第15张图片
    例如(注意区分标签与属性)
    在这里插入图片描述
    表格的结构标签
    html学习笔记(自用版)_第16张图片
    html学习笔记(自用版)_第17张图片
    html学习笔记(自用版)_第18张图片
    在这里插入图片描述

  2. 表单标签(input和button)
    html学习笔记(自用版)_第19张图片
    例如
    在这里插入图片描述
    html学习笔记(自用版)_第20张图片
    html学习笔记(自用版)_第21张图片
    html学习笔记(自用版)_第22张图片
    html学习笔记(自用版)_第23张图片
    表单域(from标签为表单域 只有有表单域的时候submit和reset才可以使用 否则未指明使用区域)
    html学习笔记(自用版)_第24张图片
    加value值可以改变按钮中的字
    html学习笔记(自用版)_第25张图片
    html学习笔记(自用版)_第26张图片

  3. 表单标签
    html学习笔记(自用版)_第27张图片
    html学习笔记(自用版)_第28张图片

  4. 语义化标签
    html学习笔记(自用版)_第29张图片
    html学习笔记(自用版)_第30张图片

  5. 字符实体
    网页只认识一个空格 不认识多个空格
    不间断空格 Non-breaking Space
    选中一个区域直接往下拉可以快速复制一整段代码
    th*4+回车 可以快速复制4个th标签html学习笔记(自用版)_第31张图片

常见报错

1、lxml.etree.XMLSyntaxError:Opening and ending tag mismatch:meta line 4 and head, line 6, column 8
解决方法:在 在这里插入图片描述

你可能感兴趣的:(html5)