HTML5常用标签与属性

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=”其他” width=”300″ height=”200″ border=”1″ hspace=”100″ vspace=”100″>

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

表格标签

语法:
<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多行文本框的名称
IdId名称
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=”普通按钮”>

您可能还喜欢...