前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML/CSS 第二章

HTML/CSS 第二章

作者头像
用户3461357
发布2019-08-02 15:00:25
1.2K0
发布2019-08-02 15:00:25
举报
文章被收录于专栏:web前端基地web前端基地

学习目标

  1. 表格的创建和使用
  2. 常见表单的使用
  3. 了解HTML5新增的标签及其表单属性

创建表格

代码语言:javascript
复制
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
  1. 表格至少有三个基本的标签构成 table 代表一个表格 tr代表行 td代表单元格
  2. tr必须嵌套在table标签中,td必须嵌套在tr或者th中
  3. 有几个单元格就代表有几列

表格属性

代码语言:javascript
复制
width  表格的宽度 (了解)
height 表格的高度 (了解)
border 表格的边框 (了解)
align  表格的对齐方式 (了解)
cellspacing 单元格与单元格的间距
cellpadding	单元格与单元格内容的间距

表格的表头标签

在合适的位置将td替换成th即可 th标签相对td来说更有语义性 并且会将内部的文字加粗且居中

代码语言:javascript
复制
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>

表格的结构

代码语言:javascript
复制
<thead>
<tr>
<th>姓名</th>
<th>年纪</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>小强</td>
<td>18</td>
<td>女</td>
</tr>
</tbody>

表格的结构不是一定需要的,但是添加上表格的结构会使表格的语义更明确

合并单元格

跨行合并 rowspan 上下合并 将rowspan写在上面的单元格上 跨列合并 colspan 左右合并 将colspan写在左边的单元格上

需要合并几个 这个值就是几 一旦合并了多余的单元格需要删掉多余的单元格

表单

作用:收集用户信息发送给后台 三大组成部分:

  1. 表单域 (将内部包含的表单信息都收集起来发送给后台)
  2. 提示文本(提示用户当前表单的输入内容)
  3. 表单 (真正用来收集用户信息)

表单的分类

代码语言:javascript
复制
	<input type="">
type的取值:
text 单行文本输入框
password 密码框
	radio 单选框(在多个里面选择一个) 单选框要生效必须具备name属性 并且同一种类型的单选框的name取值必须一样
	checkbox 复选框(在多个里面选择某几个)
	button 普通按钮
	file 用户上传控件
	submit 提交按钮

其他表单的补充

代码语言:javascript
复制
textarea 多行文本输入框
select 下拉菜单

表单补充

代码语言:javascript
复制
radio和checkbox 默认选中项  checked
select框的默认选中项 selected
label标签的使用

表单域

代码语言:javascript
复制
<form action=""></form>

action 提交的后台地址
method 提交的方法

H5新增的标签及其表单属性

H5新增的标签

代码语言:javascript
复制
header,nav,section,footer,aside,article

这些新增的标签不会带来任何视觉效果的改变,它的作用仅是增加了语义性

header 表示header里面包裹的东西是网站的头部区域

nav 表示nav里面包裹的东西是网站的导航

section 表示里面包裹的东西是网页的某一个模块

footet 表示footer标签里面包裹的东西是网页的页脚

aside 表示aside标签里面包裹的东西是网页的侧边栏

article 表示article标签里面包裹的东西是网页的文章页

详细请查阅文档

H5新增的表单新属性

  1. placeholder 占位文本
  2. autofocus 自动获取焦点
  3. autocomplete 自动补全
  4. required 自动验证表单

H5新增的表单

代码语言:javascript
复制
	<input type="range">    滑块
	<input type="date">		日期控件
	<input type="number">	唤醒数字键盘

详细的请查阅文档

多媒体标签

视频

网页中插入视频有两种方法

  1. 没有兼容性的 将视频文件上传到第三方网站获取其分享代码放到自己的页面中即可
    • 优点:没有兼容性
    • 缺点:有广告植入
  2. 使用H5新增的video方法
代码语言:javascript
复制
<video src="视频路径">
	
</video>
  • 优点:没有广告
  • 缺点:有兼容性,一般运用在手机端

video标签的常用属性

  1. autoplay 自动播放
  2. controls 播放控件
  3. loop 循环播放

video的格式支持 ogg,MP4,webm 不同的浏览器支持的格式不一样,所以出现了一种兼容写法:前提是准备三种格式的视频文件

代码语言:javascript
复制
<video autoplay>
<source src="视频1.ogg">
<source src="视频1.mp4">
<source src="视频1.webm">
<a href="#">你的浏览器不支持video,点击升级吧</a>
</video>

浏览器会从上到下依次去读,在这个过程中,只要读到自己识别的视频文件就直接播放这个视频文件,并且不会再往后继续读取 实测:目前的主流浏览器对Mp4的支持都比较好!!

音频

音频的使用和视频的使用基本一致

代码语言:javascript
复制
<audio>
<source src="音频1.ogg">
<source src="音频1.mp3">
<source src="音频1.webm">
<a href="#">你的浏览器不支持audio,点击升级吧</a>
</audio>

audio标签的常用属性 1.autoplay 自动播放 2.controls 播放控件 3.loop 循环播放

知识补充

字符集的设置

字符集的核心点就是如果设置了以什么字符集进行读取,那么在保存的时候也需要设置成对应的字符集

utf-8 收录了全世界所有国家的语言文字 gbk 收录的是汉字

utf-8 > gbk 所以查询来说的话gbk的查询和存储都小于utf-8 但是现在国际主流都是utf-8,所以为了后期的考虑,都用utf-8

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-07-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 web前端基地 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 学习目标
  • 创建表格
    • 表格属性
      • 表格的表头标签
        • 表格的结构
          • 合并单元格
          • 表单
            • 表单的分类
              • 其他表单的补充
                • 表单补充
                  • 表单域
                  • H5新增的标签及其表单属性
                    • H5新增的标签
                      • H5新增的表单新属性
                        • H5新增的表单
                          • 多媒体标签
                            • 视频
                            • 音频
                          • 知识补充
                            • 字符集的设置
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档