HTML思维导图

灰色と青

2023-08-15

浏览量: 91

HTML

树图思维导图提供《HTML》在线思维导图免费制作，点击“编辑”按钮，可对《HTML》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：8cb7a889c2d398204544ff59e695021f

思维导图大纲

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 : 输入框的内容

文本框

密码框

提交按钮

重置按钮

复选框

可以选择多个选项，将多个选项的内容提交给后台服务器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>

多行文本框

不建议使用rows和cols属性，建议使用css的width和height来控制多行文本框大小

上传文件

头像: <input type="file" accept="image/jpeg" name="file"/>

Html5中新增的表单元素

Email: <input type="email" name="user_email" />

number

年龄: <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)

生日: <input type="datetime-local" name="date">

颜色选择器

颜色选择器用来让用户通过调色板自主选择颜色

喜欢的颜色： <input type="color" name="color">

html文档结构

1.Html文档结构组成部分

头部声明

<!DOCTYPE html>

html根节点

<html lang="en"

head部分

head部分：头部标签，包含有关HTML文档的信息 -->

<title>Html文档结构介绍</title>

body部分

子主题 1

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标签

用来组合文档中的行内元素，通常会用来作为文本的容器。

i、b、strong标签

i 标签

定义斜体的文本

b标签

定义粗体的文本

strong标签

定义重要的文本

div标签

一个典型的块级容器标签。是网页布局中最经常用的容器标签。

button标签

定义一个按钮

table标签

标签总结

按照语法结构划分

单标签（单独使用）

双标签（有开始标签和结束标签）

按照特性来划分

行内标签元素

特性： 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是超文本标记语言

HTML思维脑图思维导图

灰色と青

0.5

树图思维导图提供《HTML思维脑图》在线思维导图免费制作，点击“编辑”按钮，可对《HTML思维脑图》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：9c9d63ffdf34e70c678d1eeee3d604ee

web前端开发之——HTML初识1思维导图

U147357616

4.96

树图思维导图提供《web前端开发之——HTML初识1》在线思维导图免费制作，点击“编辑”按钮，可对《web前端开发之——HTML初识1》进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：9481ea2ebc5eaaeeced4d18981613a12

思维导图模板

IT互联网

产品结构

正文

相似思维导图模版

思维导图模版推荐

首页

我的文件

我的团队

个人中心

HTML思维导图

思维导图大纲

相关思维导图模版

Form表单

html文档结构

标签总结

﻿什么是HTML

相似思维导图模版

思维导图模版推荐

什么是HTML