导图社区 HTML笔记
HTML入门笔记，主要是前段开发基础的相关内容，简单记录笔记，本图知识梳理清楚，非常实用，值得收藏。
社区模板帮助中心，点此进入>>
互联网9大思维
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
css
CSS
计算机操作系统思维导图
计算机组成原理
IMX6UL(A7)
考试学情分析系统
HTML
文档类型<!DOCTYPE >
页面语言<html lang="en"/"zh-CN">
en定义语言为英语，zh-CN中文
根据lang属性来设定不同语言的css样式或字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助页面阅读程序做识别
字符集<meta charset="UTF-8">
meta有两个属性name 和 http-equiv
name属性
keywords(关键字) 告诉搜索引擎，该网页的关键字
description(网站内容描述) 用于告诉搜索引擎，你网站的主要内容
viewport(移动端的窗口)
robots(定义搜索引擎爬虫的索引方式) robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引
author(作者)
generator(网页制作软件）
copyright(版权)
http-equiv参数
content-Type 设定网页字符集(Html4用法，不推荐)
Expires(期限) ,可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
Pragma(cache模式),是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
Refresh(刷新),自动刷新并指向新页面
cache-control（请求和响应遵循的缓存机制）
http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容
标签
标题标签
h1、h2、h3、h4、h5、h6
段落标签
<p></p>段落标签
<br/> 换行标签，单标签
<hr/>单标签，表示一条横线
文本格式化标签
<strong>加粗</strong>或<b></b>
<em>斜体</em>或<i></i>
<del>删除线</del>或<s></s>
<ins>下划线</ins>或<u></u>
<sup>上标</sup>
<sub>下标</sub>
盒子标签
<div></div>每个div独占一行
<span></span>一行可以放多个span
没有语义，用于网页布局
图像标签和路径
图像标签
src图片路径——必须属性<img src="图像名称"/>
alt 替换文本——图像不能显示时，用文本替换描述
title提示文本——鼠标放到图像上时，显示的文字
width像素——设置图像的宽度
height像素——设置图像的高度
border数字——设置图像的边框粗细
图像路径
相对路径
同一级路径
图像文件位于HTML文件同一级
下一级路径
图像文件位于HTML文件下一级 符号/
上一级路径
图像文件位于HTML文件上一级 符号../
以引用文件所在位置为参考基础，而建立出的目录路径；图片相对于HTML页面的位置
绝对路径
指目录下的绝对位置，直接到达目标位置 符号\
超链接标签
外部链接
需要添加 http:// 如<a href="http:// www.baidu.com">文本或图像</a>
内部链接
直接链接内部页面名称即可
空连接
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#” 即<a href="#">文本或图像</a>
锚链接
使用<a href="#id名">链接文本</a>创建链接文本（被点击的） <a href="#two">
使用相应的id名标注跳转目标的位置(要找的目标) <h3 id="id名two">第2集</h3>
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a> target="_self" 默认窗口弹出方式 target="_blank" 新窗口弹出
注释和特殊字符
注释
<!--添加注释说明-->快捷键：Ctrl /
特殊字符
空格
< 小于号
> 大于号
表格标签
展示数据
普通单元格
<table> <tr>定义行 <td>单元格</td> </tr> </table>
表头单元格标签
<th></th>表格第一行，会加粗突出重要性
<table> <tr> <th>表头</th> </tr> </table>
表格属性
要写在table标签里，不常用，常用css设置
align="center"、"left"、"right"
border="1"或者设置数字
cellpadding=""单元格和文字间的距离，默认1像素
cellspacing=""单元格和单元格之前的距离，默认2像素
width/height=""规定表格的宽度和高度
<thead>表格头部区域<tbody>表格主体区域
<thead></thead>一般位于第一行，内部必须拥有<tr>标签
<tbody></tbody>主要用于放数据本体
两个标签都是放在<table></table>标签里
可更好的表示表格的语义，将表格分割成表格头部和表格主体两部分
可以更好的分清表格结构
合并单元格
跨行合并
rowspan="合并单元格数"
最上侧单元格为目标单元格，写合并代码
跨列合并
colspan="合并单元格数"
最左侧单元格为目标单元格，写合并代码
列表标签
无序列表
<ul> <li> </li> </ul>
里面只能包含<li>，没有顺序，使用较多。<li>里面可以包含任何标签
有序列表
<ol><li> </li> </ol>
里面只能包含<li>，有顺序，使用较少。<li>里面可以包含任何标签
自定义列表
<dl> <dt> <dd> </dd> </dt> </dl>
里面只能包含<dt>和<dd>。dt和dd里面可以放任何标签
表单
收集用户信息
构成
表单域
<from action="url地址" method="get/post" name="表单域名称"
包含表单元素的区域。<from>标签定义表单域，以实现用户信息的收集和传递。<from>会把它范围内的表单元素信息提交给服务器。
表单控件（表单元素）
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
input控件
<input type="属性值"> 是单标签
type属性
text：单行文本输入框
用户名: <input type="text" />
password：密码输入框
密 码：<input type="password" />
radio：单选按钮
<input type="radio" />
checkbox：复选框
默认同意<input type="checkbox" checked="checked">
button：普通按钮
submit：提交按钮
reset：重置按钮
image：图像形式的提交按钮
file：文件域
name
由用户自定义：控件的名称
<input type="radio" name="sex" />男 <input type="radio" name="sex" />女
name表单的名字， 这样，后台可以通过这个name属性找到这个表单。 页面中的表单很多，name主要作用就是用于区别不同的表单。
name属性后面的值，是我们自己定义的。
radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦
value
由用户自定义：input控件中的默认文本值
用户名:<input type="text" name="username" value="请输入用户名">
checked
checked：定义默认被选中的项
默认同意 <input type="checkbox" checked="checked">我同意
表示默认选中状态。 较常见于 单选按钮和复选按钮。
size
正整数：input控件在页面中的显示宽度
maxlength
正整数：控件允许输入的最多字符数
label标签
label 标签为 input 元素定义标注（标签）
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
第一种用法就是用label标签直接包含input表单， 适合单个表单选择。 <label> 用户名： <input type="radio" name="usename" value="请输入用户名"> </label>
第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。 <label for="sex">男</label> <input type="radio" name="sex" id="sex">
select下拉列表
如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
在option 中定义selected =" selected "时，当前项即为默认选中项。
<select> <option>--请选择年份--</option> <option>1990</option> <option>1991</option> <option>1992</option> <option selected =" selected ">1993</option> <option>1994</option> </select>
textarea控件(文本域)
通过textarea控件可以轻松地创建多行文本输入框
cols="每行中的字符数" rows="显示的行数" 我们实际开发不用，使用CSS
