前端html思维导图

计算机专业学生必看！下图为前端html的简单学习思维导图，梳理了与表单、视频、音频、表格、列表、基本标签相关的内容。本图旨在帮助同学们加强理解与记忆！

Html（hyper text markup language）超文本标记语言

• html是用来给其他文本添加语义且不被显示，但不是改变文本样式
• 表单form
  • 用于收集用户信息, 让用户填写、选择相关信息
  • 格式
    • <form> 所有的表单内容，都要写在form标签里面 </form>
  • 标签
    • input输入
      • 输入框
      • 属性
        • type
          • 输入类型
          • 值
            • text
              • 文本，明文输入框
              • <input type="text"/>
            • password
              • 密码，暗文输入框
              • <input type="password"/>
            • radio
              • 单选按钮输入（选择多个选择之一）
              • <input type="radio" name="xingbie" checked="checked" /> 男 <input type="radio" name="xingbie" /> 女
              • 单选按钮，天生是不互斥的，如果想互斥，必须要有相同的name属性，checked选定默认值
            • checkbox
              • 多选框,从众多选项中选择多个
              • <input type="checkbox" name="aihao" checked="checked"/> 篮球 <input type="checkbox" name="aihao"/> 足球
              • 复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name），checked选定默认值
            • button
              • 点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
              • <input type="button" value="点我丫" />
            • image
              • 定义图像形式的提交按钮
              • <input type="image" src="lnj.jpg" />
            • reset
              • 定义重置按钮。重置按钮会清除表单中的所有数据
              • <input type="reset" />
              • 这个按钮不需要写value自动就有“重置”文字 reset只对form表单中表单项有效果
            • submit
              • 提交按钮（提交表单）,提交按钮会把表单数据发送到action属性指定的页面
              • <input type="submit" />
              • 这个按钮不需要写value自动就有“提交”文字 要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性 默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输
            • hidden
              • 定义隐藏的输入字段，不显示收集数据
              • <input type="hidden">
            • color
              • 取色器
              • <input type="color">
            • date
              • 日期选择器
              • <input type="date">
            • email
              • 用于应该包含 e-mail 地址的输入域,在提交表单时，会自动验证 email 域的值。
              • <input type="email" name="user_email" />
            • url
              • 应该包含 URL 地址的输入域。自动验证
              • <input type="url" name="user_url" />
            • number
              • 数值
                • max,min.step最大，最小，间隔
              • <input type="number" name="points" min="1" max="10" />
        • value
          • 给输入框设置默认值,会显示给用户，提交给服务器的值
          • 自定义
            • <input type="text" value="123"/>
        • maxlength
          • 规定输入字段中的字符的最大长度
          • 值为数字
            • <input type="text" name="fullname" maxlength="8" />
    • label
      • 为 input 元素定义标注（标记）,不会向用户呈现任何特殊效果
      • 使用：关联文字和输入框 ,for和id
        • "for" 属性可把 label 绑定到另外一个元素。
        • 把 "for" 属性的值设置为相关元素的 id 属性的值。
        • <label for='account'>账号：</label> <input type='text' id='account'>
        • 当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
      • for
        • 绑定id
    • datalist
      • 给输入框绑定待选项
      • 格式
        • datalist> <option>待选项内容</option> </datalist>
      • 使用
        • 1.搞一个输入框 2.搞一个datalist列表 3.给datalist列表标签添加一个id 4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
        • 请输入你的车型: <input type="text" list="cars"> <datalist id="cars"> <option>奔驰</option> <option>宝马</option> </datalist>
      • id
        • 关联list
    • textarea
      • 多行文本框(文本域),用于在表单中定义多行的文本输入控件
      • 属性
        • cols
          • 表示columns“列”, 规定文本区内的可见宽度
        • rows
          • 表示rows“行”, 规定文本区内的可见行数
      • <textarea cols="30" rows="10">默认</textarea>
      • 可以通过cols和rows来指定输入框的宽度和高度 默认情况下输入框是可以手动拉伸的
    • select
      • 组标签. 用于创建表单中的待选列表, 可以从选择某一个带选项
      • 格式
        • <select> <optgroup label="北京市"> <option>海淀区</option> <option>朝阳区</option> </optgroup> <optgroup label="广州市"> <option>天河区</option> </optgroup> <option selected="selected">贵州</option> </select>
      • selected属性设置默认值
      • outgroup标签给下拉列表添加分组
  • 属性
    • action
      • 定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮。
      • <form action="action_page.php">或<form action="/im/register/" method="post">
      • 如果省略 action 属性，则 action 会被设置为当前页面。
    • method
      • 规定在提交表单时所用的 HTTP 方法（GET 或 POST）
      • <form action="action_page.php" method="GET">
      • 值
        • GET
          • 默认，如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。 当您使用 GET 时，表单数据在页面地址栏中是可见的：
          • GET 最适合少量数据的提交。浏览器会设定容量限制。
        • POST
          • 如果表单正在更新数据，或者包含敏感信息（例如密码）。
          • POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
  • name属性
    • 规定元素名称，通过元素名称(name)查找值（value）
    • 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
    • name属性相同保证互斥，在单选和多选时一致
  • value属性
    • 规定元素的预设值，可设置或返回选项的值，提交到服务器的值
    • checkbox和radio中必须设置 value 属性。
