HTML常用标签及属性
2018-12-12 09:23:27来源:博客园 阅读 ()
-
格式:
-
双边:
<标签名 属性1="值1" 属性2='值2' 属性3=值3>内容</标签名>
-
单边:
<标签名 属性1="值1" 属性2='值2' 属性3=值3 />
-
-
特点:
-
标签都是成对出现的,单边标签也不要忘记结尾的'/'
-
容错性强,但是不要故意写错,故意挑战浏览器的解析能力
-
标签名已经预定义,不要随便自己起名字
-
标签统一使用小写,属性值统一使用双引号包括
-
-
说明:标签就是HTML文件的骨架,是最重要的组成部分
-
示例:
<html>
<!--注释-->
<head>
<title>页面标题</title>
</head>
<body text="red" bgcolor="#00ff00">
这里是页面内容
</body>
</html> -
说明
-
html:是文档中最大的标签,所有的标签都有放在该标签中
-
head:头部,里面的内容不会显示在页面上,但是可以设置页面信息,如:标题、字符集
-
body:身体,存放用于显示的页面内容,是页面的主体部分
-
-
body属性:
-
text:设置字体颜色
-
bgcolor:设置背景颜色
-
-
几乎每个标签都有的属性:
-
class、id、style、name
-
标题:
h1~h6
,字体从大到小,h1一个页面最多一个,不能为了调整字体大小而使用 -
加粗:
<b></b>、<strong></strong>
-
斜体:
<i></i>、<cite></cite>、<em></em>
-
下划线:
<u></u>
-
删除线:
<s></s>
-
上标:
<sup></sup>
-
下标:
<sub></sub>
-
字体:
<font></font>
-
size:大小
-
color:颜色
-
face:类型
-
换行:
<br />
,浏览器对任意多个空格、回撤都解析为一个空格 -
段落:
<p></p>
,表示一个段落 -
横线:
<hr />
,一条顺平横线 -
滚动:
<marquee></marquee>
-
原样:
<pre></pre>
,浏览器中显示的文本内容与文本一样 -
无序列表:
<ul></ul>
,里面的每个元素都是一个<li></li>
-
type:disc(实心圆,默认)、circle(空心圆)、square(实心方框)
-
-
有序列表:
<ol></ol>
-
type:1、A、a、I
-
start:起始序号
-
说明:HTML中预留的字符都必须替换为字符实体才可以显示。
-
提醒:不用刻意记录这些字符实体,用的时候查一下即可。
-
示例:
> >
< <
空格
& & -
参考:http://www.w3school.com.cn
-
说明:统一资源定位符,是URI的一种,可以唯一标识一个网络资源
-
组成:协议://主机:端口/文件?参数1=值1&参数2=值2
-
http:80,可以省略
-
https:443
-
-
例子:http://www.baidu.com:80/index.html?kw=python&page=2
-
名称:
<a></a>
-
说明:超链接,可以完成页面的跳转
-
属性:
-
href:指定跳转地址
-
title:光标放上去的提示信息
-
target:新页面的打开目标
-
_self:当前标签栏,默认设置
-
_blank:新的空白标签栏
-
_parent:覆盖父级标签栏
-
_top:覆盖顶层标签栏
-
-
name:设置锚点,用于跳转定位
-
可以在href属性设置时更精准定位跳转地址
-
如:
<a name="p3"></a>
,使用:<a href="xxx#p3">xxx</a>
-
说明:锚点不但可在一个页面内部跳转,还可进行跨越面跳转定位
-
-
图片:img(重点)
-
src:图片资源位置
-
width:宽度
-
height:高度,单独设置一个时,另一个会等比缩放,若同时设置可能会拉伸或压缩
-
title:光标放上去的提示信息,图片加载失败是也会显示。
-
-
-
src:指定资源
-
controls:显示控制条(值为controls,可以不写值)
-
loop:循环播放(值为loop,可以不写值)
-
autoplay:自动播放(值为autoplay,可以不写值)
-
-
-
音频的属性视频都有,功能也一样
-
多出来关于尺寸的属性:width、height
-
单独设置会进行等比缩放,同时设置时会出现留白
-
-
说明:就是类似于excel的形式
-
table:表格标签,所有的表格内容都要放在该标签中
-
border:边框尺寸
-
bordercolor:边框颜色
-
width:宽度
-
height:高度
-
bgcolor:背景色
-
align:水平对齐方式(left默认、center、right)
-
-
tr:表格中的一行
-
bgcolor:背景色
-
align:水平对齐方式(left默认、center、right)
-
valign:垂直对齐方式(top、middle默认、bottom)
-
-
td:一行的一列
-
colspan:列合并,合并一行的若干列
-
rowspan:行合并,合并一列的若干行
-
-
th:功能与td相同,只不过样式不同,进行了着重强调,用于设置表头
-
caption:表格标题,通常用于描述表格的作用
-
说明:就是一个页面中包含另一个页面
-
属性:
-
src:加载的资源地址
-
width:宽度
-
height:高度
-
frameborder:是否显示边框(1/0)
-
scrolling:滚动条控制(yes、no、auto)
-
name:标识窗口的名字,可以用于a标签的打开目标地址
-
-
说明:替代body定义网页框架,而且可以根据需要指定尺寸或比例进行划分
-
属性:
-
rows:垂直方向的尺寸划分,可以使用像素、也可以使用百分比,*表示其他
-
cols:水平方向的尺寸划分
-
noresize:禁止调整尺寸
-
frameborder:是否显示边框
-
border:边框宽度
-
bordercolor:边框颜色
-
-
frame:frameset中的一帧内容,也就是一个页面
-
noframes:浏览器不支持frameset时使用,兼容设置显示内容
-
说明:服务器收集用户信息,如:登录、注册等场景
-
form:表单,所有提交的数据都需要放在该标签中
-
action:指定提交地址,默认提交到当前地址
-
method:请求方法,get、post
-
get:提交的数据会出现在URL中
-
post:提交的数据不会出现在URL中,经常用于登录、注册、上传文件等
-
-
-
input:输入框,是表单中最重要的组成部分
-
name:指定名字,没有名字是无法提交的(即使能提交,数据也没有意义)
-
value:文本框的内容,一般用于不可输入的文本框
-
placeholder:占位内容,通常用于提示
-
size:设置尺寸(宽度)
-
maxlength:限制最大输入字符个数
-
readonly:只读状态,不可更改
-
disabled:禁用状态
-
type:设置输入框类型
-
text:可见文本,默认属性
-
submit:是提交按钮
-
password:密文文本
-
radio:单选框,注意事项:
-
多个单选项的name属性要一样
-
因为无法输入内容,所以需要书写value属性进行选项的区分,不必非要与提示信息一致
-
checked属性可以用于默认选择状态的设置
-
想让提示信息关联单选框,可以通过label标签结合id属性完成
-
-
checkbox:复选框,注意事项与radio相同
-
hidden:隐藏字段,不可见的,可以传递特定不公开信息
-
file:上传文件字段,需要对表属性进行配套设置
-
表单提交方法只能是post:
method="post"
-
指定编码类型:
enctype="multipart/form-data"
-
-
-
-
select:下拉选择框
-
属性name需要设置
-
属性size可以控制显示的选项个数
-
每一个选项通过option标签体现,必须指定其value属性,默认选中使用selected
-
-
textarea:文本域,多行文本
-
说明:input是单行文本,textarea是多行文本
-
属性:
-
rows:设置行数
-
cols:设置列数
-
-
注意:不要在输入区域书写任何多余的内容
-
-
表单提交
-
<input type="submit" />
,标准的提交按钮,可以提交按钮本身的值 -
<button></button>
,可以提交,但是不能提价按钮的值 -
<input type="button" />
,长的跟按钮一样,但是不能提交,后面可以结合JS使用
-
-
说明:一般存放对网页进行说明的内容,不会显示在页面上
-
示例:
<!--设置字符集-->
<meta charset="utf-8" />
<!--设置标题-->
<title>表单内容</title>
<!--设置网页关键字-->
<meta name="keywords" content="PYTHON培训,PYTHON开发培训" />
<!--设置网页描述-->
<meta name="description" content="教育第一" />
<!--设置文件类型-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--加载CSS文件-->
<link rel="stylesheet" type="text/css" href="xxx.css">
<!--定时刷新页面-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash