HTML知识点思维导图

大灰

2022-11-20

浏览量: 17

IT互联网

HTML基础知识

超文本标记

互联网前端代码超文本标记语言基础知识点——HTML基础知识点

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

思维导图大纲

五大浏览器

chrome firefox IE opera safari

html(hyper text markup language) 超文本标记语言

html文档也叫web页面

html文档基本结构

<!DOCTYPE html>

<head>

</head>

</html>

标记标签

双标记标签:<标签名>内容</标签名>

单标记标签:<标签名>

属性 charset字符设置用来设置字符编码的类型

utf-8万国码

gbk/gb2312

<title></title>定义网页标签页标题

<p>内容</p>段落标签

块元素 display:block

当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>结合使用

特殊符号

>大于号

<小于号

空格

&emsp;

&ensp;

超链接

href(hypertext reference)超文本引用引入跳转页面的路径

网址/相对路径/锚链接（#id值）

target="_blank" 在新窗口中打开链接

<base target="_blank" >全部在新窗口打开链接

行内框架

src引入页面的地址

frameborder框架的边框

frameborder="1"有边框

frameborder="0" 无边框

表格

<table>

<tr>

</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 方法方式数据的提交方式

get获取,获得

post提交,邮寄

区别

get方式提交的数据会出现在地址栏上方,安全性较低

get方式可能获取的数据是浏览器的缓存信息

get方式提交的数据长度有限制

input (行内块元素)输入 type 类型 type" 输入框 name名字 value输入框内的初始值 placeholder输入框的提醒文本 maxlength输入框里字符个数的限制

type="submit" 提交按钮

type="password" 密码框

type="reset" 重置按钮

type="image" 图片提交按钮

type="button" 一般按钮

复选框

type="checkbox"复选框

复选框默认被选中添加checked="checked"或checked

单选框

type="radio" name

必须写上相同的name值才能每次选中一个

文件上传框

file

文本域

下拉选择框

给option添加selected或 selected=" selected"可以使元素默认被选中

按钮

元素分类

块元素display:block

行内元素display:inline

行内块元素display:inline-block

作业帮思维脑图思维导图

U765196688

0.82

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

舞蹈思维导图

U729096334

4.02

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

思维导图模板

IT互联网

互联网干货

正文

相似思维导图模版

人工智能工具脑图思维导图

2023-10-10 16:27:03

如何做好IT软件项目建设方案的编制思维导图

思维导图模版推荐

首页

我的文件

我的团队

个人中心