HTML标签属性

最新推荐文章于 2022-12-29 23:23:00 发布

原创最新推荐文章于 2022-12-29 23:23:00 发布 · 547 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #标签

HTML 专栏收录该内容

1 篇文章

订阅专栏

图像标签<img/>

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时替换的文本
title	文本	鼠标悬停时显示的内容
width	像素（XHTML不支持%页面百分比）	设置图像的宽度
height	像素（XHTML不支持%页面百分比）	设置图像的高度
border	数字	设置图像边框的宽度

相对路径

1.图像文件和HTML文件位于同一文件夹:只需输入图像文件的名称既可，如<img src="123.gif"/>

2.图像文件位于HTML文件的下一级文件夹:输入文件夹名和文件名，之间用"/"隔开,如<img src="img/img01/123.gif"/>

3.图像文件位于HTML文件的上一级文件夹:在文件名之前加入“../”,如果是上两级，则需使用“../../”，以此类推，如<img src="../123.gif"/>

绝对路径

“D:\web\img\123.gif”或完整的网络地址，“http://www.baidu.com/imges/123.gif”

链接标签<a></a>

href:用于指定链接目标的url地址

target：用于指定链接页面的打开方式，_self为默认值，_blank为在新窗口中打开

锚点定位

1.<a href=#id名>链接文本</a>

2.使用相应id名标注跳转目标位置

整体链接打开状态<base/>

<head>
    <base target="_blank" />
</head>

特殊字符标签

特殊字符	描述	字符代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&
©	版权	©
®	注册商标	®
¥	人民币	¥
°	摄氏度	°
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方	²
³	立方	³

注释标签<！-- 注释内容-->

列表标签

无序列表

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   ……
</ul>

有序列表

<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   ……
</ol>

自定义列表

<dl>
   <dt>名词1 </dt>
       <dd>名词1解释1</dd>
       <dd>名词1解释2</dd>
       ……
   <dt>名词2 </dt>
       <dd>名词2解释1</dd>
       <dd>名词2解释2</dd>
       ……
</dl>

表格<table></table>

属性名	含义	常用属性值
border	设置表格的边框（默认无边框）	像素值
cellspacing	设置单元格与单元格之间的空白间距	像素值
cellpadding	设置单元格内容与单元格边框之间的空白间距	像素值
width	宽度	像素值
height	高度	像素值
align	表格在网页中水平对齐方式	left、center、right

表格标题<caption></caption>表头标签<th></th>替代<td></td>

合并单元格：跨行合并rowspan,跨列合并colspan

表单

input控件

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域（上传文件）
name	用户自定义	控件名称
value	用户自定义	Input控件中的默认文本值
size	正整数	Input控件在页面中的显示宽度
checked	Checked	定义选项控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符

label标签

用于绑定一个表单元素，当点击label标签的时候，被点击的表单就会获得输入焦点

for属性规定label与哪个表单绑定

<label>输入账号：<input type="text"/></label>

<label for="two">
输入账号
<input type="text"/>
<input type="text" id="two"/>
</label>

下拉菜单

<select>
    <option>选项1</option>
    <option>选项2</option>
</select>

HTML5新增标签

header：定义文档的页眉，头部

nav:定义导航链接的部分

footer:定义文档或节的页脚，底部

article:定义文章

section:定义文档中的节

aside:定义所处内容之外的内容，侧边

datalist:标签定义选项列表

<input type="text" value="输入明星" list="star"/>
<datalist id="star">
    <option>权志龙</option>
    <option>崔胜铉</option>
    <option>东永裴</option>
</datalist>

fieldset:元素可将表单内的相关元素分组、打包

<fieldset>
   <legend>用户登录</legend>
   用户名：<input type="text"/>
   密码：<input type="password"/>
</fieldset>

HTML5新增input type 属性值

email,tel,url,number,search,range,time,datetime,month,week

常用新属性

placeholder:占位符提供提示信息

auofocus:当页面加载时input元素自动获得焦点

multiple:多文件上传

autocomplete:规定表单是否应该启用自动完成功能

1.使用首先需要提交按钮

2.input有name属性

<form action="">
   姓名：<input type="text" autcomplete="on" name="userName"/>
   <input type="submit"/>
</form>

required:必填，不能为空

accesskey:规定使元素获得焦点元素的快捷键，使用alt+字母

多媒体标签

embed：标签定义嵌入的内容

audio:播放音频

autoplay:自动播放

controls:是否显示播放控件

loop:循环播放

video:播放视频

autoplay:自动播放

controls:是否显示播放控件

loop:循环播放

width:宽

height:高