【前端模块】HTML5标签

文章目录

一、文件标签
二、文本标签
三、图片标签
四、列表标签
五、连接标签
六、表格标签
七、表单标签
八、简单案例

一、文件标签

文件标签：构成html最基本的标签

html：html文档的根标签
head：头标签。用于指定html文件
title：标题标签
body：体标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>

二、文本标签

和文本有关的标签

注释：
h1 to h6：标题标签

h1 to h6:字体大小递减
p：段落标签
br：换行标签
hr：展示一条水平线

属性：
- color：颜色
- width：宽度
- size：高度
- align：对齐方式
  - center：区中
  - left：左对齐
  - right：右对齐
b：字体加粗
i：字体斜体
font：字体标签

属性
- color：颜色
- size：大小
- face：字体
属性定义

color
- 英文单词：red，yellow，blue
- rgb(值1，值2，值3)：指的范围在0-255，如：rgb(0,0,255)
- #值1值2值3：值的范围：00-FF之间，如：#0000FF
width
- 数值：width=‘20’，数值的单位，默认是px（像素）
- 数值%：占比相对于父元素的比例

三、图片标签

展示一张图片

四、列表标签

有序列表
- ol：
- li：
```
<ol><li></li><li></li><li></li>
</ol>
```
无序列表
- ul：
- li：
```
<ul><li></li><li></li><li></li>
</ul>
```

五、连接标签

a：定义一个超链接

属性
- href：指定访问资源的URL（统一资源定位）
- target：指定打开资源的方式
  - _self：默认值，在当前页面打开
  - _blank：在空白页面打开

六、表格标签

table：定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离，若指定为0，则单元格的线会合为一条
- bgcolor：背景色
- align：对齐方式
tr：定义行
- bgcolor：背景色
- align：对齐方式
td：定义单元格
- colspan：合并列
- rowspan：合并行
th：定义表头单元格
caption：表格标题
thead：表示表格的头部分
tbody：表格的体部分
tfoot：表格的脚部分

七、表单标签

用于采集用户输入的数据，用于与服务器进行交互

form：用于定义表单的，可以定义一个范围，范围代表采集数据的范围

属性
- action：指定提交数据的URL，跳转位置
- method：指定提交方式
  
  分类：一共7种，主要使用两种
  1. get：
    1. 请求参数会在地址栏中显式。会封装到请求行中
    2. 请求参数大小是有限制的
    3. 不太安全
  2. post
    1. 请求参数不会在地址栏中显式。会封装到请求行中
    2. 请求参数大小没有限制的
    3. 较为安全
表单中的数据想要被提交，就必须指定其name属性
```
<form action="#" method="get">用户名：<input name="username" type="text">
</form>
```

表单项标签：

input：可以通过type属性值，改变元素展示的样式

type

text：文本输入框，默认值

placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动提空提示信息
password：密码输入框
radio：单选框（在默认值上加上checked）

注意：
1. 要想让多个实现框实现单选效果，则多个单元框的name属性必须一致
2. 一般会给每一个单元框提供value属性，指定其被选中后的值
3. checked属性，可以指定默认值
checkbox：复选框（在默认值上加上checked）

注意：
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性们可以指定默认值
file：文件选择框
hidden：隐藏域，用于提交一些信息
按钮
1. submit：提交按钮，可以提交表单
2. button：普通按钮
3. image：图片提交按钮
  
  src属性置顶图片位置
date/datetime-local：日期/日期时间
email：email的简单检验
label：指定输入项的文字描述信息

注意：label的for属性的一般会和input的ID属性值对应，若对应，则点击label区域，会让让input输入框获取焦点

select：下拉列表

子元素：option，指定列表项

textarea：文本域

cols：指定列数，每一行有多少个字符
rows：默认多少行

八、简单案例

<body>
<form action="#" method="get"><label for="username">用户名</label>:<input name="username" type="text" placeholder="请输入用户名" id="username"/><br><label for="username">密码</label>:<input name="password" type="password" placeholder="请输入密码"><br>性别：<input name="sex" type="radio" value="male" checked>男<input name="sex" type="radio" value="female">女<br>爱好：<input name="hobby" type="checkbox" value="shopping">购物<input type="checkbox" name="hobby" value="java" checked>Java<input type="checkbox" name="hobby" value="game" checked>游戏<br>图片：<input type="file" name="pic"><br>生日:<input type="date" name="birthday"><br>邮箱：<input type="email" name="email"><br>省份：<select name="province"><option>---请选择一个省份--</option><option>浙江</option><option>上海</option><option>江苏</option></select><br>自我描述： <br><textarea cols="50" rows="5" name="dec" placeholder="请输入自我描述"></textarea><input type="submit" value="login"><input type="button" value="button"><input type="image" src="../images/collection_icon.jpg"></form>
</body>

样式截图

【前端模块】HTML5标签相关推荐

HTML5标签用法及描述
2000 年底,国际 W 3C 织组织公布发行了 X HTML 1.0 版本,到现在已经有 10 年了.这 10 年里, Web 飞速发展,X HTML 1.0 显得"力不从心", ...
html去掉nav的圆点,web前端分享HTML5中的nav标签
web前端分享HTML5中的nav标签,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a page that l ...
html5前端Video视频标签和audio音频标签的使用
html5前端Video视频标签和audio音频标签的使用 h5新特性中关于Video视频标签和audio音频标签的使用和浅谈一.Video视频标签 video标签是h5新特性中用来播放视频的控件, ...
web前端分享HTML5中的nav标签学习笔记
好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...
初学前端，学习路线图必不可少，更有【95页】初级前端模块笔记！
前言在初学前端的时候,我们总会遇到一些问题,我们可以在网上看到很多关于前端的这些问题: 你们都是怎么学web前端的? 零基础,怎么自学好前端? 前端需要学多久,都学哪些知识? 想成为一名合格的前端工 ...
webpack前言：前端模块系统的演进
前端开发和其他开发工作的主要区别,首先是前端是基于多语言.多层次的编码和组织工作,其次前端产品的交付是基于浏览器,这些资源是通过增量加载的方式运行到浏览器端,如何在开发环境组织好这些碎片化的代码和资源 ...
Web前端与HTML5有什么区别，百分之八十的人分不清
说到Web前端,很多人想到的就是HTML5,加上现在APP和小程序盛行,Web前端开发和HTML5开发都异常火热.外行人很容易将HTML5和Web前端划等号,那Web前端和HTML5是否一样?有些人已 ...
HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
随着主流浏览器对 HTML5 的不断支持和完善,越来越多的开发者开始使用 HTML5 来开发各种功能强大的 Web 应用程序,HTML5 正引领互联网新革命.为了方便大家更好的学习 HTML5,今天这 ...
html5 将id的值用于top_web前端分享HTML5常见面试题集锦四
web前端分享HTML5常见面试题集锦四 1.为什么要初始化CSS样式? 答案:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异. 当 ...
html5标签详解,HTML5中figcaption标签用法详解
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...

【前端模块】HTML5标签

文章目录

一、文件标签

二、文本标签

三、图片标签

四、列表标签

五、连接标签

六、表格标签

七、表单标签

八、简单案例

【前端模块】HTML5标签相关推荐

最新文章

热门文章