HTML5常用标签与属性

  • HTML5常用标签与属性已关闭评论
  • A+
所属分类:问题解答
阅读全文大概需要 19 分钟

Html5介绍

  • Html---xhtml----html5
  • Html5广义:html5+css3_javascript+api
  • Html5特点:
    • 代码更加简洁
    • 标签具有语义化
    • 新增了一些属性
    • 代码更加宽松
  • Html5发展史

2004年提出构想---2008年模拟第一份草案----2012年推广html5-----2020推出正式版

  • 浏览器支持html5
  • IE9版本以上支持html5
  • 其余浏览器都支持
  • Html5结构

 

  • Html5新增标签

  • <header>网页的头部
  • <nav>王爷的导航
  • <section>代表网页的一个块,与div相似
  • <article>网页文章内容
  • <aside>网页侧边栏
  • <footer>网页页脚
  • 新增type属性值

语法:

<input type="text" name="username" class="boxone" placeholder="用户名/账号/邮箱" maxlength="10" required="required" autofocus="autofocus">

 

属性:

Placeholder=”用户名/账号/邮箱” 输入框的提示信息
Required=”required” 不填写不能提交
Autofocus=“autofocus” 光标自动定位
Name 表单的名称
Maxlength 最大输入字符
Value 输入框的预定义文字
Size 输入框最大字符数

 

  • 新增表单属性

Email 限定用户输入必须是email类型
url 限定用户输入必须是网络地址
Data 限定用户输入必须是日期类型
Month 限定用户输入必须是月类型
Time 限定用户输入必须是时间类型
Week 限定用户输入必须是周类型
Number 限定用户输入必须是数字类型
Search 限定用户输入必须是搜索框
Color 产生一个颜色选项
Ranger 产生一个滑块

 

  • 新增视频标签

 

<video autoplay="atuoplay" controls="controls">

<source src="videos/1.mp4">

<source src="videos/1.ogg">

<source src="videos/1.webm">

</video>

 

 

  • 新增音频标签

 

<audio  controls="controls">

<source src="1.mp3">

<source src="1.ogg">

<source src="1.mav">

</audio>

 

 

Html文本标签

1.文本标签<font>,设置文本的颜色、文本的字体、文本的大小

语法:<font>设置内容</font>

属性:

 

 

2.段落标签

语法:<p></p>

属性:

  • Align:取值 left center fight

 

3.标题标签

语法:<h1></h1>

 

属性:

  • Align:取值 left center fight

4.预定义标签:保留原有的空格和换行

语法:<pre></pre>

 

5.盒子标签:配合css样式一起使用,属于块标签

语法:<div></div>

 

6.<span>标签:配合css样式一起使用,属于行内标签

  • 块标签:独占一行
  • 行内标签:不属于独占一行

注意:块标签内含有行内标签!!!

列表

无序列表:若干个相似内容进行排列,无先后顺序;

语法:<ul><li></li></ul>

 

属性:

Type 类型:设置列表前面的符号样式 取值circle(空心圆) disc(默认) square(方块)

有序列表:若干个相似内容进行排列,有先后顺序;

语法:<ol><li><li><ol>

自定义列表:

语法:<dl><dt></dt><dd></dd></dl>

 

空格 &nbsp;
版权 &copy;
< &lt;
> &gt;
&yen;

特殊符号

 

 

 

 

 

 

图片标签

语法:<img src="images/1.jpg" alt="HTML5常用标签与属性" alt="其他" width="300" height="200" border="1" hspace="100" vspace="100">

 

Src 图片地址
Alt 图片描述
 height 图片高度
Height 图片高度
Border 图片边框
Hspace 图片和内容左右距离
Vspace 图片和内容上下距离

 

 

 

 

 

HTML5常用标签与属性

 

 

 

表格标签

语法:
<table border="1" bgcolor="red" width="800" height="400" align="center" cellpadding="5" cellspacing="20" background="images/1.jpg">

 

 

Width 表格宽度
Height 表格高度 不推荐
Border 表格边框
Align (left center right) 表格对齐方式
Cellpadding 内容与单元格距离,默认为2px
Cellspacing 单元格与单元格的距离,默认为2px
Bgcolor 表格的背景颜色
Background 表格的背景图片,比背景颜色级别高
Rules=”all” 合并边框线,不推荐
Bordercolor 边框线颜色,不推荐

 

行的属性:

语法:<tr height="500" bgcolor="green" align="center" valign="bottom" background="images/3.ico">

 

Height 行的高度
Bgcolor 行的颜色
Background 行的背景图片
Align (left center right) 行的水平对齐方式
Valign (top middle bottom) 行的垂直对齐方式

 

