无序列表:
在网页中表示一组无顺序之分的列表,如:新闻列表 显示特点:列表的每一项前默认显示“圆点标识” 注意点:ul标签中只允许包含li标签,li标签可以包含任意内容 (ul=无序列表;;li=无序列表“项”)
有序列表
:在网页中表示一组由顺序之分的列表,如:排行榜。特点:列表的每一项前默认显示“序号”标识 注意点:ol标签中只允许包含li标签,li标签可以包含任意内容 (ol=有序列表;;li=有序列表“项”)
自定义列表
:在网页的底部导航中通常会使用自定义列表实现。特点:dd前会默认显示缩进效果。 注意点:dl标签中只允许包含dt/dd标签,dt/dd标签可以包含任意内容(dl=自定义列表;;dt=自定义列表“主题”;;dd=自定义列表“项”)
总结
:无序列表“最常用”,有序列表“偶尔用”,自定义列表“底部导航用”
表格标签:
在网页中以行+列的单元格方式整齐展示和数据,如:学生成绩表。注意点:标签的嵌套关系:table>tr>td;;(table=表格整体,可用于包裹多个tr;;tr=表格每行,可用于包裹td;;td=表格单元格,可用于包裹内容)
表格相关属性:
设置表格基本展示效果。注意点:实际开发时针对于样式效果推荐使用css设置 border=边框宽度(默认为2) width=表格宽度 height=表格高度
表格标题和表头单元格标签:
在表格中显示整体大标题和一列小标题。注意点:“caption=表格大标题”标签书写在table标签内部;;“th=表头单元格/表格小标题”标签 书写在tr标签内部(用于替换td标签) 大标题标签caption书写在tr上面/table标签内的第一行,正常内容用td,th用于第一行
thead/tbody/tfoot 表头 /表主题/表底部 加这三个元素不会在页面上有变化,只是对浏览器读取代码的时候更顺滑一些,同时也方便与程序员浏览
合并单元格步骤:
1,明确合并哪几个单元格;2,通过左上原则,确定保留谁,删除谁。;3,给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan) 注意:只有“同一个结构”标签中的单元格才能合并,不能跨“结构”标签合并(不能跨thead,tbody,tfoot)
表单标签
:“input”系列标签的基本介绍;在网页中“显示收集用户信息”的表单效果,如:登录页/注册页。 input标签可以通过type属性值不同,展示不同的效果。 text=文本框,用于输入单行文本; password=密码框,用于输入密码;radio=单选框,用于多选一;checkbox=多选框,用于多选多;file=文件选择,用于之后上传文件;submit=提交按钮,用于提交;reset=重置按钮,用于重置;checked=默认选中 button=普通按钮,默认无功能,之后配合js添加功能 placeholder=占位符(提示信息)是文本框跟密码框的常用属性 radio=单选框;“name”属性对于单选框有分组功能,有相同name属性值的单选框为一组,一组中只能同时又一个被选中;; 在使用file文件上传时,添加“multiple”属性可以一次性添加多个文件上传。
按钮
:在网页中显示不同功能的按钮表单控件;submit=提交按钮 ;;reset=重置按钮;; button=普通按钮。默认无功能,之后配合javasprict添加功能
“form:表单域。
按钮必须包含在表单域里面才可以正常使用” “想要添加“按钮文字”可以在value属性里面输入” action:提交到哪里,当没有提供action地址,就会默认提交到页面中 添加name属性可以把数据提交到后台,使得更清晰的把数据理整理起来;你起的name叫什么,后台就能简单易懂的清楚知道传来的数据是什么意思。
button按钮标签(同input的按钮系列):
注意点:谷歌浏览器中button默认是提交按钮;;button标签是双标签,更便于包裹其他内容,文字,图片等。在button标签里只需要中间输字就能更改按钮文字;例如文字,跟input不一样,不需要value属性就能添加按钮文字。
select下拉菜单标签:
标签组成 select标签,下拉菜单的整体;;option标签:下拉菜单的每一项。常见属性:selected下拉菜单的默认选中
checked=表单标签“默认”选中 selected=下拉菜单的“默认”选中
textarea文本域标签
:在网页中提供可输入多行文本的表单控件。常见属性:cols规定了文本域可见宽度;;rows规定了文本域可见行数。
label标签:
使用方法1:使用label标签把(文本)内容包裹起来;在表单标签上添加ID属性;在label标签的for属性中设置对应(相同)的id属性值(复杂方法)
使用方法2:
直接使用label标签把内容(文本)和表单标签一起包裹起来;;需要把label标签的for属性删除即可(简单方法)
没有语义的布局标签 div和span;;div标签:一行只显示一个(独占一行);;span标签:一行可以显示多个
总结
总结
1.列表标签:有三种,有序ol;无序ul;自定义dl 2.表格标签结构内容:table表格整体;tr每一行;td单元格 3.表单标签:input ;属性值type=“所需要展示属性” 表单标签的所有属性要实现功能必须包含在父元素“form表单域”里面所有功能才可以使用
\