• 视频video
  • 播放视频
  • 格式
    • <video src=""> </video>
    • <video> <source src="" type=""></source> <source src="" type=""></source> </video>
      • 解决浏览器适配
    • <video src='' autoplay='autoplay' controls='controls' poster='url.jpg'></video>
  • 属性
    • src
      • 告诉video标签需要播放的视频地址
    • autoplay
      • 告诉video标签是否需要自动播放视频
    • controls
      • 告诉video标签是否需要显示控制条
    • poster
      • 告诉video标签视频没有播放之前显示的占位图片
    • loop
      • 告诉video标签循环播放视频. 一般用于做广告视频
    • preload
      • 告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
    • muted
      • 告诉video标签视频静音
    • width/height
      • 和img标签中的一模一样
• 音频audio
  • 播放音频
  • 类似video
    • 有3个属性不能用, height/width/poster
• 其他重要
  • details(详情)和summary(概要标签)
    • 利用summary标签来描述概要信息, 利用details标签来描述详情信息 默认情况下是折叠展示, 想看见详情必须点击
    • <details> <summary>概要信息</summary> 详情信息 </details>
  • marquee('跑马灯')
    • 文字滚动，跑马灯效果
    • <marquee>内容</marquee>
    • 属性
      • direction
        • 设置滚动方向 left/right/up/down
      • scrollamount
        • 设置滚动速度, 值越大就越快
      • loop
        • 设置滚动次数, 默认是-1, 也就是无限滚动
      • behavior
        • 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
  • html只负责语义
    • b、u、i、s带有样式, 有浓厚的样式作用, 今后一般都只作为CSS钩子使用
    • <strong>,<ins>,<em>,<del>替代，表示着重内容，新插入的文本(Inserted)，强调内容(Emphasized)，已删除的文本(Deleted)
  • html实体（特殊字符）
    • html中对空格，缩进，换行不敏感，如果同时出现多个空格缩进或者执行，页面只会把它们当作一个空格来解析。所以想要在html中输出空格必须使用来实现, 一个就代表一个空格
• 表格table
  • 以表格形式将数据显示出来
  • 格式
    • table> caption> xxx </caption> thead> tr> th></th> th></th> /tr> thead> tbody> tr> td></td> td></td> /tr> /tbody> tfoot> tr> td></td> td></td> /tr> /tfoot> /table
  • 标签
    • table定义表格
    • caption给整个表格设置标题
      • 一定要嵌套在talbe标签内部才有效
    • thead表头
      • 如果没有加css页面默认将表头中的高度设置变小
    • tbody主体
      • 一般用来存放页面中的主体数据, 如果不写会自动加上
    • tfoot脚注或表注
      • 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现
    • th标题
      • 给每一列设置标题, 单元格中的内容会自动加粗，居中
    • tr（table row）定义行
    • td（table data）定义单元格，填写数据
      • &nbsp; 表示空单元格
  • 属性
    • border边框宽度，默认0
    • width，height宽高
    • cellspacing: 外边距
      • 默认情况下单元格之间有2个像素的间隙
    • cellpadding: 内边距
      • 默认情况下单元格边缘距离内容有1个像素的内边距
    • align水平对齐
      • 规定表格相对周围元素的对齐方式
      • 值
        • center、left、right让表格在浏览器中居左/居右/居中
      • 其他注意
        • 给tr设置align属性, 是让当前行中所有内容居左/居右/居中
        • 给td设置align属性,是让当前单元格中所有内容居左/居右/居中
    • valign垂直对齐
      • 规定表格相对周围元素的对齐方式, 它的取值有center、left、right，类似align
    • bgcolor背景颜色
      • 规定表格的背景颜色,也可以给tr，td设置背景颜色
  • 其他
    • colspan水平合并单元格，向后合并
      • colspan="2"横跨两列的单元格：
    • rowspan垂直合并单元格，向下合并
      • rowspan="2"横跨两行的单元格：
• 列表list
  • 无序列表(unordered list)
    • 给一堆内容添加无序列表语义(一个没有先后顺序整体)
    • 格式
      • ul> li>xxx</li> /ul
    • 注意
      • li(list item)列表项
      • 无序是指对于主体来说内容没有先后之分
      • ul和li是一个整体，ul里面最好只写li标签，li标签中可以添加任意标签
      • 应用
        • 导航条，商品列表等，新闻列表
  • 有序列表(ordered list)
    • 给一堆内容添加有序列表语义(一个有顺序整体),和无序列表相似
    • 格式
      • ol> li>xxx</li> /ol
  • 定义列表(definition list)
    • 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述
    • 格式
      • dl> dt><dt/> dd></dd> dt><dt/> dd></dd> /dl
    • 注意
      • dt（definition title）定义标题 dd（definition description）定义描述信息
      • 应用
        • 网站底部相关信息
        • 但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl
        • 图文混排
      • dl和dt、dd是一个整体类似ul和li
