前端HTML基础之标签
Posted 七月2333
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端HTML基础之标签相关的知识，希望对你有一定的参考价值。
标签由标签名、标签属性和文本内容组成；->是对标签的一种描述
标签属性分为通用属性、自有属性和自定义属性；
通用属性：所以标签都具有的属性：id,:给标签取名称 ，一个网页中是唯一的
class：给标签取一个类名
style：设置标签的行内样式
title：鼠标移到该标签上，所显示的提示内容
自定义标签属性：通常用来传值或图片的懒加载等方面；
格式：data-*
<img data-src="" >
...
表格标签：
table主要用于呈现格式化数据；表格是由行和列组成的；
格式：<table>
<tr> 行
<td></td>
<td></td>
</tr>
</table>
border:设置边框 ,默认单位是像素 width:设置表格宽度 ，默认像素是像素
align:设置表格对齐 cellpadding:设置单元格间距，单元格文本与边框的距离
cellspacing:设置像素间距；表头一般用th （内容会自动加粗并居中） 后面的用td;
跨行或者跨列：主要用来绘制复杂的表格；
valign：垂直对齐（top:顶端对齐 middle:垂直居中 bottom:下端对齐）
完成表格：caption(标题)、thead(表头)、tbody(表体)、tfoot(表尾)四部分组成
form表单标签是所以标签最核心标签之一，实现前后端交互；
常用属性：name:表单名 action:表单数据提交地方,一个文件名或者网址，如果是#，表示提交到当前文件下 method：前端提交数据到后端的方法，主要是get和post,默认get.
使用post,可以不将提交的内容暴露在网页中；
表单元素：input类：用来完成输入，或者发出指令
type:text/password/radio/checkbox/file/button/image/submit/reset
text可以不写，默认值；
属性：placeholder(提示) /name(命名)/minlength和maxlength(最小和最多输入的字符个数)/disabled(失效的)/readonly(只读，可以获得焦点，但是不能修改)/value(默认值)/pattern(正则匹配)
a、password:密码框，属性与text一样；
b、radio:单选钮，通常是两项以上，通常属性：name(必须有)/value/checked(选中)disabled(失效的)/readonly(只读） name用来区别于其他的组，实现单选的功能；checked默认选项
c、checkbox:复选框，可以用来选中0,1或多项,name必须有，通常属性：name(必须有)/value/checked(选中)disabled(失效的)/readonly(只读） name用来区别于其他的组，实现单选的功能；checked默认选项
d、file:文件上传按钮
E、button:普通按钮，通常去调用脚本代码value（按钮的标题）/disabled(失效的)
F、image:图片按钮，和button一样，有一个特殊属性：src:用来加载图片，他也有提交功能，与submit一样；
g、submit:提交按钮，用来将数据提交到后台
reset:重置按钮，将输入组件和输入的内容清空
textarea类：文本域（多行文本框） name/id/cols（列数）/rows（行数）/placeholder/minlength/maxlength/require(必须输入)
select类：下拉列表框，默认用于单项选择，用option呈现选择的内容
<body>
<form action="">
<label for="sex"> 性别:</label>
<select id="sex">
<option value="male">男</option>
<option value="female">女</option>
</select>
</form>
</body>
multiple属性：可以多选 ，可以用size选择显示行数。
button类：普通按钮，具有提交功能；可以单独使用，不写在form中；写在form里，有提交功能
<form action="">
<button id="h">确认</button>
</form>
以上是关于前端HTML基础之标签的主要内容，如果未能解决你的问题，请参考以下文章
前端基础之HTML -- 2019-08-16 19:32:06