html基础2

发布时间:2023年12月23日

视频video

<video 
       src="视频的路径"
       controls="控制播放、暂停、音量等"
       autoplay="自动播放"
       loop="循环播放"
       width="视频播放器的宽度"
       height="视频播放器的高度">
</video>

还有做浏览器兼容的方式:

<video  controls autoplay loop width="500" height="500">
    <source src="video/hhxd.mp4" type="video/mp4"></source>
	<source src="video/ghsy.ogg" type="audio/ogg"></source>
flash支持
当所有不支持时,就提供一个下载路径。
</video>

音频audio

<audio 
       src=”音频的路径”
       controls=”控制播放、暂停、音量等”
       autoplay=”自动播放”
       loop=”循环播放”>
</audio>

兼容类似视频方式

页面布局

  1. div : 单纯的容器
  2. header: 头部
  3. footer: 页脚
  4. nav : 导航
  5. section : 一块单独的区域
  6. article : 一篇独立的文章
  7. aside : 侧边栏
内联框架**iframe
<iframe 
        src=”显示的地址”
        width=”内联框架的宽度”
        height= 内联框架的高度”
        frameborder= 内联框架的边框”
        scrolling=”滚动条no yes”>
</iframe>

注意:

结合超级链接的标签如:

<a href="http://www.baidu.com" target="内联框架的name">百度</a>
<iframe src=”” name=”内联框架的name”  ></iframe>

表单元素

<form action="提交地址" method="提交方式">
  表单元素
</form>
表单元素的一般语法:
	<input type="元素类型" name="元素名称" />

特殊的:
	<select name="">
		<option value="选项的值">选项的文本</option>
	</select>
<textarea rows="行数" cols="列数" ></textarea>

1、 用来填的

  • text: 单行文本框

  • password: 密码输入框

  • textarea: 多行文本框

  • email: 邮件地址输入框

  • url: 网址输入框

  • number: 数字输入框

  • 属性:

    • size: 可控制宽度
    • maxlength: 可控制最大输入字符数
    • max(最大值)、min(最小值)只对number有效

2、 用来选的

  • checkbox: 多选框

  • radio: 单选框

  • select: 下拉列表

  • 属性:

    • checked: 用于默认选择checkbox与radio
    • selected: 用于默认选择select

3、 用来点的

  • submit: 提交按钮
  • reset: 重置按钮
  • button: 一般按钮,没有功能
  • image: 图片按钮,功能上和submit一样

4、 其他

  • hidden: 隐藏域,作用不明
  • file: 文件域,用于文件上传

设置表单要注意什么:

  1. 一组radio应该设置name,这样才能互斥
  2. 除按钮外,其他元素都应该设置name属性
  3. 用于选择元素都应该设置value

表单元素的只读和隐藏

  1. readonly 只读
  2. disabled 禁用

使用label提高用户体

label又称为“标注”用于扩大表单元素的可操作区域,点了label就等价于点了相应的表单元素。

方式一:

<label for="表单元素的id">文本</label

方式二:

<label>
文本
<input />
</label>

使用HTML5内置的表单验证

1、 用户提示placeholder

<input type="password" placeholder="请输入用户密码" /

2、 实现必填信息required

<input type="text" required="required" />

3、 使用正则表达式验证pattern,实现一些复杂的文本信息验证

<input type="text" pattern="[a-zA-Z]{4,16}"> //必须由4到16位字母组成
<input type="text" pattern="1[39][0-9]{9}"> //必须由13XXXXXXXX开头或者19xxxxxxxxxx

pattern="[-\w\u4E00-\u9FA5]{4,10}" //可以是-数字字母下划线或中组成

补充:

// 日期选择器
<input type="date" />
// 下拉列表
<select>
  <option value="1980">1980<option>
</select>
文章来源:https://blog.csdn.net/qq_64646478/article/details/135166598
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。