单元格的属性:

语法:<td width="200" height="500" bgcolor="$fffccc" align="center" valign="bottom" background="images/1.jpg">

 

 

Bgcolor 单元格的颜色
Background 单元格的背景图片
Width 单元格的宽度
Height 单元格的高度
Align (left center right) 单元格的水平对齐
Valign (top middle bottom) 单元格的垂直对齐

 

表格的扩充

合并单元格

 

 

  • 横向合并:colspan
    语法:<td colspan=”3”></td>
  • 纵向合并:rowspan
    语法:<td rowspan=”3”></td>

链接标签

语法:<a href="http://baidu.com" target="_tanlk">百度</a>

 

属性:

Href 链接地址
Target (_blank 在新窗口打开  _self在原窗口打开) 窗口打开方式
Name 定义锚点名称

属性值:

绝对地址 <a href="https://www.xiaodefa.com">晓得伐网</a>
本地地址 <a href="file:///f:Web/HTML/images/1.jpg">图片</a>
相对地址 <a href="images/3.ico">ICO</a>
<a href="../PHP/1.txt">txt</a>
下载链接 <a href="../php/1.exe">exe</a>
邮箱链接 <a href="mailto:gk0616@live.cn">高远清</a>
空连接 <a href="#">空连接</a>
Javascript链接 <a href="javascript:windows.close()">关闭</a>
锚点链接 <a name="锚点名称"></a>

<a href="#锚点名称">内容</a>

 

 

表单标签

语法:<form action="xx.php" method="post" name=”username”></form>

 

属性:

  • name 表单的名称识别
    • <form name="top"></form>
  • action 对数据进行处理
    • <form action="xx.php"></form>处理数据的程序为
  • method 对表单中的数据提交到服务器端
    • <form action="xx.php" method="get"></form>
      1. 地址栏明文传输,再传给文件处理程序
      2. 不能传递大量数据,每次只能传递1024字节
      3. 不能上传附件
    • <form action="xx.php" method="post"></form>
      1. 数据直接传给文件处理程序
      2. 可以传递海量数据
      3. 能上传附件

 

控件:

  • 单行文本框

语法:<input type="text" name="username" size="100" maxlength="10">

 

属性:

Name 文本框名称
Size 文本框宽度,字符为单位
Maxlength 文本框最大能输入多少字符
Value 文本框初始值

 

  • 密码框

语法:<input type="password" name="password_" size="10" maxlength="10" value="输入密码" readonly="redonly" disabled="disabled">

 

属性:

Name 密码框名称
Size 密码框宽度,字符为单位
Maxlength 密码框最大能输入多少字符
Value 密码框初始值
Readonly 密码框只读属性,只能选中,不能修改
Disabled 密码框禁止属性,不能选中,不能修改

 

  • 单选按钮

语法:

<input type="radio" name="sex" value="nan">男

<input type="radio" name="sex" value="nvv">女

 

属性:

Name 单选按钮 组的识别名称
Value 单选按钮 组的初始值,提交给程序看
Type=”radio” 单选按钮的属性值

 

  • 复选框

语法:

<input type="checkbox" name="game" value="shangwang" checked="checked">上网

<input type="checkbox" name="game" value="youxi" checked="checked">游戏

<input type="checkbox" name="game" value="shuijiao">睡觉

 

属性:

 

Name 复选框 组的识别名称
Value 复选框 组的初始值,提交给程序看的
Checked 预选选择
Type=”checkbox” 复选款的属性值

 

  • 多行文本框

语法:

<textarea name="liuyan" id="no" cols="30" rows="10">请输入流言内容</textarea>

 

属性:

Name 多行文本框的名称
Id Id名称
Cols 多行文本框 一行多少字符
Rows 多行文本框 显示多少行数
textarea 标签

 

  • 下拉列表

语法:

<select name="city" id="city">

<option value="bj">北京</option>

<option value="sh">上海</option>

<option value="tj">天津</option>

</select>

 

属性:

Name 下拉列表名称
Option value 下拉列表选项
<Select><option></select></option> 下拉列表标签

 

  • 隐藏域

语法:<input type="hidden" name="id12">

 

属性:

Name 隐藏域 的名称

 

  • 文件域

语法:<input type="file" name="file_name">

 

属性:

Name 文件域 的名称

 

 

  • 按钮
    • 提交按钮:<input type="submit" value="提交">
  • 图片按钮:<input type="image" src="images/3.ico">
  • 重置按钮:<input type="reset" value="重置">
  • 其他按钮:<input type="button" value="普通按钮">