HTML知识点思维导图
互联网前端代码超文本标记语言基础知识点——HTML基础知识点
树图思维导图提供 HTML知识点 在线思维导图免费制作，点击“编辑”按钮，可对 HTML知识点 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：91db19697752417d2387c43b3e4d5730
思维导图大纲
html基础思维导图模板大纲
五大浏览器
chrome firefox IE opera safari
html(hyper text markup language) 超文本标记语言
html文档也叫web页面
html文档基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>t</title>
</head>
<body></body>
</html>
标记标签
双标记标签:<标签名>内容</标签名>
单标记标签:<标签名>
<meta>元数据标签
属性 charset字符设置 用来设置字符编码的类型
utf-8万国码
gbk/gb2312
<title></title>定义网页标签页标题
<p>内容</p>段落标签
块元素 display:block
<img src="图片地址" width="宽度" height="高度" alt="图片加载失败时的提示文本" title="图片提示文本>
当html文件与图片在同一路径下,src的值是./图片名称(./可以省略)
当html文件与图片所在文件夹,在同一目录下,src的值是先写文件夹名称,再写图片名称
当html文件所在文件夹与图片在同一目录下,src的值是先通过../跳出当前目录,再写图片名称
当html文件所在文件夹与图片所在文件夹在同一个目录下,src的值先通过../跳出当前目录,再写图片所在文件夹名称,最后写图片名称
../跳出当前目录
<br>常用于段落内部换行
标题标签h1-h6 都加粗,都是块元素,字号依次减小
水平线<hr width="" color="">
width宽度（数字/百分比）
align水平方向对齐方式
center居中
left居左
right居右
color修改水平线的颜色
表现性元素
<b>样式表现为粗体
<strong>主旨是强调,表现为粗体
<i>样式表现为斜体
<em>主旨是强调,表现为斜体
<sup></sup>上标
<sub></sub>下标
其他元素
<div></div>块级元素
总是在新的一行开始
高度,行高以及外边距和内边距都可以控制
宽度始终是与浏览器宽度一样,与内容无关
可以容纳行内(内联)元素和其他元素
<span></span>行内元素
和其他元素在同一行上
高,行高以及外边距和内边距部分可改变
宽度只与内容有关
行内元素只能容纳文本或其他行内元素
列表
<ul></ul>无序列表标记,表示列表所含的项是没有先后顺序的列表项使用<li>表示
<ol></ol>有序列表标记,表示列表所含的项是有先后顺序的列表项使用<li>表示
<li></li>列表标记项,只能与<ul>和<ol>结合使用
特殊符号
>大于号
<小于号
空格
 
 
超链接
<a href="" target=""> 超链接</a>
href(hypertext reference)超文本引用 引入跳转页面的路径
网址/相对路径/锚链接（#id值）
target="_blank" 在新窗口中打开链接
<base target="_blank" >全部在新窗口打开链接
行内框架
<iframe src="" frameborder></iframe>
src引入页面的地址
frameborder框架的边框
frameborder="1"有边框
frameborder="0" 无边框
表格
<table></table>
<table>
<tr>
<td>单元格</td>
<th>表格标题</th>
</tr>
</table>
table的属性
border 边框
bordercolor边框颜色
cellspacing 单元格之间的距离
cellpadding单元格与内容四周的距离
align水平方向对齐
left左对齐
center居中对齐
right居右对齐
valign 单元格的垂直方向对齐
top居上对齐
middle居中对齐
bottom居下对齐
rules规定内侧边框是否可见
none没有线条
rows位于行之间的线条可见
cols位于列之间的线条可见
all位于行和列之间的线条可见
合并单元格
colspan左右合并单元格
rowspan上下合并单元格
表单
用来采集用户的输入数据,然后将数据交给服务器
<form action="" method=""> </form>
form (块元素)用来表示采集数据的范围
action 行为 动作 数据的提交路径
method 方法 方式数据的提交方式
get获取,获得
post提交,邮寄
区别
get方式 提交的数据会出现在地址栏上方,安全性较低
get方式可能获取的数据是浏览器的缓存信息
get方式提交的数据长度有限制
<input type="" name="" value="" placeholder="" maxlength="">
input (行内块元素)输入 type 类型 type" 输入框 name名字 value输入框内的初始值 placeholder输入框的提醒文本 maxlength输入框里字符个数的限制
type="submit" 提交按钮
type="password" 密码框
type="reset" 重置按钮
type="image" 图片提交按钮
type="button" 一般按钮
复选框
type="checkbox"复选框
复选框默认被选中 添加checked="checked"或checked
<label><input type="checkbox">同意协议</label>
<input type="checkbox" id="id值"><label for="id值>同意协议</label>
单选框
type="radio" name
必须写上相同的name值才能每次选中一个
文件上传框
file
文本域
<textarea name="" cols"列数" rows"行数"></textarea>
下拉选择框
<select>
给option添加selected或 selected=" selected"可以使元素默认被选中
按钮
元素分类
块元素display:block
行内元素display:inline
行内块元素display:inline-block
相关思维导图模板
树图思维导图提供 抓住重点 在线思维导图免费制作，点击“编辑”按钮，可对 抓住重点 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：4c49e4799ddf94a339c56e46eb96a826
树图思维导图提供 数智技术在工程设备管理中的应用 在线思维导图免费制作，点击“编辑”按钮，可对 数智技术在工程设备管理中的应用 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：f9a2de84ad9a9ceebc96385d71be9ebe
沪公网安备 31011502019485号
上海工商