前端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.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>表单元素</title>
</head>
<body>
 <form name="stuInfo" action="http://baidu.com" method="get">
     <input type="text" name="userName" placeholder="请输入你的姓名">
     <input type="submit">
 </form>
</body>
</html>

使用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

Web前端开发之HTML语言

Web前端开发之HTML语言

前端基础之HTML -- 2019-08-16 19:32:06

前端基础之HTML -- 2019-08-16 22:14:28

牛客编程题零基础入门前端之73题(html,css,ES5,WebAPI)