html form 居中_HTML 基础(2)

表格标签

基本使用

• table 标签: 表示整个表格

• tr: 表示表格的一行

• td: 表示一个单元格

• th: 表示表头单元格. 会居中加粗

• thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)

• tbody: 表格得到主体区域.

table 包含 tr , tr 包含 td 或者 th.

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.

这些属性都要放到 table 标签中.

• align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)

• border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.

• cellpadding: 内容距离边框的距离, 默认 1 像素

• cellspacing: 单元格之间的距离. 默认为 2 像素

• width / height: 设置尺寸.

注意, 这几个属性, vscode 都提示不出来.

 <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">    <tr>        <td>姓名td>        <td>性别td>        <td>年龄td>    tr>    <tr>        <td>张三td>        <td>男td>        <td>10td>    tr>    <tr>        <td>李四td>        <td>女td>        <td>11td>    tr>table>

合并单元格

• 跨行合并: rowspan="n"

• 跨列合并: colspan="n"

步骤

1. 先确定跨行还是跨列

2. 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)

3. 删除的多余的单元格

 <table align="center" border="10" cellpadding="20" cellspacing="0" width="500" height="500">    <tr>        <td>姓名td>        <td>性别td>        <td>年龄td>    tr>    <tr>        <td>张三td>        <td colspan="2">男td>    tr>    <tr>        <td>李四td>        <td>女td>        <td>11td>    tr>table>

列表标签

主要使用来布局的. 整齐好看.

• 无序列表[重要]  ul li, .

• 有序列表[用的不多] ol li

• 自定义列表[重要] dl(总标签) dt(小标题) dd(围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.

自定义列表(参考小米官网下方)

注意

• 元素之间是并列关系

• ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd

• li 中可以放其他标签.

• 列表带有自己的样式, 可以使用 CSS 来修改. (例如前面的小圆点都会去掉)

 <h3>无序列表h3><ul>    <li>咬人猫li>    <li>兔总裁li>    <li>阿叶君li>ul><h3>有序列表h3><ol>    <li>咬人猫li>    <li>兔总裁li>    <li>阿叶君li>ol><h3>自定义列表h3><dl>    <dt>我的老婆们dt>    <dd>咬人猫dd>    <dd>兔总裁dd>    <dd>阿叶君dd>dl>

表单标签

表单是让用户输入信息的重要途径.

分成两个部分:

• 表单域: 包含表单元素的区域. 重点是 form 标签.

• 表单控件: 输入框, 提交按钮等. 重点是 input 标签.

form 标签

... [form 的内容]

描述了要把数据按照什么方式, 提交到哪个页面中.

关于 form 需要结合 服务器 & 网络编程 来进一步理解. 后面再详细研究.

input 标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

• type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.

• name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.

• value: input 中的默认值.

• checked: 默认被选中. (用于单选按钮和多选按钮)

• maxlength: 设定最大长度.

1) 文本框

2) 密码框

3) 单选框

性别: 男 女

注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果.

4) 复选框

爱好: 吃饭  睡觉  打游戏

5) 普通按钮

当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究).

6) 提交按钮

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送

7) 清空按钮

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.

8) 选择文件

点击选择文件, 会弹出对话框, 选择文件.

label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.

• for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

男 

select 标签

下拉菜单

• option 中定义 selected="selected" 表示默认选中.

北京上海

注意! 可以给的第一个选项, 作为默认选项

--请选择年份--19911992199319941995

textarea 标签

文本域中的内容, 就是默认内容, 注意, 空格也会有影响.

rows 和 cols 也都不会直接使用, 都是用 css 来改的.

无语义标签: div & span

div 标签, division 的缩写, 含义是 分割

span 标签, 含义是跨度

就是两个盒子. 用于网页布局

• div 是独占一行的,  是一个大盒子.

• span 不独占一行, 是一个小盒子.

咬人猫咬人猫咬人猫

兔总裁兔总裁兔总裁

阿叶君阿叶君阿叶君

综合案例: 填写简历信息

提示:

• 使用表格进行整体布局

• 使用各种 input 标签 + textarea 实现页面中的输入控件

• input 标签搭配合适的 label 提升用户体验.

• 针对下拉框这种选项较多的, 使用 Emmet 快捷键提高输入效率.

• 图标图片可以去 https://www.iconfont.cn/ 找

Emmet 快捷键

• 快速输入标签

input[tab]

• 快速输入多个标签

div*3[tab]

• 标签带id

div#sex[tab]

• 标签带类名

div.sex[tab]

• 标签带子元素

ul>li*3[tab]

• 标签带兄弟元素

span+span

• 标签带内容

div{hello}

• 标签带内容(带编号)

div{$.hello}

除此之外还有很多, 大家可以在使用中自己积累.

HTML 特殊字符

空格:

小于号: >

大于号: <

按位与: &

参考内容:

https://www.jb51.net/onlineread/htmlchar.htm

HTML5 新增标签

语义化标签

div 没有语义. 对于搜索引擎来说没有意义. 为了让搜索引擎能够更好的识别和分析页面(SEO 优化), HTML 引入了更多的 "语义化" 标签.

• header: 头部

• nav: 导航

• article: 内容

• section: 某个区域

• aside: 侧边栏

• footer: 尾部

这些标签其实本质上都和 div 一样(对于前端开发来说).

但是对于搜索引擎来说, 见到 header 和 article 这种标签就会重点进行解析,  而 footer 这种标签就可以适当忽略.

在 IE9 中, 需要手动把这些元素转成块级元素. (关于块级元素, 后面再详细解释)

在移动端更常用这些标签.

    我是头部
    我是导航栏
        我是侧边栏
        我是内容
    我是底部

多媒体标签

视频 video

只支持三种格式:

• mp4

• webm

• ogg

最好使用 mp4 格式, 所有浏览器支持的最好.

注意, chrome 上使用 autoplay 无法自动播放, 这个是浏览器故意这样设置的.

要想支持就需要使用 muted="muted" 静音播放.

另外, 这里还有个 poster 属性, 可以指定封面图片.

兼容性写法

表示先尝试播放 ogg, 如果不支持尝试 mp4, 如果还不支持, 则显示 "你的浏览器不支持 video 标签"

音频 audio

简单实例

建议使用 mp3 格式, 兼容性最好.

支持的属性

注意, 此处的 autoplay 也是被 chrome 自动禁用了. (防止用户被突然吓一跳)

需要使用 JS 来解决这个问题.

新增 input 类型

• email

• url

• number

• date

• search

• color

必须使用 form 标签, 点击提交的时候才会进行校验.

手机端这些表单的样式不太一样. 但是效果是一样的.

email: url: tel: number: date: color: search:

新增表单属性

• required

• placeholder[重点]

• autofocus: 加载页面让输入框自动获取焦点.

• autocomplete: 默认开启. 一般都会关闭. 当表单中有name属性并且提交过的, 才会生效.

• multiple: 搭配文件表单使用, 允许选中多个文件.

注意, 这些属性必须放到 form 标签中, 在点击提交时才能生效.

 <form action="#">        <input type="text" placeholder="请输入姓名">        <input type="text" autocomplete="off" name="username">        <input type="text" autofocus="autofocus">form>

小结

HTML 只是描述了页面的骨架结构.

使用 CSS 可以针对页面进行进一步美化.