博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端系列之HTML基础知识概述
阅读量:5136 次
发布时间:2019-06-13

本文共 2368 字,大约阅读时间需要 7 分钟。

1、什么是HTML

HTML:Hyper Text Markup Language :超文本标记语言。

超文本:功能比普通文本更加强大。
标记语言:使用一组标签对内容进行描述的语言,它不是编程语言。

2、HTML能干什么

HTML用于编写网页,平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时,可以通过“右键/查看网页源代码”看到具体的html代码。

网页内容包含:HTML代码、css代码、JavaScript代码等内容。
HTML代码:用于展示需要显示的数据。
css代码:使显示的数据更佳好看。
JavaScript代码:使整个页面显示的数据具有动画效果。

网页根据内容是否改变分为:静态页面、动态页面

静态页面:编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。动态页面:会根据不同的情况展示不同的内容。例如:登录成功后右上角显示用户名。
3、HTML语法和规范

HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。

HTML文件分为头部分(head)和体部分(body)。
HTML标签都是由开始标签和结束标签组成。
HTML标签不区分大小写,建议使用小写。

4、HTML语言特点

HTML文件不需要编译,直接使用浏览器阅读即可过 HTML文件的扩展名是*.htm。

标签名是预先定义好的,我们只需要了解其功能即可。通常情况下标签由开始标签和结束标签组成。例如:标签名不区分大小写。
如果没有结束标签,建议以/结尾。HTML结构包括两部分: 头head和体body

5、HTML  文本标签
(1)、标题标签:从

逐渐变小(加粗加黑显示)(2)、水平线标签:

(3)、段落标签:

(4)、字体标签:内容 color:设置字体的颜色,可使用英文单词或者 16 进制 size:设置字体的大小,从 1 到 7 逐渐变大,最大显示为 7 face:设置字体

 6、HTML表单
(1)、表单标签:<form>

<form>表单标签,在html页面创建一个表单,表单标签在浏览器上没有任何显示。如果数据需要提交到服务器,负责搜集数据的标签必须存放在表单标签体内容。

(1)、action属性:请求路径,确定表单提交到服务器的地址(路径)(2)、method属性:请求方式。常用的取值:GET、POST
GET:默认值	1)、提交的数据追加在请求路径上。例如:/1.html?username=jack&password=1234,数据格式k/v,追加是使用?连接,之后每一对数据使用&连接	2)、因为请求路径长度有限,所有GET请求提交的数据有限。
POST:	1)、提交的数据不再请求路径上追加(及不显示在地址栏上)	2)、提交的数据大小不显示
(3)、数据提交:
	
<!--此处的内容可能被提交到服务器-->
<!--此处的内容在
标签外部,此处数据不能提交到表单-->
(2)、输入域标签:<input>

<input>标签用于获得用户输入信息,type属性值不同,搜集方式不同。最常用的标签。

(1)、type属性1)、text:文本框,单行的输入字段,用户可在其中输入文本。默认宽度为20个字符2)、password:密码框,密码字段。该字段中的字符以黑圆显示。3)、radio:单选框,表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。4)、submit:提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性,否则将“提交”两个字提交到服务器。因为不同项目注册需要的字段不同,需要完成的案例中没有覆盖所有的表单元素,以下标签使用也需要大家掌握。5)、checkbox:复选框6)、file:文件上传组件,提供"浏览"按下可以选择需要上传文件7)、hidden:隐藏字段·数据会发送给服务器,但浏览器不进行显示8)、reset:重置按钮。将表单恢复到默认值9)、image:图形提交按钮,通过src给按钮设置图片10)、button:普通按钮,常用于与JavaScript结合使用
(2)、name:元素名,如果需要表单数据提交到服务器,必须提供name属性值,服务器通过属性值获得提交的数据。
(3)、value属性:设置input标签的默认值。submit和reset为按钮显示数据
(4)、size:大小
(5)、checked属性:单选框或复选框被选中
(6)、readonly:设置为仅可读
(7)、disabled:是否可用
(8)、maxiength:允许输入的最大长度
(3)、下拉列表标签:<select>

<select>下拉列表。可以进行单选或多选。需要使用子标签`<option>`指定列表项

(1)、name属性:发送给服务器的名称(2)、multiple属性:不写默认单选,取值为"multiple"表示多选(3)、size属性:多选时,可见选项的数目(4)、
(4)、文本域标签:<textarea>

<textarea>文本域。多行的文本输入控件。

(1)、cols属性:文本域的列数(2)、rows属性:文本域的行数
(5)、按钮标签:<button>

按钮标签一般很少使用,提供“普通|重置|提交”功能,不同的浏览器默认值不同。

扫码关注微信公众号,了解更多

转载于:https://www.cnblogs.com/compassblog/p/8448862.html

你可能感兴趣的文章
java第六次作业
查看>>
DjangoORM相关(单表操作)
查看>>
分享一个生成反遗忘复习计划的java程序
查看>>
公共开发中js代码的管理
查看>>
SpringMVC(九):SpringMVC 处理输出模型数据之ModelAndView
查看>>
Modal模态框3秒后自动关闭
查看>>
CSS 样式书写规范
查看>>
对Date的扩展,将 Date 转化为指定格式的String
查看>>
tc: 模拟网络异常的工具
查看>>
asp.net利用Ajax和Jquery在前台向后台传参数并返回值
查看>>
Java调优之JVM和线程的内存分析
查看>>
Windows7下zip安装mysql
查看>>
Android应用程序文件缓存getCacheDir()和getExternalCacheDir()
查看>>
spring事务失效
查看>>
线段树入门( 转 )
查看>>
浅谈 JSON.stringify 方法
查看>>
不同手机根据坐标计算控件、图片的像素,px 与 dp, sp换算公式?
查看>>
XML深度解析
查看>>
根据一个整齐的数据,随机的得到一个新的数组,可指定数组元素出现的位置
查看>>
转载 JS获取当前手机浏览器可视区域大小
查看>>