导图社区 HTML框架概览
HTML学习框架,整理了基本标签、文本、列表、表格、图片、超链接、表单、框架的内容,欢迎交流。
编辑于2023-03-03 21:47:02HTML
1.基本标签
1.1.文档声明:<!DOCTYPE html>
1.2.<html></html>
1.3.<head></head>
1.3.1.<title></title>网页标题
1.3.2.<meta>告诉搜索引擎蜘蛛这个页面作用
属性1:name
name="keywords" content=""
name="description" content=""
属性2:http-equiv
charset="utf-8"替代,防止乱码
http-equiv="refresh" content="6;url=http://www.baidu.com"
1.4.<body></body>
1.5.注释
<!--content-->
2.文本
2.1简介
2.1.1页面组成元素
文本;图片;超链接;音频和视频
2.1.2静态页面和动态页面的区别
是否与服务器进行数据交互
2.2HTML文本
2.2.1标题标签
<h1></h1>~<h6></h6>
2.2.2段落标签
<p></p>给文字分段,有间隔
<br/>给文字换行,无间隔
2.2.3文本标签
粗体:strong(更多)、b
斜体:em(更多)、i、cite
上标:sup
下标:sub
2.2.4水平线标签
<hr/>
2.2.5div标签
作用:划分结构,从而配合CSS整体控制某一块样式
2.2.6自闭合标签
<meta/>,<link/>,<br/>,<hr/>,<img/>,<input/>
2.2.7块元素和行内元素
块元素
h1~h6;p;div;hr;ol;ul
特点:独占一行,排斥其他元素;元素内部可以容纳其他块元素和行内元素
行内元素
strong;em;a;span
特点:可与其他行内元素同行;元素内部可容纳其他行内元素,不能容纳块元素
2.2.8特殊符号(需要时直接搜)
空格,一个汉字约等于3个空格
" ""
3.列表
3.1有序列表
<ol><li>列表项1</li></ol>
3.2无序列表
<ul><li>列表项1</li></ul>
4.表格
4.1基本结构
table:表格,tr:行,td:单元格,caption:表格标题,th:表头,thead,tbody,tfoot:表格语义化。 <table><caption>表格标题</caption> <thead><tr><th>表头单元格1</th></tr></thead> <tbody><tr><td>单元格1</td></tr></tbody> <tfoot><tr><td>单元格1</td></tr></tfoot> </table>
4.2合并行:rowspan
<td rowspan="跨越的行数"></td>
4.3合并列:colspan
<td colspan="跨越的列数"></td>
5.图片
5.1src属性(必选)
<img src="图片路径,尽量用相对路径" alt="图片不显示时,提示此文字" title="鼠标移到图片上时,就会显示title中的提示文字" />
5.2alt属性(必选)
5.3title属性
5.4图片格式
5.4.1位图(大部分用)
1.jpg:展示色彩丰富而高品质图片。不支持透明。
2.png:展示色彩丰富而高品质图片。是一种无损格式,可以无损压缩以保证页面打开速度,不适合存储颜色丰富的图片。
3.gif:动画图片。图片效果最差。
5.4.2矢量图
1.不适用于展示色彩丰富的图片。
2.组成单位:是“数学向量”
3.不受分辨率影响,当图片放大时不会失真
6.超链接
6.1a标签
6.1.1href链接地址
可外部/内部(相对位置)链接。<a href="链接地址">文本或图片</a>
6.1.2target属性
_blank:在新窗口打开链接。<a href="" target="_blank"></a>
6.2锚点链接
href带#+id:<a href="#article随便取个英文名"></a> <div id="article"></div>
7.表单
7.1表单标签
form,input,textarea,select,option
7.2form标签
7.2.1<form>各种表单标签</form>
7.2.2属性
name方便区分:<form name="myForm"></form>
method指定表单数据使用哪一种http提交方法,一般用post,安全性更好:<form method="post"></form>
action指定表单数据提交到哪一个地址进行处理:<form action="index.php"></form>
target指定窗口的打开方式,一般用_blank:<form target="_blank"></form>
7.3input标签
文本框
7.3.1单行文本框
<input type="text" />
属性
value文本框内显示值:<input type="text" value="helicopter"/>
maxlength文本框中最多可以输入的字符数:<input type="text" maxlength="5"/>
7.3.2密码文本框
<input type="password" />
属性
value
<input type="password" size="15" maxlength="10" />
size
maxlength
7.3.7多行文本框
<textarea rows="行数" cols="列数" value="取值(一般不需要设置显示文本)">默认内容</textarea>
7.3.3单选框
<input type="radio" name="组名" value="取值" />
属性
name(必选)
<input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女
value(必选)
checked被选中
<input type="radio" name="gender" value="男" checked />男
7.3.4复选框
<input type="checkbox" name="组名" value="取值" />
属性
name(必选)
<input type="checkbox" name="fruit" value="苹果"/>苹果 <input type="checkbox" name="fruit" value="香蕉"/>香蕉
value(必选)
checked被选中
<input type="checkbox" name="fruit" value="香蕉"/>香蕉
7.3.5按钮
7.3.5.1普通按钮(配合js进行各种操作)
<input type="button" value="取值(按钮上的文字)" />
7.3.5.2提交按钮(给服务器提交数据)
<input type="submit" value="取值(按钮上的文字)" />
7.3.5.3重置按钮(清除用户所在表单中输入的内容)
<input type="reset" value="取值(按钮上的文字)" />
7.3.5.4button标签(不咋用)
7.3.6文件上传
<input type="file" />
7.3.8下拉列表
<select> <option>选项内容1</option> </select>
select属性
multiple可以选择多项:<select multiple> </select>
size显示几个列表项,取值为>=4的整数:<select size="5"></select>
option属性
selected是否选中:<option selected>jQuery</option>
value选项值,配合JavaScript以及服务器进行操作的
8.框架
8.1内嵌框架(在当前页面再嵌入另外一个网页)
<iframe src="链接地址" width="数值" height="数值"></iframe>