微信小程序开发之路之从HTML出发
微信小程序开发之路
第一部分——HTML
- HTML是超文本标记语言的缩写,它不是一种编程语言，它是一种标记语言
- 浏览器是解释和执行HTML的工具，标签用来描述网页，因此网页不会显示标签
标签
- 描述文档类型和字符编码 ,比如其中的charset，通常设置为UTF-8，防止浏览器载入时乱码
- 提供网页检索的依据 ，比如name属性中定义的关键词就是搜索引擎分类检索的依据
html标签分类
- 块级标签：显示为块状，前后隔一行
- 行级标签：显示为行
常用标签
- 可以用
name 定义页面名称 - 标题标签：
标题
,提供h1到h6的标题风格 - 段落标签：
段落
,前后换行，为一个自然段 - 分割线标签：
，提供一行分割线，不成对 - 有序列表： 列表元素带数字序号
<ol>
<li>coffeeli>
<li>teali>
<li>waterli>ol> - 无序列表： 列表元素用原点分布
<ul>
<li>coffeli>
<li>teali>
<li>waterli>
ul>
//简单嵌套<h4>一个嵌套列表：h4>
<ul><li>咖啡li><li> 茶<ul><li>红茶li><li>绿茶<ul><li>中国茶li><li>非洲茶li>ul>li>ul>li><li>牛奶li>
ul>- 定义描述标签： 形式为给出词语及解释
<dl>
<dt>titledt>
<dd>definedd>dl>- 表格标签： 其中border属性表示边框尺寸，tr声明行，td声明列，有几对就是有几行，每行里面有几列
<table border="1">
<tr>
<td colspan="2">1td>
<td>2td>
<td>3td>
tr>table>colspan 是跨列数；rowspan是跨行数;th标签是表头
- 表单标签： form为用户创建输入表单，
<form >name:<input type="text" name="inch"><br/>sex:<input type="checkbox" name="insex">
form>
input类型有很多种，包括submit和reset，分别是提交和重置键，对于动态链接
<form action="www.xxx" method="get/post">form>
其中get方法将数据写在地址栏上，获取方便但不安全
post方法将数据放到内存中，更安全
value属性是显示在页面的内容
输入框的size是显示的长度，maxlength是允许输入的最大长度
radio作为单选框，两个name要相同，而checkbox是复选框，各名字不能相同
-
文件域，form的type是file，结合submit上传
-
下拉菜单：
<select name="xx" style="width: 30%"><option value="0">No1option><option value="0">No2option><option value="0">No3option><option value="0">©option>
select>
- 图像标签与属性 ：图片地址有相对地址和绝对地址两类，相对地址主要有相对文件路径等，
绝对地址比如超链接等，对于不同的图片类型写入的格式是一样的，因为本身带有后缀名，浏览器也能够呈现出该有的状态
在body中也可以设定background属性，指定网页的背景图，图片过小会重复
通过align属性可以设定布局，相对于文字的位置等，默认值是bottom ，设置为left/right属性可以指定浮动至段落的左侧或右侧
指定的alt属性，如果图片正常加载，鼠标悬浮于图片上时会显示alt文本，如果图片无法加载，会替换为alt文本
<img src="图片地址" alt="图像的代替文本"/>
<img src="/xx/xx/xx.jpg" />
<img src="http://www.xxxxxx/xxx.gif"/>
<img src="xxx" align="布局值bottom/middle/top"/>相对地址不安全，容易被攻击
-
强调标签：text
-
换行标签：
此标签没有空行，两个p标签之间会空行 -
范围标签：div标签用来划分块
-
链接标签 ： a标签，也叫做anchor锚点元素，href属性是目的的超链接，通过对href值的设定完成不同的跳转需要
<a href="http://www.baidu.com">baidua>//图片超链接
<a href="xxx">
<img src="/xxx/xxx"/>
a>//连接到页面其他位置
<a href="#名字">to'name'a>
<p>无关段落p>
<h3><a name="名字">我是标题3，也是要跳转的地方a> h3>
//或者使用id属性，作用和name相同
<a href="#name">to 'name'a>
<p>wuguan p><p><a id="name">to herea> p>//在新页面打开链接，只需将target设置为_blank
<a href="xxxxxx" target="_blank">新页面打开a>实际开发中常用的四种块状结构
- div-ul(ol)-li: 用于分类导航或菜单
- div-dl-dt-dd: 用于图文混合编辑
- table-tr-td: 用于行列表
- form-table-tr-td: 用于布局表单
万维网制定规范标准
- 标签名属性名必须小写
- 标签必须关闭
- 属性值必须用引号
- 标签必须正确嵌套
- 必须添加文档类型声明
特殊符号
- 空格：
- 大于号： >
- 小于号：<
- 引号： "
- 版权号： ©
综合演示
<html>
<head><meta charset="UTF-8"><title>我的页面title><style type="text/css">h1 {color: aqua;}p {color: blue;}style>head>
<body>
<a href="#hehe">跳转到呵呵a>
<h1>MYTITLEh1>
<h2>secondTitleh2>
<h3>thirdtitleh3>
<dl><dt><a name="hehe">呵呵a>dt><dd>definedd>dl>
<h4>4thtitleh4>
<h5>5thtitleh5>
<h6>6thtitle minh6>
<hr/>
<p>this is a paragraphp>
<p>this is anoteher paragraphp><p>+ HTML是超文本标记语言的缩写,它不是 <br/>一种编程语言，它是一种标记语言+ 浏览器是解释和执行HTML的工具， <br/>标签用来描述网页，因此网页不会显示标签<br/>#### meta>标签+ 描述文档类型和 <br/>字符编码+ 提供网页检索 <br/>的依据<br/>#### html <br/>标签分类<br/>+ 块级标签：显示为 <br/>块状，前后隔一行+ 行级标签：显示为行<br/>#### 常用标签table,form,div,dl+ 实际开发中常用的 <br/>四种块状结构<br/>+ 图像标签与属性 ：图片地址有相对 <br/>地址和绝对地址两类，相对地址主要有相对文件路径等，绝对地址比如超链接等，对于不同的图 <br/>片类型写入的格式是一样的，因为本身带有后缀名，浏览器也能够呈现出该有的状态<br/>在body中也可以设定background属性，指定网页的背景图，图片过小会重复通过align属性可以设定布局，相对于文 <br/>字的位置等，默认值是bottom ，设置为left/right属性可以指定浮动至段落的左侧或右侧指定的alt属性，如果图片正常加载，鼠 <br/>标悬浮于图片上时会显示alt文本，如果图片无法加载，会替换为alt文本```html<br/>+ 标题标签：\1>标题\1>,提供h1到h6的标题风格+ 段落标签：\<>段落/>,前后换行，为一个自然段+ 分割线标签： \/>，提供一行分p>
<hr/><ol><li>coffeeli><li>teali><li>waterli>ol><ul><li>coffeli><li>teali><li>waterli><ol><li>wwwli><li>eeeeli>ol>
ul><table border="1"><tr><td>1td><td>2td><td>3td>tr>table><a href="http://www.baidu.com">baidua><form>name:<input type="text" name="inch"><br/>sex:<input type="checkbox" name="insex">
form><div><ul><li>导航1li><li>导航2li><li>导航3li>ul>
div><form><table border="2" bgcolor="#7fffd4"><tr><td><input type="checkbox">td><td><input type="checkbox">td><td><input type="checkbox">td>tr><tr><td><input type="checkbox">td><td><input type="checkbox">td><td><input type="checkbox">td>tr><tr><td><input type="checkbox">td><td><input type="checkbox">td><td><input type="checkbox">td>tr>table>
form><form style="background-color: aquamarine"><input type="text"><br/><input type="date"><br/><input type="text"><br/><input type="checkbox" checked="checked"><br/><input name="radio" type="radio" value="boy">nan<input name="radio" type="radio" value="girl">nv<br/><input type="submit" value="tijiao"><br/><input type="reset" value="chongzhi"><br/><input type="file">
form><select name="xx" style="width: 30%"><option value="0">No1option><option value="0">No2option><option value="0">No3option><option value="0">©option>
select>
body>html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！