HTML基础知识点笔记

Posted 过往将来

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML基础知识点笔记相关的知识，希望对你有一定的参考价值。

文章目录

html 简介：

  1. HTML:即超文本标记语言,全名为 HyperText Markup Language ,是一种用于创建网页的标准标记语言。
  2. 可以使用 HTML 建立自己的 WEB站点 ，运行于浏览器之上，由浏览器进行解析
  3. 对于中文网页需要使用 声明编码，否则会出现乱码，有些浏览器(如360浏览器)会设置GBK为编码，这时候需要设置 。
  4. HTML 不是一种编程语言，是一种标记语言，标记语言的实质就是一套标记标签(markup tag)
  5. HMTL 使用标记标签来描述网页，html 文档包含了html标签及文本内容，html 文档也成为web 页面

html 页面分析

    1.  <!DOCTYPE html> 声明为HTML5 文档
    2.  <html> 元素是HTML 页面的根元素
    3.  <head> 元素包含了文档的元 (meta) 数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
    4.  head 元素包含了所有的头部标签元素，在head 元素中，你可以插入脚本 script ，样式文件 css ,meta 信
    5. 可以在头部区域的元素标签为为 title ,style,meta,link,script,noscript,base
    6. <base> 标签，描述了基本的链接地址/链接目标，该标签作为 HTML 文档中所有的链接标签的默认链接
    7.  link 标签 定义了文档与外部资源之间的关系，link 标签通常用于链接到样式表
    8. style 标签 ：定义html 文档的样式文件引用地址，在 style 元素中，可以直接添加样式来渲染 html 文档
    9. meta 标签 描述了一些基本的元数据，meta 标签提供了元数据，元数据页不显示在页面上，但会被浏览器解析
    10. meta 标签通常可以用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据
    11. 元数据可以使用浏览器(如何显示内容和重新加载页面)，搜索引擎(关键词)，和其他web 服务
    12. script 标签用于加载脚本文件，javascript使html 页面具有更强的动态性和交互性
    13. script 既可以包含脚本语句，也可通过 src 属性指定外部脚本文件，JavaScript 最常用于图片操作，表单验证，以及内容动态更新
    14. noscript标签提供无法使用脚本时的替代内容，比如在浏览器被禁用脚本时，或者浏览器不支持客户端脚本时
    15.  noscript元素可包含普通html 页面的body 元素中能找到的所有元素， 只有在浏览器不支持脚本或者禁用脚本时，才会显示nocript元素中的内容
    16. <title> 元素包含了可见的页面内容， title 标签定义了不同文档的标签，title 在 HTML/XML 文档中是必须的
    17. title 元素定义了浏览器工具栏的标题，当网页添加到收藏夹时，显示在收藏夹中的标题，显示在搜索引擎结果页面的标题

HTML标签和元素

  1. HTML 标记标签通常称为 HTML标签 (HTML tag)，是由 尖括号 包围的关键词，
  2. 标签是成对出现的，第一个标签是开始标签，第二个标签是结束标签，开始和结束标签页被称为开放标签（起始标签，）和闭合标签
  3. HTML 标签和 HTML 元素通常都是描述相同的意思，但是严格来讲，一个HTML元素包含了开始标签和结束标签

web 浏览器

  1. Web浏览器是用于读取HTML文件，并将其作为网页显示。
  2. web浏览器并不是直接显示HTML标签页，但是可以使用标签来决定如何展示HTML页面的内容给用户
  3. 声明有助于浏览器中正确显示网页，网络上由很多不同的文件，如果能够正确声明HTML 的版本，使用了正确的声明有助于浏览器正确显示内容， 不区分大小写

html 元素语法

  1. HTML 元素以开始标签起始 + 元素内容 + 结束标签终止。
  2. 某些HTML元素具有空内容，空元素在开始标签中进行关闭，(以开始标签的结束而结束)，大多数html元素可拥有属性
  3. 大多数HTML元素可以嵌套(html 元素可以包含其他的HTML元素)HTML 文档由相互嵌套的 HTML 元素构成。

html 属性

  1. html 元素可以设置属性，属性可以在袁术中添加 附加信息，属性一般描述于 开始标签，属性总以名称/直对的形式出现 ，name = a
  2. 属性值应该始终被包括在引号内，双引号是最常用的，使用单引号也没有问题
  3. 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘John “ShotGun” Nelson’
  4. 属性和属性值对大小写不敏感，但是万维网联盟推荐使用小写属性

常用的html 属性

  1. class 为HTML 元素添加一个或多个类名(classname) 类名从样式文件引入
  2. id 定义元素的唯一标识
  3. style 规定元素的行内样式(inline style)
  4. title 描述了元素的额外信息(作为工具条使用)

html 标题和段落

  1. 标题(Heading) 是通过h1-h6 标签进行定义的，h1 最大 h6 最小，浏览器会自动的在标题的前后添加空行
    2.标题很重要，HTML标题只用于标题，不能为了生成粗体或大号的文本而使用标题
  2. 搜索引擎使用标题来为网页的结构和内容编制索引。因此，用户可以通过使用标题来快速浏览网页，所以，用标题呈现文档结构很重要
  3. HTML 段落 通过 p 标签定义的，浏览器会自动的在段落的前后添加空行，p 标签是块级元素
  4. HTML 在不产生一个新段落的情况下使用 br 标签进行换行，同时 br 标签是一个空的 html 元素，所以没有关闭标签

