文章目录

前言
一、表格
二、列表
三、图片
四、文字
五、表单
六、h5新增特性
- 1.语义化标签
- 2.表单新增input属性
- 3.datalist
- 4.filedset
- 5.mark标记标签
- 6.多媒体标签
- 7.度量衡/进度条
总结

前言

以下内容包括表格、列表、img、文字、表单以及h5新增特性

一、表格

table表格

border增加边框

cellspacing盒子与边框的距离

cellpadding改变盒子的内边框，改变表格的大小,单元格间隙

caption表格标题

表格结构：

thead表头

tboday表体

tfoot表尾

tr：table rower行

td ：table clower列

rowspan合并列，注释

colspan合并行，注释

<table border="1px" cellspacing="0" cellpadding="35px"><caption>购物车</caption><tr><!-- 表头td改为th --><td rowspan="2">名称</td><td colspan="2" style="text-align:center ;">日期</td><!-- <td>日期</td> --><td rowspan="2">小计</td></tr><tr><!-- <td>名称</td> --><td>重量</td><td>单价</td><!-- <td>小计</td> --></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td><td>单元格</td><td>单元格</td></tr><!-- td该尾tf --><td colspan="3" style="text-align: center;">总价</td><!-- <td>总价</td> --><!-- <td>总价</td> --><td>价格</td></tr></table>

二、列表

ol--li有序列表

ul--li无序列表（常用）

dl--dd--dt自定义列表

<!-- 无序列表 -->
<ol style="list-style: none;"><li>我是1</li><li>我是2</li><li>我是3</li>
</ol>
<!-- 有序列表 -->
<ul><li>我是1</li><li>我是2</li><li>我是3</li>
</ul>
<!-- 自定义列表 -->
<dl><dd>tb1<dt>w1</dt><dt>w2</dt><dt>w3</dt></dd><dd>tb2</dd>
</dl>

三、图片

img图片标签
src:图片路径地址
alt：图片加载失败提示
width/height:只给一条属性时，另一条属性也会给相同值

<a href=""></a><img src="../index/img/sn.png" alt="文本提示" width="200px"><a href="https://www.baidu.com"><img src="./../ED88461B707481C6A154D04E7555319A.png" alt=""></a>

<base href=".././111"><!-- base中herf:全局路径，会影响所有的路径地址 -->

四、文字

    <i>倾斜文字</i><em>倾斜文字</em><b>加粗文字</b><strong>加粗文字</strong><u>下划线文字</u><ins>下划线文字</ins><s>删除线文字</s><del>删除线文字</del>

五、表单

form表单标签

action跳转地址url或接口

提交方式：post更安全,需询问情况 get更快，见人就发

    <!-- 表单 --><form action="./1_表格.html">账户<input type="text" name="lufang">密码<input type="password" name="123456"><!-- label选中文字达到选择框功能(for绑定id) --><label for="one"><input type="radio" name="1" id="one">变大</label><input type="radio" name="1">变小<!--多选框--><input type="checkbox">苹果<input type="checkbox">香蕉<input type="checkbox">西瓜<!-- 文件提交 --><input type="file"><!-- 类似提交按钮 --><input type="image"><!-- 普通按钮 --><input type="button" value="按钮"><!-- 提交按钮 --><input type="submit"><!-- 重置 --><input type="reset"><!-- 下拉选择 --><select><option value="">成都</option><option value="">重庆</option><option value="">深圳</option></select><!-- textarea文本输入框中    resize是否支持下拉拖拽 --><textarea name="" id="" cols="30" rows="10" style="resize:none;"></textarea></form>

表单练习

<form action=""><span style="font-size: 30px;">注册新用户</span><span>我已经注册，现在登录</span><hr><br><input type="text" placeholder="验证码" autofocus="" required=""><input type="image"><br><input type="text" placeholder="手机号" autofocus="" required=""><input type="button" value="获取验证码"><br><input type="text" placeholder="手机验证码" size="33" autofocus="" required=""><br><input type="text" placeholder="设置密码" size="33" autofocus="" required=""><br><input type="text" placeholder="再次输入密码" size="33" autofocus="" required=""><br><input type="checkbox" required="">请阅读<a href="../2_特殊字符.html" style="color: red;">VANCL客诚品服务条款</a><br><input type="button" value="立即注册" width="50" height="15">
</form>

六、h5新增特性

h5新增特性：语义化标签、表单新增input属性、数据列表datalist、filedset、mark标记标签、多媒体标签、度量衡meter/progress进度条

h5：写网页、游戏、小程序、app、多终端

1.语义化标签

语义化标签，类似于div

    <header>头部</header><nav>导航栏</nav><aside>侧边</aside><footer>底部</footer><section>区域</section><article>文章</article>

2.新增input type属性

