目录

3.12-2-html

目录

3.12-2 html

列表标签

一、有序列表

ol  ordery  lists  (简写:ol)

代码:

列表标签
  1. 跑车
  2. 手表
  1. 服装
  2. 化妆品

https://i-blog.csdnimg.cn/img_convert/0e9d8face18ab4cf039220cbdb639ce9.png

排序:

https://i-blog.csdnimg.cn/img_convert/17e8ae9142c980f3c6ab27a6beae283f.png

案例:

https://i-blog.csdnimg.cn/img_convert/6c399f54bd82ea66f1b7478702f3aab6.png

(2)快速生成有序列表

ol3>li2

https://i-blog.csdnimg.cn/img_convert/d6f93dd0bf9b7e2c5256561e7a25acb1.png

代码:

https://i-blog.csdnimg.cn/img_convert/634301d15c18e73c683561efafc5bd02.png

二、无序列表

ul  unordery  lists  (简写:ul)

代码

列表标签
  • 钞票
  • 服装
  • 化妆品
  • 手饰

https://i-blog.csdnimg.cn/img_convert/7cfbf41e11b0460a773ca38d94c4414a.png

案例:

https://i-blog.csdnimg.cn/img_convert/627c97772303cb3cee5f3d489ba97568.png

(2)快速生成无序列表

ul2>li3 按tab键联想

代码: ul2>li3

https://i-blog.csdnimg.cn/img_convert/5464b81aaac3dff82c0e32ca2b374899.png

列表标签

一、有序列表

ol  ordery  lists  (简写:ol)

代码:

列表标签
  1. 跑车
  2. 手表
  1. 服装
  2. 化妆品

https://i-blog.csdnimg.cn/img_convert/0e9d8face18ab4cf039220cbdb639ce9.png?wx_fmt=png&from=appmsg

排序:

https://i-blog.csdnimg.cn/img_convert/17e8ae9142c980f3c6ab27a6beae283f.png?wx_fmt=png&from=appmsg

案例:

https://i-blog.csdnimg.cn/img_convert/6c399f54bd82ea66f1b7478702f3aab6.png?wx_fmt=png&from=appmsg

(2)快速生成有序列表

ol3>li2

https://i-blog.csdnimg.cn/img_convert/d6f93dd0bf9b7e2c5256561e7a25acb1.png?wx_fmt=png&from=appmsg

代码:

https://i-blog.csdnimg.cn/img_convert/634301d15c18e73c683561efafc5bd02.png?wx_fmt=png&from=appmsg

二、无序列表

ul  unordery  lists  (简写:ul)

代码

列表标签
  • 钞票
  • 服装
  • 化妆品
  • 手饰

https://i-blog.csdnimg.cn/img_convert/7cfbf41e11b0460a773ca38d94c4414a.png?wx_fmt=png&from=appmsg

案例:

https://i-blog.csdnimg.cn/img_convert/627c97772303cb3cee5f3d489ba97568.png?wx_fmt=png&from=appmsg

(2)快速生成无序列表

ul2>li3 按tab键联想

代码: ul2>li3

https://i-blog.csdnimg.cn/img_convert/5464b81aaac3dff82c0e32ca2b374899.png?wx_fmt=png&from=appmsg

表格标签

(1)认识表中的一些常用单词

border 边距

align  格式  ‘ center’  对齐

cellspacing  单元格与单元格的距离

cellpadding 单元格与内容的距离

wedth  宽度

height  高度

tr 表示:行

th  表示:表头

td :表示列

(2)输入table  +回车

https://i-blog.csdnimg.cn/img_convert/91888dbea0cb7aa5cc0302844e621a06.png

表格的案例

https://i-blog.csdnimg.cn/img_convert/ffa84990b876ec6b80dc1a7c68c0ecef.png

代码:

表格标签
姓名性别分数
zs80
ls90

二、合并行

rowspan =行数   合并行

https://i-blog.csdnimg.cn/img_convert/2623d706e01dcdf002a1f2b060d16c2b.png

https://i-blog.csdnimg.cn/img_convert/937ebc511c8d32199511b6122f96de42.png

代码

表格标签
姓名性别分数
zs80
ls

三、合并列

colspan=“列数”

https://i-blog.csdnimg.cn/img_convert/6b917d0e4e5158fe881ca9988b170a5a.png

代码:

表格标签
姓名性别分数
zs80
ls

表单标签

一、表单单词介绍:

表单标签格式:form

action:开始网址

method:get和post等等

表单标签:主要用来收集用户输入信息如:登入、注册、搜索商品等

用户名格式:text (明文)

密码格式:password (密文)

性别:radio 性别格式 性别是单选,单选类型是radio,注意name要加上sex

复选框:checkbox

文本框:textarea

上传文件:file

下拉选择框:select

button:按钮

reset:重置

submit:提交

二、表单编写

截图:

https://i-blog.csdnimg.cn/img_convert/c7256bf6a85b9322f3114b955cfae18b.png

代码

表单

用户名:

密码:

linux

mysql

python

java

下拉框

自我介绍:

https://i-blog.csdnimg.cn/img_convert/404e4eab66238f66fd54dba8bb4ce07b.png