HTML的认识(二)

多媒体标签

图片：img(重点)
- src：图片资源位置
- width：宽度
- height：高度，单独设置一个时，另一个会等比缩放，若同时设置可能会拉伸或压缩
- title：光标放上去的提示信息，图片加载失败是也会显示。
音频(audio)
- src：指定资源
- controls：显示控制条(值为controls，可以不写值)
- loop：循环播放(值为loop，可以不写值)
- autoplay：自动播放(值为autoplay，可以不写值)
视频(video)
- 音频的属性视频都有，功能也一样
- 多出来关于尺寸的属性：width、height
- 单独设置会进行等比缩放，同时设置时会出现留白

表格(table)

说明：就是类似于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：表格标题，通常用于描述表格的作用

分帧(iframe)

说明：就是一个页面中包含另一个页面
属性：
- src：加载的资源地址
- width：宽度
- height：高度
- frameborder：是否显示边框(1/0)
- scrolling：滚动条控制(yes、no、auto)
- name：标识窗口的名字，可以用于a标签的打开目标地址

分帧(frameset)

说明：替代body定义网页框架，而且可以根据需要指定尺寸或比例进行划分
属性：
- rows：垂直方向的尺寸划分，可以使用像素、也可以使用百分比，*表示其他
- cols：水平方向的尺寸划分
- noresize：禁止调整尺寸
- frameborder：是否显示边框
- border：边框宽度
- bordercolor：边框颜色
frame：frameset中的一帧内容，也就是一个页面
noframes：浏览器不支持frameset时使用，兼容设置显示内容

表单(form)(非常重要)

说明：服务器收集用户信息，如：登录、注册等场景
form：表单，所有提交的数据都需要放在该标签中
- action：指定提交地址，默认提交到当前地址
- method：请求方法，get、post
  - get：提交的数据会出现在URL中
  - post：提交的数据不会出现在URL中，经常用于登录、注册、上传文件等

<form action="提交地址" method="get/post">
	<!--写input输入框,表单最重要的组成部分-->
</from>

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"

用户名:<input type='text' name='username' placeholder='占位符' size='宽度'
		maxlength='8限制最大输入字符个数' readonly ='只读' disabled='禁用'/> <br />
密码:<input type='password' name='passwd'  /> <br />
性别:<input type='radio' name='sex' value='0' id='nan' /><label for='nan'>男</label> <input 
	type='radio' name='sex' value='1' id='nv' checked /><label for='nv'>女</label><br />
爱好:<input  type='checkbox' name='like' value='1' />音乐 
	<input  type='checkbox' name='like' value='2' />NBA
	<input  type='checkbox' name='like' value='3' />运动
	<input  type='checkbox' name='like' value='4' />阅读 <br />

select：下拉选择框
- 属性name需要设置
- 属性size可以控制显示的选项个数
- 每一个选项通过option标签体现，必须指定其value属性，默认选中使用selected

籍贯:	<select name='from' size='3'>
			<option value='sh'>上海</option>
			<option value='bj'>北京</option>
			<option value='ly' selected>广州</option>
			<option value='zz'>深圳</option>
		</select>

textarea：文本域，多行文本
- 说明：input是单行文本，textarea是多行文本
- 属性：
  - rows：设置行数
  - cols：设置列数
- 注意：不要在输入区域书写任何多余的内容
表单提交
- <input type="submit" />，标准的提交按钮，可以提交按钮本身的值
- <button></button>，可以提交，但是不能提价按钮的值
- <input type="button" />，长的跟按钮一样，但是不能提交，后面可以结合JS使用

head标签

说明：一般存放对网页进行说明的内容，不会显示在页面上

示例：

<!--设置字符集-->
<meta charset="utf-8" />
<!--设置标题-->
<title>表单内容</title>
<!--设置网页关键字-->
<meta name="keywords" content="内容" />
<!--设置网页描述-->
<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">

无意义标签

说明：虽然这些标签都没有特殊含义，但是可以结合后面的CSS/JS进行使用
常用：div、header、section、footer、span

取消的DTD

说明：文档类型定义，帮助浏览器更好的识别页面
H5统一使用：<!DOCTYPE html>

在html的全局架构标签添加

多媒体标签

表格(table)

分帧(iframe)

分帧(frameset)

表单(form)(非常重要)

head标签

无意义标签

取消的DTD

猜你喜欢