<form action="./2_特殊字符.html"><!-- 新增input type属性值 -->自由拖动滑块<input type="range">年月日 <input type="date">取色器<input type="color">搜索框<input type="search">url<input type="url">数字<input type="number">时分<input type="time">年月<input type="month">星期<input type="week">邮箱<input type="email">显示<input type="show">隐藏<input type="hidden">多文件上传<input type="text" multiple=""><input type="text" placeholder="用户提示文字输入" autofocus="默认输入框" size="10"><!-- autocomplete首先需要提交按钮,表单必须给name值,表示记录之前输入的信息,完成自动输入功能 -->自动完成记录<input type="autocomplete">必填框<input type="required">快速获取焦点<input type="accesskey">禁止<input type="disabled"></form>

3.数据列表datalist

<!-- datalist定义选项列表与Input结合使用 -->
<input type="text" list="课程">
<datalist id="课程"><option value=" ">语文</option><option value=" ">数学</option><option value=" ">英语</option>
</datalist>

4.fieldset

<!-- fieldset可将表单内的相关元素分组打包,与legend搭配使用 -->
<fieldset><!-- 外边框的标题 --><legend>登录页面</legend>用户名<input type="text"><br><br>密码<input type="password">
</fieldset>

5.mark标记

<!-- mark标签用于定义带有记号的文本,在需要突出显示文本时可使用 -->Lorem ipsum <mark>dolor</mark> sit amet, consectetur adipisicing elit. Dolor error quos ut tempora porro at sapientelaboriosam neque? Quas laudantium porro laboriosam velit quibusdam reiciendis possimus. Accusantium, mollitia! Est,magni?

6.多媒体标签

    <embed src="" type="" width="" height=""><!-- source元素可以链接不同的音频文件,浏览器将使用第一个支持的音频文件，播放音频MP3 --><source src="" type=""></source><audio src="">您的浏览器不支持h5</audio><!-- video元素提供播放/暂停和音量控件来控制视频,播放视频Mp4 --><video src="" width="" height=""></video>

video常见属性:

autopaly自动播放

controls播放控件

muted静音

loop重新播放

preload预先加载视频

poter加载等待画面

7.度量衡

meter:定义度量衡,仅用于已知最大值和最小值的度量。

比如:磁盘使用情况,查询结果的相关性等.不能当作进度条使用

当值处于最小值和最大值之间时值显示绿色

当值小于最小值时不显示,当值大于最大值时显示绿色全满

当值处于最低值和最高值之间时值显示绿色,当值低于最低值或高于最高值时显示橙色

注意:IE浏览器不支持meter

progress:定义运行中的任务进度,与JavaScript结合使用,不能作为度量值使用

    <meter min="4" max="10" value="9" low="6" high="8"></meter>

总结

以上就是今天要讲的内容。

html标签：表格、列表、图片、文字、表单、以及h5新增特性相关推荐

html 下拉图片列表,图片、表单、下拉选项
图片 src 图片的地址 alt 图片的代替性文字 title 鼠标悬浮时的提示性文字 usemap 定义客服端图像映射图像映射 title="下载"> shape 形状 ...
Bootstrap之表格，按钮，表单和图片的样式
Bootstrap之表格,按钮,表单和图片的样式本文中,都是结合本人的学习Bootstrap时所做的练习,来理解通过内置的 CSS 定义,Bootstrap的表格,按钮,表单和图片是如何来显示各种丰 ...
html语言创建无序列表的标记是6,HTML-表格-列表-结构标记-表单
1.表格 1.表格语法 1.标记 1.表格 2.行 --table row 3.单元格/列 --table data 练习: 1.创建一个4行4列的表格 2.在table标记中嵌套tr 3.在tr中嵌 ...
Java使用FreeMarker自动生成Word文档（带图片和表单）
Java使用FreeMarker自动生成Word文档(带图片和表单) 1 背景 2 目标效果 3 创建Word模板 3.1 创建模板文档 3.2 转换模板文档 3.3 处理模板文档中的占位符 3.4 ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
小程序提交表单mysql_GitHub - kun19911227/minipro: 微信小程序提交带图片的表单
minipro 微信小程序提交带图片的表单目录说明 upload_images ├── pages │ ├── upload_info 提交表单 │ └── display_info 信息展示 ├─ ...
java自定义表单_JSP实现用于自动生成表单标签html代码的自定义表单标签
本文实例讲述了JSP实现用于自动生成表单标签HTML代码的自定义表单标签.分享给大家供大家参考.具体如下: 这个是自己写的一个简单的JSP表单标签,用于自动生成checkBox,select,radi ...
表单在线生成 html代码,JSP实现用于自动生成表单标签html代码的自定义表单标签...
本文实例讲述了JSP实现用于自动生成表单标签html代码的自定义表单标签.分享给大家供大家参考.具体如下: 这个是自己写的一个简单的JSP表单标签,用于自动生成checkbox,select,radi ...

html标签：表格、列表、图片、文字、表单、以及h5新增特性