HTML基础 | 青训营笔记

77 阅读3分钟

HTML基础 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第一天

一、什么是 HTML

HTML称为超文本标记语言,是一种标识性的语言。 它包括一系列标签.通过这些标签可以将网络上的文档格式统一, 使分散的Internet资源连接为一个逻辑整体。 HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字, 图形、动画、声音、表格、链接等。

二、元素与标签

image.png

大多数元素由开始标签(Opening tag)、Content、和结束标签(Closing tag)组成。
存在一小部分元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。
  • 双标签

    • p、H1-H6、em、string ...
  • 单标签(也称为空标签,空标签可以不闭合)

    • img、br、hr、input、meta ...
元素也可以拥有属性,属性包含元素的额外信息,这些信息不会出现在实际的内容中。

image.png

三、HTML的基本结构

整个 html文档 的根标签为 html,根标签包含 head 标签body 标签

head 头部标签。用于定义HTML文档的头部信息

body 主体标签,用于定义网页的主要显示的内容,文本图片音频视频等。

DOM树

dom.svg

四、HTML 标签

  • 基本标签
    • 段落标签 p
    • 标题标签 h1~h6
    • 换行 br
    • 水平线 hr
    • 右上角 sup
    • 右下角 sub
    • 斜体 i / em
    • 粗体 b / strong
    • 删除字 del
    • 插入字 ins
    • 字体标签 font
    • 预留格式 pre
  • 实体符号
    • 大于号 >
    • 小于号 <
    • 空格  
  • 背景色 / 背景图片
    • 背景色 bgcolor
    • 背景图片 background
  • 图片
    • width 设置宽度,height 设置高度
    • src 设置路径
    • title 鼠标悬停时的提示信息
    • targe 点击跳转方式
    • alt 设置图片加载失败时的提示信息
  • 表格
    • 一个 table 就是一整个个表格
    • 行 tr、单元格 td
    • th 也是单元格,但是比 td 多了加粗和居中
    • table 可以设置宽高,边框
    • 合并单元格
      • colspan
      • rowspan
    • thead、tbody、tfoot
  • 超链接
    • herf
    • target
    • 通过超链接可以从浏览器向服务器发出请求
  • 列表
    • 有序列表 ul
    • 无序列表 ol
    • 自定义列表 dl
  • 表单
    • action 指定数据提交到哪个服务器
    • 凡是表单中含有 name 属性的一律会被提交到服务器
    • 输入框
      • 文本框 text
      • 密码框 password
      • 提交按钮 submit
      • 普通按钮 button
      • 复选框 checkbox / 单选框 radio
      • 文件上传 file
    • 下拉列表
      • selected 默认选择
      • size 显示数量
      • mutiple 设置下拉列表支持多选
    • 文本域
      • 文本域没有value属性,用户填写的内容就是value
  • 语义化标签

语义化标签,就是让标签有自己的含义,利用本身传达它所包含内容的一些信息,使浏览器和搜索引擎直观的认识标签和属性的用途和作用。 12a7eec23926df18.svg

五、小知识

1、DOCTYPE的作用

DOCTYPE是文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的模式来渲染文档。它必须声明在HTML⽂档的第⼀⾏。

2、src 和 herf的区别

src 用于替换当前元素,href 用于在当前文档和引用资源之间确立联系。