深圳定制建设网站,WORDPRESS导购主题 WYZDG,WordPress小程序导航栏,网站建设 400电话 广告今天我们继续结合发布的Html5基础知识点文档进行复习#xff0c;希望对大家有所帮助。 目录 列表
无需列表
有序列表
自定义列表
样例
表格
基本属性
编辑
相关属性
Border
Width
Height
编辑
表格标题
编辑
表格单元头
合并单元格
垂直单元格合并
水…今天我们继续结合发布的Html5基础知识点文档进行复习希望对大家有所帮助。 目录 列表
无需列表
有序列表
自定义列表
样例
表格
基本属性
编辑
相关属性
Border
Width
Height
编辑
表格标题
编辑
表格单元头
合并单元格
垂直单元格合并
水平单元格合并
一般遵守的步骤
表单标签
各类基础标签
text⽂本框
password密码框
radio单选框
checkbox多选框
file⽂件选择
hidden隐藏域
submit提交按钮
reset重置按钮
button普通按钮
placeholder提示
email类型
number范围
⽇期检查器
search类型
color类型
autocomplete类型允许输入框提供自动完成建议这些建议来自于元素中的。
最终效果展示
其他补充标签
form标签
下拉菜单
编辑
文本域
Label标签
使用方法
法一
法二
语义化标签
编辑
字符实体
结语 列表
无需列表
无需列表的主要对象是ul和li标签是一个双标签。ul嵌套li其中ul表示列表整体li表示其中每⼀项的内容。其中ul只能包含lili可以包含任何标签。⽆须列表每⼀项前默认显示圆点标识圆点表示可以⽤CSS改变。
有序列表
有序列表主要由ol和li表示ol嵌套li其中ol表示列表整体li表示每⼀项的内容。有序列表每⼀项前都默认显示序号标识序号标识可以⽤CSS改变。
自定义列表
自定义列表通常在⽹⻚底部导航中使⽤包含dldtdd三种。
dl表示⾃定义列表的整体包裹dt、dd标签dt表示⾃动移列表的主题dd表示⾃定义列表主题的每⼀项内容
dd前会默认缩进缩进可以⽤CSS消除dl中只允许包含dt或dd标签dt和dd当中随便放。
样例
下面是一段代码展示和具体效果
h1无序列表ul/h1
ulli点赞/lili关注/lili收藏/li
/ul
hr h1有序列表ol/h1
olliCSDN博主/liliPLEASURE/lili乐事/li
/ol
hr h1自定义列表dl/h1
dldtHTML/dtdd超文本标记语言用于创建网页结构。/dddtCSS/dtdd层叠样式表用于网页的表现形式。/dddtJavaScript/dtdd一种脚本语言用于网页的交互功能。/dd
/dl PS这些列表标签都是双标签 表格
基本属性
在表格当中table表示表格整体可以包裹多个trtr表示表格每⾏可⽤于包裹tdtd表示表格单元格可⽤于包裹内容。
table border1trth姓名/thth年龄/thth职业/th/trtrtd张三/tdtd30/tdtd程序员/td/trtrtd李四/tdtd25/tdtd设计师/td/trtrtd王五/tdtd35/tdtd产品经理/td/tr
/table 这里的border是我们看到的分割一个一个单元格的边框线如果删除那么各个单元格子间就不会有线条效果如下 反之如果我们把数字变大那么相应的边线也会变大。
相关属性
Border
border属性值为数字效果是边框的宽度具体效果在基本属性当中已经跟大家阐述。
Width
width属性值为数字效果是表格宽度。
Height
height属性值为数字效果是表格⾼度。
PS
实际当中更推荐CSS。这三个属性的使⽤⽅法是直接跟在table后⾯即table border width height 引号当中写数字即可。具体使用方法如下
table border1 width600tr height50th width200姓名/thth width100年龄/thth width300职业/th/trtr height50td width200张三/tdtd width10030/tdtd width300程序员/td/trtr height50td width200李四/tdtd width10025/tdtd width300设计师/td/trtr height50td width200王五/tdtd width10035/tdtd width300产品经理/td/tr
/table 表格标题
caption表示表格⼤标题默认在表格顶部居中位置是双标签。
table border1 width600caption这是标题/captiontr height50th width200姓名/thth width100年龄/thth width300职业/th/trtr height50td width200张三/tdtd width10030/tdtd width300程序员/td/trtr height50td width200李四/tdtd width10025/tdtd width300设计师/td/trtr height50td width200王五/tdtd width10035/tdtd width300产品经理/td/tr
/table 表格单元头
th表示表头单元格表示⼀列⼩标题并通常⽤于表格最上⾯的第⼀⾏默认内部⽂字加粗居中是双标签。可以结合基本属性中的标签使⽤。
合并单元格
垂直单元格合并
垂直⽅向的单元格合并跨⾏合并使用rowspan例td rowspan要合并的单元格数量想要的内容/td
table border1caption跨行/captiontrth姓名/thth部门/thth colspan2联系方式/th/trtrtd rowspan3张三/tdtd技术部/tdtd电话1234567890/tdtd邮箱zhangsanexample.com/td/trtrtd职位高级工程师/tdtd/tdtd/td/trtrtd入职日期2020-01-01/tdtd/tdtd/td/tr
/table
水平单元格合并
⽔平⽅向的单元格合并跨列合并使用colspan例td colspan要合并的单元格数量想要的内容/td
table border1caption跨列/captiontrth colspan3公司年度报告/th/trtrth季度/thth收入/thth支出/th/trtrtd第一季度/tdtd200/tdtd150/td/trtrtd第二季度/tdtd250/tdtd180/td/trtrth colspan2总计/thtd880/td/tr
/table 一般遵守的步骤
进行合并的三个步骤
明确要合并的单元格从左上到右下确认需要保留哪⼀个单元格的内容跨⾏合并rowspan、跨列合并colspan
注意不能跨结构标签合并如th、td、tf等
表单标签
各类基础标签
这些标签一般都是单标签用于收集用户输入它有多种类型每种类型适用于不同的输入场景。他有如下三个需要注意的事项
根据type属性的不同展示不同效果input type需要的功能⼀般不换⾏需要⾃⼰⽤br换⾏可以在input标签前使⽤汉字作为提示字在前⾯在后⾯写就是提示词在后⾯
下面是几种常用的基础标签
text⽂本框
用于接受单行的文本输入是最基本的输入字段。
input typetext idtxtName namename placeholder请输入您的名字
password密码框
类似于文本框但输入的字符会被遮掩用于保护用户的隐私。
input typepassword idpwdPassword namepassword placeholder请输入密码
radio单选框
一组单选按钮中只能选中一个。同一组的单选按钮需要相同的name属性。
input typeradio idoptMale namegender valuemale
label foroptMale男/label
input typeradio idoptFemale namegender valuefemale
label foroptFemale女/label
checkbox多选框
允许多个选项被选中适合用户需要勾选多个项目的情况。 input typecheckbox idchkApple namefruit valueapplelabel forchkApple苹果/labelinput typecheckbox idchkBanana namefruit valuebananalabel forchkBanana香蕉/labelinput typecheckbox idchkWatermelon namefruit valueapplelabel forchkApple西瓜/labelinput typecheckbox idchkOrange namefruit valuebananalabel forchkBanana橘子/label
file⽂件选择
让用户从本地文件系统选择一个或多个文件。
input typefile idfileUpload nameupload multiple
hidden隐藏域
在表单中存储数据但用户不可见常用于安全令牌或会话ID。
input typehidden idhidToken nametoken valuesecret-token
submit提交按钮
当用户点击时会触发表单的提交事件将表单数据发送给服务器。
input typesubmit idbtnSubmit value提交
reset重置按钮
当用户点击时会清除表单中的所有输入将表单恢复到初始状态。
input typereset idbtnReset value重置
button普通按钮
与提交按钮类似但不会提交表单常用于触发JavaScript函数。
input typebutton idbtnAction value行动
placeholder提示
为输入框提供一个提示性的文本当输入框为空时显示。
input typetext idtxtEmail nameemail placeholder请输入您的电子邮箱
email类型
专门用于收集电子邮件地址浏览器会自动验证格式是否正确。
input typeemail idtxtEmailValid namevalid_email placeholder请输入有效的电子邮箱
number范围
用于收集数值可以通过min和max属性限制范围。
input typenumber idnumAge nameage min18 max100 value25
⽇期检查器
提供一个日期选择器用户可以选取日期。
input typedate iddob namebirthdate
search类型
类似于文本输入但浏览器可能会提供一个搜索图标和自动完成建议。
input typesearch idtxtSearch namesearch_query placeholder搜索...
color类型
提供一个颜色选择器用户可以选取颜色。
input typecolor idcolorPicker namefavorite_color value#ff0000
autocomplete类型 允许输入框提供自动完成建议这些建议来自于datalist元素中的option。
input typetext idtxtCity namecity listcities
datalist idcitiesoption value北京option value上海option value广州option value深圳
/datalist
最终效果展示 其他补充标签
form标签 action当点击置顶的提交等按钮时把数据发送的地址。 name表单的唯⼀名称。 method制定提交表单时的类型请求GET请求和POST请求。 datalist为输⼊框提供⼀个下拉列表以供选择⽀持模糊搜索。 下拉菜单
标签组成select表示菜单整体option表示菜单的每一项可以用selected设置默认选中 默认选中selcet一般跟在option的内部。
formlabel forfruits请选择你喜欢的水果:/labelselect idfruits namefruitoption valueapple苹果/optionoption valuebanana香蕉/optionoption valuecherry樱桃/optionoption valueorange橙子/optionoption valuegrape葡萄/option/select
/form 文本域
textarea为网页提供可输入多行文本的表单控件是双标签。常见属性cols规定了文本域的可见宽度rows规定了文本域的可见行数。右下角可以拖动改变大小实际开发中推荐CSS。
Label标签
常用于绑定内容余表单标签的关系是双标签。
使用方法
法一
把内容如文本包裹起来 在表单标签上天界ID属性 用label标签的for属性设置对应的ID属性 例input typeradio namesex idlabel for内容/label
法二
直接使用label把内容和表单标签包裹 把label标签的for属性删除 labelinput typeradio namesex内容/label
语义化标签
div标签-一行显示一个独占一行显示是双标签div后面可以连接font-size、color等使用。
span标签-一行显示多个是双标签。
其余可能会常用的标签有header网页头部、nav网页导航、footer网页底部、aside网页侧边栏、section网页区块、article网页文章。
div classcontainerh2产品列表/h2div classitemspan产品编号: 001/spanbrspan产品名称: 高级笔记本/spanbrspan价格: $100/span/divdiv classitemspan产品编号: 002/spanbrspan产品名称: 设计师鼠标/spanbrspan价格: $50/span/divdiv classitemspan产品编号: 003/spanbrspan产品名称: 蓝牙耳机/spanbrspan价格: $75/span/div
/div 在本案例中为了各个div和span更加明显我添加了一些CSS来让他们的得以区分后续博主也会补充更多CSS的知识点博主是否能更加勤快的更新就看大家的点赞收藏了求求
字符实体
网页只“认识”一个空格多个空格“不认识”所以需要使用字符实体格式为对应英文;。常用的有空格nbsp;
p这里没有空格/p
p这里有只按下一次 空格键的空格和很多按下 空格键的空格效果/p
p这里是使用了一次和多次nbsp;字符实体nbsp;nbsp;nbsp;后的空格效果/p 结语
今天温故了一些比较常见的标签、表格和列表希望对大家有所帮助也希望大家喜欢的话可以留下点赞、关注和收藏这对我真的很重要谢谢