• 基本标签
  • 标题heading
    • h1>...<h6
      • 独占一行,h1最大，慎用，一般仅一个h1
  • 段落paragraph
    • p
      • 独占一行
  • 水平分隔线 horizontal rule
    • hr/
      • 无结束标签，独占一行，不推荐使用
  • 换行符Line break
    • br
      • 无结束标签,不另起一个段落进行换行, 并没有叙述完内容
  • 图片image
    • img src='' alt=''
      • 属性
        • src（source）资源
          • 规定图像文件的 URL
          • 值
            • url
              • 绝对路径
                • 完整路径（比如 src="http://www.example.com/"或）和 C：/user/dell/test.txt
                • 可移植性差
              • 相对路径
                • 图片文件相对于现在所在html文件的路径（比如 src="/i/image.gif"和./test.txt）
                • / ：表示根目录 abc/girl.png ./ ：表示当前目录 ./abc/girl.png ../ : 表示上一级目录(../../上二级)../girl.png
                • aaa/../bbb/girl.png有时显示，但是会出现很多错误，建议绝对不要这么写
                • 使用相对路径，路径使用反斜杠/
        • alt(alternate)替代
          • 只有在src指定的路径下找不到图片,才会显示alt指定的文本
          • 值
            • text文本
        • title标题
          • 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示)
          • 值
            • 文本
        • height,weight高宽
          • 指定一个，自动等比适应
          • 值
            • px像素Pixel
            • %百分比（相对于父元素）
      • 注意
        • 默认不是占一整行空间
        • 如果想让图片等比拉伸, 只写高度或者宽度即可
  • 超链接,锚anchor
    • a href=''
      • 属性
        • href(hypertext reference)超文本指向
          • 规定链接指向的页面的 URL
          • 值
            • 相对和绝对的url路径
        • target指向
          • 规定在何处打开链接文档。
          • 值
            • _self
              • 默认，当前选项卡中跳转
            • _blank
              • 浏览器总在一个新打开、未命名的窗口中载入目标文档。
        • title
          • 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示)
          • 值：文本
      • 注意
        • 在a标签之间一定要写上文字,
        • 使用base标签一次性设置a标签的跳转方式
          • base target="_blank" /
            • base必须嵌套在head标签里面
            • 如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
      • 用法
        • 假链接(本质是跳转到当前页面)
          • a href="#">xxx</a>（回到网页顶部）
          • a href="javascript:">xxx</a>（不会回到网页顶部）
        • 跳转到当前页面指定位置(锚点链接)
          • a href="#location">跳转到指定位置</a
          • 在页面的指定位置给任意标签添加一个id属性 例如 <p id="location">这个是目标</p
        • 下载
• 基础
  • html标签（html tag）
    • 由尖括号包围的关键词，而且成对出现。<body>xxx</body
  • html文档
    • 用来描述网页，包含html标签和纯文本
  • 基本格式
    • !DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>editable-select</title> /head> body> /body> /html
      • //第一行文档声明,指明这是一个html5的网页文档 //lang:language表示当前文档显示的语言,en表示英文 //head用于给网站添加一些配置信息,不会显示给用户 //meta元信息，charset指定当前网页的字符集 (指定的字符集必须和保存这个文件的字符集一致) //title专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题,必须写在head标签里面// //body专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频),一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签//
  • 注释
    • !--被注释的内容--
      • ctrl + /
        • 不能嵌套使用
  • meta
    • 元信息
    • 属性
      • name
        • 指明类型
        • 值
          • keywords
            • 告诉搜索引擎当前网页的关键词
            • <meta name="keywords" content="HTML5技术、Android技术" />
          • description
            • 告诉搜索引擎当前网页的主要内容
            • <meta name="description" content="HTML5技术、Android技术研究" />
          • author
            • 告诉搜索引擎当前网页的作业, install B专用
            • <meta name="author" content="Jonathan_Lee" />
          • robots
            • 告诉搜索引擎当前网页的作业, 写给网络爬虫看的内容
            • <meta name="robots" content="all|none|index|follow|noindex|nofollow" />
      • http-equiv
        • 告诉浏览器多久自动刷新一次页面并指向新页面, 常用于新老域名交替时, 访问老域名自动跳转到新域名, 或用语一些需要定时刷新的聊天室等.
        • <meta http-equiv="Refresh" content="2；URL=http://www.baidu.com/">
      • 子主题
• 一些概念
  • url(Uniform Resourse Locator)统一资源定位符
    • 格式：协议类型://ip地址:端口号/资源路径/资源名称
    • http(htpertext transfer protocol)超文本传输协议
    • ip地址（Internet Protocol Address）网络互连的协议地址：地址
    • 端口：门牌号
  • 服务器
    • 不断电，不关机，关机就无法访问
    • 专门存储数据，别人可以访问获取资源
  • 浏览器
    • 访问网页是由真实的、物理的文件传输
    • 网页不是一个文件，而是一堆文件组成的
    • 第二次访问比第一次访问快的原因就是，第一次访问时已经将所有文件缓存到了本地