HTML5 混合APP开发学习笔记（一）——HTML5页面基础知识

最新推荐文章于 2024-05-01 02:31:02 发布

123，机器人

最新推荐文章于 2024-05-01 02:31:02 发布

阅读量768

点赞数 1

分类专栏： HTML5混合APP 文章标签： html5 app开发

本文链接：https://blog.csdn.net/weixin_43569314/article/details/90199724

版权

HTML5混合APP 专栏收录该内容

17 篇文章 6 订阅

订阅专栏

HTML5页面基础知识

标签的基本类型

常规： <标签名> 标签体 </标签名>
自结束标签： <标签名/>
带属性标签： <标签名属性名=”属性值”> 标签体 </标签名>
<标签名属性名=”属性值”/>
注释标签： <!–注释语句–>

HTML5文档基本格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签示范</title>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>：属于HTML文档的DTD(Document Type Definition)，用于声明，告知浏览器文档所使用的HTML规范
<html>：根标签，标志着HTML文档开始
<head>：头标签，包含文档的头部信息，不会再浏览器界面显示
<title>：标题标签，打开网页后，显示该页面的标题，而不是该网页的域名
<body>：主体标签，定义HTML文档需要显示的内容，包括各种文档、图片、音频、视频等

一些常见常用的标签

布局<div>标签：作为一个容器，其长宽可以随着父容器而自适应，在开发APP时可以减少缩放的问题
标题<h1>~<h6>：定义1~6级标题
段落<p>：在段落前后自动添加空行，自适应页面大小
水平线<hr>：添加水平线，让文档层次更加清晰
换行<br>：HTML文档里面的回车，在网页中显示不出来，需要使用 ‘<br>’ 进行换行
修饰<span>：设置部分文字显示样式
图像<img>：<img src=“图像 url 或者路径” alt=“文字提示”/>，alt是在src找不到图片时才显示的内容，有图片的话就不显示
超链接<a>：<a href=“跳转的url地址” target=“新页面弹出方式”> 文本或者图像(显示出来的内容) </a>
无序列表<ul>：列表里面的内容没有顺序之分，子标签为<li> 列表项 </li>
有序列表<ol>：<ol type=“计数的符号类型” start=“开始数值”>，子标签为<li> 列表项 </li>
细节展示 detailes 和 summary：形成类似于目录的显示方式，summary为概览，下面有更多的细节描述
进度条<progress>：<progress value=“当前值” max=“最大值”/>，更好的交互，提升用户体验

表单的相关知识

基本格式：<form method=“提交方式” action=“服务端url” enctype=“编码方式”> </form>
提交方式：post、get(默认) 。关于post与get的区别就不加赘述
编码方式有：application/x-www-form-urlencoded、multipart/form-data、text/plain
input输入标签：

单行文本输入框：<input type=“text” placeholder=“请输入用户名” required name=“tname” />
密码输入框：<input type=“password” placeholder=“请输入密码” required name=“tpass” />
普通按钮：<input type=“button” value=“普通按钮”/>
单选框：<input type=“radio” checked/>男
复选框：<input type=“checkbox” checked/>同意与否
提交按钮：<input type=“submit” value=“注册”/>
图片提交按钮：<input type=“image” src=“图片url或路径”/>
重置按钮：<input type=“reset” value=“取消”/>
文件上传域：<input type=“file” multiple/>
隐藏域：<input type=“hidden” value=“这是隐藏的值”/>
Email输入文本框：<input type=“email”/>
URL输入文本框：<input type=“url”/>
电话输入文本框：<input type=“tel”/>
关键词搜索文本框：<input type=“search”/>
颜色设置文本框：<input type=“color”/>
数字输入框：<input type=“number” value=“当前值” min=“最小值” max=“最大值” step=“值的间隔”/>
滑动条：<input type=“range” value=“当前值” min=“最小值” max=“最大值” step=“值的间隔”/>
日期和时间输入框：<input type=“date”/>
多行文本输入框：<textarea> 文本内容
下拉菜单：<select> <option value=“item1”>选项1</option></select>

input标签的其他属性：

placeholder：输入为空时的灰色提示，输入内容后消失
require：必须填写的内容，否则无法提交表单
pattern：控制输入格式
disable：禁用input输入，不可输入，不可点击，除非满足某种条件为止

一点技巧

用于控制页面缩放，保证字体大小，避免模糊不清，常用于APP开发之中
<meta name=“viewport” content=“initial-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

123，机器人

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
HTML5 混合APP开发学习笔记（一）——HTML5页面基础知识

HTML5页面基础知识标签的基本类型常规： <标签名> 标签体 </标签名>自结束标签： <标签名/>带属性标签： <标签名属性名=”属性值”> 标签体 </标签名><标签名属性名=”属性值”/>注释标签： <!–注释语句–>HTML5文档基本格式<!DOCTYPE html&...
复制链接

扫一扫

专栏目录