那么先让我们看看什么是html吧!百度百科是这样介绍的
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
什么意思呢? 简单粗暴的理解就是:让浏览器知道你在说什么!
注:标签中的各个属性是用 空格 隔开!
1、标题标签:
给网页中的正文设置标题,同时可选择标签大小。
用法说明:
一级标题h1,二级标题则h2,后者同理。
例如:一级标签:
格式: 标题名字
2、段落标签:
给网页中的内容分段,但是不具有空格和换行功能。
用法说明:
段落标签用字符p表示
例如:
格式: 段落内容
3、换行标签:
给网页中内容进行换行,不具有分段和空格功能,且与段落标签相比,内容较显的紧凑。
用法说明:
换行标签用br表示,并且是单标签
格式: 选择换行内容
(自闭合、建议使用)
或者 选择换行内容
4、水平线标签:
给网页中内容进行水平线分隔开。
用法说明:
水平线标签用Hr表示,也是单标签
格式: 选择换行内容
(自闭合、建议使用)
或者 选择换行内容
5、字体样式标签:
设置字体样式,如粗体、斜体。
用法说明:
粗体:strong
斜体:em
格式: 内容
内容
6、注释和特殊符号:
网页中所表示实际上的中、英或者数字等注释和符号。
格式: 空格:内容1 内容2 大于号:内容1 > 内容2
小于号:内容1 < 内容2 版权符号:© 内容
1、图像:
在网页中插入图片。
格式
其中 src: 图像地址 alt: 图像的替代文字(当图片不存在或者找不到时,就会用alt中内容来表示这个图片)
title: 悬停在图片上的文字 width和height:设置图片大小
2、超链接
在网页中加入超链接,可以实现跳转功能。
锚链接:
1、需要一个锚标记
锚标记可以在本页面标记,在其他页面实现跳转; 也可以在其他页面标记,在本页面跳到标记的那个页面。
2、知道要跳转的页面的网页链接
格式: 锚标记: 有的版本用的是这个:
锚链接: 回到锚标记对应的内容中
功能性链接:
如邮件链接:mailto
格式: 邮件链接: 点击跳转
3、列表:
用来列举各种可能的事件或者种类等等。
有序列表:ol
无序列表:ul
自定义列表:dl
`
- 内容
- 内容
-
- 内容
`
4、表格:
用表格来显示各个事物的各种属性,简单明了。
使用:
表格:table
行:tr
列:td
跨行:rowspan
跨列:colspan
`
内容
内容
`
多行多列则在表格里多写几个tr、td。具体事例如下代码:
点击查看代码
三、表单:
1、提交表单的形式:常用get/post (get方式提交,可以在url中看到用户提交的信息,不安全,但是这种方式高效;post相对较安全,但是要想信息不被泄露仍需后期加密)
格式:
2、输入框:
输入框:input
比如输入框、密码框等等都用input标签 ,标签中的“type”的值决定了是输入框还是其他标签元素等等。并且尽量用“name”命名元素
type:
text(文本框),password(密码框),checkbox(多选框),radio(单选框),submit(提交),reset (重置),file(上传文件),hidden(隐藏区域),image(图片,点击该图片也可以提交表单),button(按钮)等
value:
表单组件的初始值。当type为radio或者checkbox时,必须指定一个值。
size:
指定表单组件的初始宽度。当type为text或password时,表单元素的大小以字符为单位。而其他组件类型,宽度以像素为单位。
maxlength:
type为text或password时,输入的最大字符数
checked:
type为radio或者checkbox时,表示指定按钮已被选中,不可更改。
注:同一类型的单选框,name名称必须一样,不一样则不为单选。
格式: 文本框: 密码框:input type="password" name="名字" >
多选框: 单选框:
提交: 重置
上传文件: 隐藏区域:
图片: 按钮:
3、下拉框:
下拉框:select
格式
4、搜索框:
在网页中添加搜索,可快速找到网页中某个内容。
格式:
5、滑块:
类似音量调节的滑块,可用来调节大小。
格式: (滑块对应的值要在表单提交后的网页的网址上看到)
6、文件域:
上传文件:file
格式:
7、文本域:
多行文本:textarea
格式:
表单的提交和重置:
提交:submit
重置:reset
格式 提交:
或者以图片形式提交:
重置:
四、表单初级验证:
判断用户输入是否合理或者满足条件,验证失败时,给出提示信息。
1、邮箱验证:
格式:
2、URL验证:
格式:
3、数字验证:
格式: (可在此标签中加入max,min,step来设置数字范围以及步长大小)
4、表单验证之提示:
默认提示信息:placeholder(即在文本框中默认显示的信息)可用在所有输入框中,在单选、多选、下拉框中无意义。
必填选项:required (设置该项必填)
正则表达式:pattern (需要的可以在网上搜索)
五、表单其他功能:
隐藏某区域:hidden
设置只读模式:readonly
禁用模式:disabled
注:可在标签属性后添加这几个功能。如隐藏一个文本框:
格式: (表示该文本框已经隐藏)
鼠标定位:实现点击文字就能将鼠标定位到对应的框中。
格式:
表单相关代码:
`
用户名:
密码:
男:
女:
中国:
美国:
韩国:
印度:
搜素框:
滑块:
文件域:
邮箱验证:
URL验证:
数字验证:
此处文本框被隐藏:
只读模式:
禁用模式:
提示用户信息:
此处必填:
鼠标定位:
提交:
图片提交:
重置:
当你看到这里的时候相信已经有所了解html了,如果我的教程有帮助到你欢迎订阅 加关注!也欢迎您在评论区指出我的不足!