一、列表

1.无序列表

2.有序列表

3.定义列表

练习

二、表格

表格练习

三、表单

1、表单标签

2、表单域

文本框密码框

单选框：

复选框：

文本域：

下拉选择框

文本上传

3.按钮

一、列表

1.无序列表

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ul>

效果如下：

2.有序列表

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li>...
</ol>

效果如下：

3.定义列表

<dl><dt>术语</dt><dd>对术语的说明</dd>
</dl>

效果如下：

练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>音乐排行榜热门行动</title></head><body><h1>热门活动&emsp;&emsp;&emsp;&emsp;更多</h1><ul><li><img src="./images/2.png" /><p>推荐活动&nbsp;|&nbsp;原创音乐现金榜T榜</p></li><li><img src="./images/4.png" /><p>推荐节目&nbsp;|&nbsp;《TAlmusic》爆笑来袭</p></li><li><img src="./images/1.png" /><p>推荐歌单&nbsp;|&nbsp;继续宠爱张国荣</p></li><li><img src="./images/3.png" /><p>推荐活动&nbsp;|&nbsp;330金属音乐巡演&nbsp;成都小酒馆音乐空间</p></li></ul></body>
</html>

效果图

二、表格

<table border="1" cellspacing="0" cellpadding=""><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>18</td><td>男</td></tr>
</table>

属性：

border 边框

cellspacing: 代表格与格之间的距离

cellpadding: 代表内容距离格子四周的距离

bgcolor: 背景颜色

width/height：宽高

rules：

值：none 格的四条边都不显示

all 只显示格的四条边

rows 只显示格的上下边

cols 只显示格的左右边

效果如下：

姓名	年龄	性别
张三	18	男

<table border="1" cellspacing="0" width="200" height="200"><tr><td colspan="2">1-1</td><td>1-2</td><td rowspan="2">1-3</td></tr><tr><td rowspan="2">2-1</td><td colspan="2">2-2</td></tr><tr><td>3-1</td><td colspan="2">3-2</td></tr>
</table>

属性：

colspan水平合并

rowspan垂直合并

效果如下：

1-1		1-2	1-3
2-1	2-2
	3-1	3-2

表格练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>简历</title></head><body><table border="1"  cellpadding="9" width="700" height="850"><caption>简历</caption><tr><td colspan="5" bgcolor="gray" align="center">个人简介</td></tr><tr><td width="100">姓&emsp;&emsp;名</td><td width="150">王俊凯</td><td width="100">性&emsp;&emsp;别</td><td width="150">男</td><td rowspan="7" width="200"><img src="./images/timg.jpg" width="200"/></td></tr><tr><td>民&emsp;&emsp;族</td><td>汉</td><td>出生年月</td><td>1998.4</td></tr><tr><td>籍&emsp;&emsp;贯</td><td>北京市</td><td>婚姻状态</td><td>未婚</td></tr><tr><td>政治面貌</td><td>中共党员</td><td>毕业院校</td><td>家里蹲大学</td></tr><tr><td>学&emsp;&emsp;历</td><td>大学本科</td><td>求职意向</td><td>Web前端工程师</td></tr><tr><td>联系地址</td><td>北京市</td><td>联系电话</td><td>18388638832</td></tr><tr><td>邮&emsp;&emsp;箱</td><td>123@qq.com</td><td>目前状态</td><td>离职，随时到岗</td></tr><tr height="500"><td>工<br />作<br />技<br />能</td><td colspan="4"><ol><li>精通HTMI +CSS3构建各种页面样式</li><li>熟练便H过Javascrip完成各种页面交口</li><li>熟练使用JQuery)进行DOM操作，实现网页特效</li><li>熟练使用Vue、Vueruuler、 vueX全家桶项目开发，并有相关项目经验</li><li>热练便HBootStrap、ElementUl、 LayUI等前端框架</li><li>熟悉微信小程序的开发，并拥有相关开发经验</li><li>了解并掌握基木Echarts图表框架的使用</li><li>了解rcact框架，能够搭建基本框架</li><li>解PI IP、MySq|等后端语言</li><li>能使用PhotoShop基木功能，可以进行切图及页面所需图片优化</li></ol></td></tr><tr height="100"><td>自<br />我<br />评<br />价</td><td colspan="4"><p>热爱代码，个人学习能力强，乐于接受新事物，喜欢去追寻去发现; 逻辑思维能力较强，享受解决问题的乐趣，很享受发现问题和解决问题的过程;协同合作能力强，能很快的融入团体中;为人友善易相处，能很好的控制自己的情绪;</p></td></tr></table></body>
</html>

