HTML标签介绍

xiaoxiao2025-10-27  7

HTML

HTML结构

<!--标记HTML文档的开始--> <html> <!--头部信息,设置样式或编码--> <head> <!--设置文档的编码--> <meta charset="utf-8" /> </head> <body> <!--主题内容,浏览器能看到的--> </body> <!--标记HTML文档的结束--> </html>

标签

所有标签都有的属性:

1、id属性 通过操作js 2、name属性 表单提交数据 3、class属性 设置元素的样式名

标题

用于显示HTML页面标题和收藏网页默认名字

<titel>标题</title>

分隔符

<hr width="50%" size="2" />

换行

<br />

p标签

段落标签

<p></p>

img标签

图片标签 属性:

src:引入图片的路径 (必要属性)alt:当图片不存在时,显示的文字

常用属性:

title:鼠标放到图片上会显示的文字

width:图片的宽度

height:图片的高度

border:图片的边框

align:规定如何根据周围的文本来排列图像

<img src="img/food.jpg" alt="好吃的" title="这是一张图片" />

a标签

属性: href:跳转的路径 href属性是a标签的必要属性,如果没有则和普通文本没有区别 target:页面打开方式

_self:当前窗口

_blank:新开空白窗口

_parent:在父窗口打开

_top:最顶层窗口打开

<a href="http://www.baidu.com" target="_self">标签</a>

a标签作为锚点 1、a标签的name属性值

<a name="name属性值"></a> <a href="#name属性值"></a> 对应的是要被定位的a标签的name属性值

2、其它标签(除了a标签)的id属性值

<p id="sep"></p> <a href="#id属性值"></a> 对应的是要被定位的其他标签的id属性值

div标签

div:块级元素

<div align="center" >Hello</div>

span:行内元素

<span style="width: 100px;display:inline-block">你好</span>

table标签

table:表格

tr:行th:表头,会有 自动加粗,居中td:标准单元格

table的常用属性:

border:边框align:表格的对齐方式 (left、right、center)width:表格的宽度

tr的属性:

bgcolor:行的背景颜色align:行中的文本的水平方向的对齐方式 left、right、centervalign:行中的文本的垂直方向的对齐方式 top、bottom、middle

列表

无序列表

<ul> <li></li> <li></li> ... </ul>

属性:type

dise:实心圆(默认)circle:空心圆square:方块

有序列表

<ol> <li></li> <li></li> ... </ol>

属性:type

1:用数字形式表示序号(默认)a:用小写字母表示序号A:用大写字母表示序号i:用小写罗马数字表示序号I(大写i):用大写罗马数字表示序号

font标签

font:设置文本的字体、颜色、大小

color:字体颜色

face:字体

size:字体大小

<font color="pink" face="楷体" size="7">标签</font>

pre标签

对当前html保持原有的格式 内部标签设置文本样式:

u:下划线 b:字体加粗 i:字体倾斜 del:中划线 sub:下标文本 sup:上标文本

字符实体

空格: &nbsp; 小于号 < : &lt; 大于号 > : &gt; 版权: &copy;

form表单

用于向后台传输数据 常用属性: action:数据提交的路径(跳转的路径) method:提交表单的方式 GET/POST Get:

1、提交时参数会直接跟在地址栏后面 (默认)2、提交数据的长度有限3、有缓存

Post:

1、提交时参数不会跟在地址栏后面2、提交大量数据3、无缓存

get请求相对post来说,get不那么安全;get请求比post快。 当使用上传文件表单时,需要使用POST请求。 id: name: target:跳转的方式

_self:当前窗口 默认_blank:新的空白窗口

fieldset标签

外边框

<fieldset style="width: 300px;"> <legend>登录</legend> <form action="http://www.shsxt.com" method="post" target="_blank"> <input name="uname" type="text" /> <input type="submit" /> </form> </fieldset>

input标签

常用属性: name:

1、表单提交时,如果需要传递参数,必须设置name属性值,否则无法接受。name属性值就是参数名,value属性值就是参数值2、单选框要设置相同的name属性值,才能设置为一组3、复选框要设置相同的name属性值,才能设置为一组

value:元素的值 type:标签样式

text 文本框

password 密码框

radio 单选框

checkbox 复选框

hidden 隐藏域

file 文件域

image 图片提交按钮

button 普通按钮

reset 重置按钮

submit 提交按钮

注意: 若上传文件,请求方式为post,且表单添加一个属性:enctype="multipart/form-data" enctype="multipart/form-data" 上传表单类型 enctype="application/x-www-form-urlencoded" 普通表单

select标签

select下拉框 常用属性:

disabled=“disabled” 禁用下拉框multiple:多选size:下拉列表中可见选项的数目idname

option下拉框选项 常用属性:

disabled=“disabled” 禁用下拉框选项

selected:默认选中项,如果未设置,则选中第一项

value:下拉选项的值。如果没有value属性值,下拉框(option双标签之间的)的值为文本值

====请选择==== 七里香 不能说的秘密 等你下课 告白气球 其他

textarea标签

textarea文本域 该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本,可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea cols="50" rows="10" ></textarea>
转载请注明原文地址: https://www.6miu.com/read-5038614.html

最新回复(0)