HTML常用标签 零基础学前端---复习大纲

前端大纲(一)纯干货！HTML常用标签总结大纲

学了7天，码了7天，手废党也能看懂！！
手废第一篇：第一章 前端大纲（一） HTML常用标签

---

提示：你的三连是作者输出下去的动力哦！！真的真的！！！（小声哔哔：赶紧收藏！！内容持续更新中。。。）

---

前言

这篇为前端HTML标签总结大纲，就算你是学习后端开发的同学，但作为一个程序猿，只懂后端不懂前端怎么能行呢，为此特地呕心沥血的肝出此文！

• 哈哈哈哈废话不多说，以下是我学习前端的一些心得笔记，全是干货，感谢各位大佬，小伙伴的支持。希望对各位有所帮助，话不多说直接上干货！！

不懂的问题欢迎下方评论区留言哦，一定一定尽量回答

一、思维导图

二、标签大纲

< html >

html 元素是 HTML 页面的根元素

< head >

head 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8

• < title >

  title 元素定义文档的标题

• < charset >

  charset 属性规定在外部脚本文件中使用的字符编码。

• < style >

  规定元素的行内 CSS 样式。

< body >

body 之间的文本是可见的页面内容，定义了 HTML 文档的主体

• 文本

  • < h1 > to < h6 >

    h1 - h6 标签之间的文本被显示为标题，层级逐级递减

  • < p >

    p 元素定义了 HTML 文档中的一个段落

  • < address >

    address 标签定义文档或文章的作者/拥有者的联系信息。

    如果 address 元素位于 body 元素内，则它表示文档联系信息。

    如果 < address > 元素位于 < article > 元素内，则它表示文章的联系信息。

• 表单和输入

  • < table >

    table 元素定义 HTML 表格。

    • < tr >

      tr 元素定义表格行

    • < th >

      th 元素定义表头。

    • < td >

      td 元素定义表格单元。

  • < form >

    表单用于向服务器传输数据。

    < form > 标签用于为用户输入创建 HTML 表单，form 元素是块级元素，其前后会产生折行。

    表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

    • action

      规定当提交表单时向何处发送表单数据，值为地址。

    • target

    规定在何处打开 action URL。

  • < input >

    定义输入控件，用于搜集用户信息。

    • 输入显示

      • type

        规定 input 元素的类型

        • button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
        • checkbox 定义复选框。
        • file 定义输入字段和 "浏览"按钮，供文件上传。
        • hidden 定义隐藏的输入字段。
        • image 定义图像形式的提交按钮。
        • password 定义密码字段。该字段中的字符被掩码。
        • radio 定义单选按钮。
        • reset 定义重置按钮。重置按钮会清除表单中的所有数据。
        • submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
        • text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

      • list

        引用包含输入字段的预定义选项的 datalist 。

    • 输入限制

      验证的时候需要添加form表单域

      • email 限制用户输入必须为Email类型
      • url 限制用户输入必须为URL类型
      • date 限制用户输入必须为日期类型
      • time 限制用户输入必须为时间类型
      • month 限制用户输入必须为月类型
      • number 限制用户输入必须为数字类型
      • tel 限制用户输入必须为手机号码类型
      • search 搜索框，显示搜索类型
      • color 生成一个颜色选择表单
      • required 其内容不能为空，必填

  • < textarea >

    定义多行的文本输入控件。

  • < select >

    定义选择列表（下拉列表）。

    • < option >

      定义选择列表中的选项。

  • datalist
    定义下拉列表，使用 input 元素的 list 属性来绑定 datalist。
    
    < datalist > 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
    
    datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

  • option

• 链接

  • < a >

    HTML 链接是通过 a 标签进行定义的

    • href

      在 href 属性中指定链接的地址

    • target

      规定在何处打开目标 URL。仅在 href 属性存在时使用。

      • _self：默认，当前页面跳转。
      • _blank：新窗口打开。
      • _parent：在父窗口中打开链接。
      • _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

  • < link >

    标签定义文档与外部资源的关系，例如建立HTML和CSS的链接。

• 列表

  • < ul >

    定义无序列表。

    • < li >

      定义列表的项目。

  • < ol >

    定义有序列表。

    • < li >

• 图像/音频/视频

  • < img >

    定义图像

    • src

      规定显示图像的 URL(路径)。

    • alt

      规定图像的替代文本。

  • < audio >

    定义声音内容。

    • autoplay 音频就绪后马上播放

  • < video >

    < video > 标签定义视频，比如电影片段或其他视频流。

    • autoplay 视频就绪自动播放
    • loop 循环播放
    • control 向用户显示播放控件
    • src 视频url地址

  • < source >
    
    定义媒介，路径。

  • < track >

    track 标签为诸如 video 元素之类的媒介规定外部文本轨道。

    用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

空元素

空元素是在开始标签中关闭的

<!doctype>

定义文档型，对大小写不敏感。

声明必须是 HTML 文档的第一行，位于 html 标签之前。 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

定义注释

< br >

在 HTML 中，br 标签没有结束标签。

在 XHTML 中，br 标签必须被正确地关闭，比如这样：< br/ >。

< hr >

定义水平线

属性

常用通用属性

• id

  规定元素的唯一 id。

• class

  规定元素的一个或多个类名（引用样式表中的类）。

• lang

  规定元素内容的语言。
  英文：lang=“en”
  中文：lang=“zh-CN”

• value

  为 input 元素的与预定值

• src

  src 属性规定外部脚本文件的 URL

文本

• b

  定义粗体文本

• em

  把文本定义为强调的内容，为斜体字。

• strong

  把文本定义为语气更强的强调的内容，通常是用加粗的字体（相对于斜体）来显示其中的内容。

• i

  定义斜体文本

• u

  定义下划线文本

• cite

  定义引用。

  标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

  按照惯例，引用的文本将以斜体显示。

语义化标签

< header > 头部标签

< nav > 导航标签

< article > 内容标签

< section > 定义某个区域

< aside > 侧边栏标签

< footer > 尾部标签

补充

以上只是开发中比较常用的标签，欢迎大家补充，若后面还有需要添加的元素，博主后续进行更新。注：标签符默认隐藏。

终于码完了！！！【哭!】

• 都康到这里了，感谢各位三连！！！【康康我，康康我】

大佬：就这啊？
我：就这了【哭!】

后面还会持续更新，欢迎下方评论区留言，下期见！！！
下期内容：
CSS样式表大纲

作者：琉璃Diaspora