CSS三种引入方式

  1. CSS 是为了更好的渲染 html 元素引入的，CSS 是为了更好的渲染 html 元素引入的，
  2. 内联样式——在HTML元素中使用 style 属性
  3. 内部样式表——在html 文档头部 head 区域使用 style 元素 来包含CSS
  4. 外部引用——使用外部的CSS文件

html 图像标签

  1. 在html 中 ，图像由 img 标签定义，img 标签是一个空标签，级它只包含属性，并且没有闭合标签
  2. 在页面上显示图像，需要使用源属性 src (source) ，源属性的值就是图像大多URL 地址<img src="url" alt="some_text">
  3. alt 属性 用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。

html 表格和常见的表格定义标签

  1. 表格由 table 标签来定义，每个表格均有若干行，由 tr 标签定义
  2. 每行被分割为若干单元格 由 td 标签定义，td 指表格数据，即数据单元格内容，
  3. 数据单元格可以包含文本，图片，列表，段落，表单，水平线，表格等
  4. 表格和边框属性：如果不定义边框属性 border ，表格将不显示边框，
  5. 表格的表头使用 th 标签进行定义，大多数浏览器会把表头显示为粗体居中的文本
  6. table 定义表格，th 定义表格的表头 tr 定义表格的行， td 定义表格单元， caption 定义表格标题
  7. colgroup 定义表格列的组 ，col 定义用于表格列的属性，thead 定义表格的页眉， tbody 定义表格的主体 tfoot 定义表格的页脚
  8. 使用table 元素进行文档布局不是表格的正确用法，table 元素的作用是显示表格化的数据

html 支持有序，无序和自定义列表

  1. 无序列表是一个项目的列表，使用粗体圆点进行标记 ul 标签，
  2. 有序列表也是一个项目列表，使用数字进行标记，始于 ol 标签，每个列表始于 li 标签
  3. 自定义列表不仅是一列项目，而是项目及其注释的组合，自定义列表以 dl 标签开始。每个自定义列表以 dt 开始，每个自定义列表项的定义以 dd 开始

html 中的 div 和 span

  1. html 可以通过div 和 span 将元素组合起来
  2. html 块区元素：大部分html 元素被定义为 块级元素 或 内联元素,块级元素在浏览器显示时，通常会以新行来开始(结束),例如 h1,p,ul,table
  3. html 内联元素：内联元素在显示时，通常不会以新行开始,例如 b,td ,a,img
  4. div 元素是块级元素，没有特俗含义，它可用于组合其他html 元素的容器，浏览器在会在其前后显示折行
  5. div 和 css 一起使用，div 元素可用于对大的内容块设置样式属性
  6. div 元素的另一个常见的用途是文档布局，它取代了使用表格定义布局的老式方式
  7. span 元素没有特俗含义，是内联元素，可作为文本的容器，sapn 和 css 一起使用时，span 元素用于为部分文本设置样式属性

html 表单输入标签 input

  1. 表单使用表单标签 form 来设置，表单时一个包含表单元素的区域，表单元素允许用户在表单中输入内容，

常见的表单输入类型如下

  1. 输入元素 input 输入标签，输入类型时由类型属性(type)定义的：
  2. 文本域(textarea)：文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
  3. 密码字段：通过标签<input type="password"> 来定义:密码字段字符不会明文显示，而是以星号或圆点替代。
  4. 单选按钮（Radio Buttons）：<input type="radio"> 标签定义了表单单选框选项
  5. 复选按钮(checkboxes)：<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
  6. 提交按钮(submit Button) ：<input type="submit"> 定义了提交按钮.当用户点击确认按钮时，表单的内容会被传送到另一个文件，
  7. 表单的动作属性定义了目的文件的文件名，由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

html 统一资源定位器(Uniform Resource Locators)

  1. web浏览器通过url 从web服务器请求页面，网页地址的语法规则：
  2. 语法格式：scheme://host.domain:port/path/filename
  3. scheme 定义因特网服务的类型，最常见的类型时 http
  4. host 定义域主机(http 的默认主机是 www )
  5. domain 定义因特网域名 ，比如 baidu.comm
  6. port 定义主机上的端口号(http 的默认端口号是 80)
  7. path 定义服务器上的路径
  8. filename 定义文档/资源的名称

常见的url和scheme

  1. http 超文本传输协议,以http://开头的普通网页，不加密
  2. https 安全超文本传输协议 安全网页，加密所有的信息交换
  3. ftp 文件传输协议，用于将文件下载或上传至网站，
  4. file 计算机上的文件
  5. url 字符编码：url 只能使用 ascii 字符集来通过因特网进行发送，

以上是关于HTML基础知识点笔记的主要内容，如果未能解决你的问题，请参考以下文章

比较草率的Python基础知识笔记

[vscode]--HTML代码片段（基础版，reactvuejquery）

php学习笔记——基础知识

html基础知识复习笔记

HTML基础知识点笔记

前端基础（HTML，CSS，JavaScript）知识笔记，附：前端基础面试题！！