运行效果如下：

三、表单

1、表单标签

<form action="采集的数据提交的路径" method="采集的数据提交的方式get/post">
</form>

2、表单域

<input type="" name="" value="" placeholder="">

属性：.type 类型

type="text" 文本框

type="password" 密码框

type="radio" 单选框 name值必须保持一致圆的里面是点

type="checkbox" 复选框方的里面是对勾

type="submit" 提交按钮

type="reset" 重置按钮

type="button" 普通按钮

type="file" 文件上传按钮

name 名字给标签起的名字后端通过name获取用户所填内容

value 值输入的值用来接收用户所填内容，也可以设置默认值

maxlength 输入的最大字符数

size：文本框的长度

单选框与复选框默认被选中 checked 或 checked="checked"

文本框密码框

用户名：<input type="text" name="userName" value=""/>
<br><br>
密&emsp;码：<input type="password" name="pwd" value=""/>

单选框：

性&emsp;别：
<input type="radio" name="sex" value="1" checked/>男
<input type="radio" name="sex" value="0"/>女

复选框：

 爱&emsp;好：
<input type="checkbox" name="hobbys" value="1"/>打游戏
<input type="checkbox" name="hobbys" value="2"/>打篮球
<input type="checkbox" name="hobbys" value="3"/>听音乐

文本域：

<textarea placeholder="提醒文本"></textarea>

下拉选择框

<select><option value="1">郑州</option><option value="2" selected>开封</option><option value="3">洛阳</option>
</select>

文本上传

<input type="file" name=""/>
<!-- 多行文件上传 -->
<input type="file" name="" multiple>
<!-- multiple:多选 -->
<!-- lable：表单标注 -->

3.按钮

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="普通按钮" /><br><br><input type="image" src="./images/submit.jpg"/><br><br><button type="button">普通按钮</button><br><br><button type="reset">重置按钮</button><br><br><button type="submit">提交按钮</button></body>
</html>

[HTML]列表、表格、表单相关推荐

定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
(18)C#传智:HTML,属性,标签,元素,body,Font,A,列表,表格,表单,Div,Span,框架
比较简单,无事的跳过,直接w3c.school 一.HTML简介一个实例:右键查看源文件(标签,属性,内容...) HTML文档=网页 HTML超文本标记语言(Hyper ...
css文本,背景,动画和html列表,表格,表单总结
css文本标签的应用文本 text-shadow文本阴影:1px 2px 3px color 第1个长度值用来设置对象的阴影水平偏移值.可以为负值第2个长度值用来设置对象的阴影垂直偏移值.可以为负 ...
html语法中表格命令具备哪些属性,html 语法介绍标签及有关属性列表表格表单...
1.HTML简介 HTML是用来做网页 HTML:Herp Text MarkUp Language 超文本标记语言超文本:超:超链接包含超链接的文本标记语言: 标记:标签语言:制作网页的语言 ...
HTML基本结构标签列表表格表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
文章目录 HTML HTML基本结构网页的基本标签标题标签段落标签换行标签水平线字体样式标签 HTML注释和特殊符号图像标签常见的图片格式语法案例链接标签页面间链接语法锚链 ...
html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录 html如何 ...
第三章表格、列表和表单（黑马程序员课程笔记）
1.表格标签 1.2 表格的基本语法 1.3 表头单元格标签 1.4 表格属性 1.5 表格结构标签 1.6 合并单元格 2.列表 2.1 无序列表 2.2 有序列表 2.3 自定义列表 3.表单标 ...
js table 生成序号_el-table树形表格表单验证，js树形列表生成序号
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
js table 生成序号_el-table树形表格表单验证(列表生成序号)
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...

[HTML]列表、表格、表单

一、列表

1.无序列表

2.有序列表

3.定义列表

练习

二、表格

表格练习

三、表单

1、表单标签

2、表单域

文本框密码框

单选框：

复选框：

文本域：

下拉选择框

文本上传

3.按钮

[HTML]列表、表格、表单相关推荐

最新文章

热门文章