HTML思维脑图思维导图
文档结构，form表单，标签总结等内容讲解
树图思维导图提供 HTML思维脑图 在线思维导图免费制作，点击“编辑”按钮，可对 HTML思维脑图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：9c9d63ffdf34e70c678d1eeee3d604ee
思维导图大纲
HTML思维导图模板大纲
Form表单
form 标签用于为用户输入创建 HTML 表单，用于向服务器传输数据。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 select、textarea、checked、selected
常用属性
enctype
设置表单方式，常用的值有application/x-www-form-urlencoded（默认）、multipart/form-data（文件上传）
method
设置表单请求方式，常用的值有：post、get
get:get请求 post:post请求
action
设置表单提交的地址,点击表单中的提交按钮，表单访问的java程序的路径
内部input
type:输入框的类型 text:文本类型 password:密码类型 submit:提交按钮类型 name:输入框的内容的名称 value : 输入框的内容
文本框
<input name="xx" type="text" />
密码框
<input name="xx" type="password" />
提交按钮
<input type="submit" value="登录" />
重置按钮
<input type="reset" value="重置" />
复选框
可以选择多个选项，将多个选项的内容提交给后台服务器java程序
1.type必须是checkbox
2.所有选项的name的值必须一致
3.需要设置选项的value属性的值，才能发送正确的数据给后台服务器java程序 为什么选项的name要保持一致呢？就是为了让选项成为一组 传递的数据： hobby=篮球&hobby=足球&hobby=羽毛球 可以变种成：hobby:[篮球，足球，羽毛球]
<input type="checkbox" name="hobby" value="篮球" checked/>:篮球 <input type="checkbox" name="hobby" value="足球"/>:足球 <input type="checkbox" name="hobby" value="羽毛球"/>:羽毛球
单选框
<input name="sex" type="radio" checked/>男 <input name="sex" type="radio"/>女 <input name="sex" type="radio"/>保密
下拉框
select标签
disabled：表示select下拉列表不可用，不写此属性，默认可用，写上此 属性就是不可用
option
value：表示列表选项数据的唯一标识，如果列表选项中没有value属性， 提交时使用的是列表数据本身 如果列表选项中有value属性，提交时使用的是value属性的值 （唯一标识）
selected：表示列表选项被默认选中
专业： <select name="major" id="selectId"> <option value="-1">专业</option> <option value="0" selected>计算机科学与技术</option> <option value="1">金融学</option> <option value="2">法学</option> </select>
多行文本框
<!-- cols：规定文本区域内可见的宽度。rows：规定文本区域内可见的行数。 -->
不建议使用rows和cols属性，建议使用css的width和height来控制多行文本框大小
<textarea name="bigtxt" cols="5" rows="5"></textarea>
上传文件
头像: <input type="file" accept="image/jpeg" name="file"/>
Html5中新增的表单元素
Email: <input type="email" name="user_email" />
number
<!-- min：最小值 max：最大值 --> 年龄: <input type="number" name="points" min="1" max="10" />
range
<!-- 进度条 --> <input type="range" name="points" min="1" max="10" />
日期选择 (date, month, week, time, datetime, datetime-local)
<!-- 日期标签 type: date:年月日 month:年月 week:年周 time:时分 datetime-local:年月日时分 -->
生日: <input type="datetime-local" name="date">
颜色选择器
颜色选择器用来让用户通过调色板自主选择颜色
<!-- 颜色标签 提交时传递给后端程序的是颜色的十六进制值 --> 喜欢的颜色： <input type="color" name="color">
html文档结构
1.Html文档结构组成部分
头部声明
<!-- 头部声明：说明该文档是HTML文档。所有的HTML文档开始于文档声明之后，它说明了文档的类型及其所遵守的标准规范集。--><!DOCTYPE html>
html根节点
<!-- 根节点，lang : 语言环境 en : 英文 <html>标签位于HTML文档的最前面，用来标识HTML文档的开始； </html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；--><html lang="en"
head部分
head部分：头部标签，包含有关HTML文档的信息 -->
<!-- meta：元数据，文档中数据的数据信息，charset：设置文档数据的数据编码格式为UTF-8 -->
<!-- vieport:设置浏览器页面展示窗口区域的数据信息，width=device-width ：窗口的宽度为设备的宽度 initial-scale：缩放比例为1.0 -->
<!-- title：页面文档的标题 --> <title>Html文档结构介绍</title>
body部分
<!-- body：身体标签，html网页展示的内容都在此标签内部去写 -->
HTML常用标签
1. 标题标签 h1~h6
<h1> 定义最大的标题。<h6> 定义最小的标题
水平线 hr
<hr /> 标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容
3. 段落标签 p
段落是通过 <p> 标签定义的，表示一段内容。
HTML换行 br
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签
5. 图片 img
常用属性
src：指定图片的地址
alt：图片无法加载时的替换文本
title：鼠标放到图片上的提示文字
width、height：设置图片的宽高
超链接 a
用途
HTML 使用超级链接与网络上的另一个文档相连。
网页中的锚点跳转功能
常用属性
href：定义超链接打开的网页地址
title：定义鼠标放上去后的提示文本
target 定义超链接打开的行为
_blank：新窗口打开
_parent：在父窗口中打开链接。
_self：默认，当前页面跳转
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)
iframename：iframe的名称
超链接的类型
文档超链接
文本超链接
图片超链接
内联框架 iframe
iframe常用属性name： 规定 iframe 的名称。width：规定 iframe 的宽度。height：规定 iframe 的高度。src：规定在 iframe中显示的文档的 URL
列表
ul标签
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>
ol标签
ol与ul的用法类似，只不过ol会在每项内容前添加一个标号。
dl、dt、dd标签
所有类型的列表项内部都可以使用段落、换行符、图片、链接以及其他列表标签等等。
span标签
用来组合文档中的行内元素，通常会用来作为文本的容器。
<!-- span标签 style="color: red;" 设置文本字体颜色-->
i、b、strong标签
i 标签
定义斜体的文本
b标签
定义粗体的文本
strong标签
定义重要的文本
div标签
一个典型的块级容器标签。是网页布局中最经常用的容器标签。
button标签
定义一个按钮
table标签
相关标签
tr
表格中的行
caption
表格的标题
th
表格中的表头单元格，表头的列
td
表格中的标准单元格，标准列
thead
表格的表头内容
tbody
表格的主体内容
tfoot
表格的页脚内容
caption、thead、tbody、tfoot可以不写（一般都不写）
table相关属性
border
设置边框宽度
cellpadding
单元格与边框的距离
cellspacing
单元格之间的距离
align
设置表格相对于周围元素的对齐方式，left：左对齐，right：右对齐，center：居中
style
设置单元格样式，width:宽度；height:高度；text-align:表格内容对其方式
Emmet语法
目的：使开发时编写html标签代码的效率变高
嵌套运算符
子代操作符：>
<!-- div>table>tr>td -->
兄弟操作符：+
<!-- div>table+p -->
返回上级操作符：^
<!-- div>table^p -->
乘法操作符：*
!-- div>table>tr>td*2 -->
分组操作符：()
<!-- div>(table>(tr>td*2)*2) -->
属性操作符
id属性操作符：#
子主题 1
class属性操作符：.
<!-- div#wrapper.wrapper --><div id="wrapper" class="wrapper"></div>
其他属性操作符：[]
<!-- font[color="red"] --><font color="red"></font>
数值计算操作符：$
<!-- p#p_$*5 -->
<p id="p_1"></p> <p id="p_2"></p> <p id="p_3"></p> <p id="p_4"></p> <p id="p_5"></p>
文本操作符：{}
<!-- font[color="red"]{犯我中华者虽远必诛！} --> <font color="red">犯我中华者虽远必诛！</font
注释
<!--Html的注释--> ctrl+/
标签总结
按照语法结构划分
单标签（单独使用）
<br/>、<hr>、<img>、<input>、<param>、<meta>、<link>
双标签（有开始标签和结束标签）
<html>、<head>、<title>、<body>、<table>、<tr>、<td>、<span>、<p>、<form>、 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<b>、<strong>、<i>、<div>、<a>、<ul>、 <ol>、<li>
按照特性来划分
行内标签元素
特性： 1. 行元素不会独占一行，而是在一行内进行使用，不影响当前行的布局 2. 行元素支持通过css设置宽、高
代表元素：<span>、<a>、<br>、<b>、<strong>、<img>、<input>、<textarea>、 <select>
块标签元素
特性： 1. 块元素会独占一行 2. 行元素支持通过css设置宽、高
代表元素：<div>、<body>、<table>、<p>、<form>、<h1>、<h2>、<h3>、<h4>、 <h5>、<h6>、<ul>、<ol>、<li>
行内块元素
特性： 1. 不会独占一行，一行可存在多个行内块元素，但它们之间存在空隙 2. 支持通过css设置宽、高
代表元素：img、select、strong、span
什么是HTML
html是超文本标记语言
相关思维导图模板
树图思维导图提供 1107文家市玉萍思维导图 在线思维导图免费制作，点击“编辑”按钮，可对 1107文家市玉萍思维导图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：ed943ef641f6dc874860eb6095857ed6
树图思维导图提供 种子思维脑图 在线思维导图免费制作，点击“编辑”按钮，可对 种子思维脑图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：86f8307a40ea24607c6c79354e09377f
沪公网安备 31011502019485号
上海工商