微信小程序开发之路

第一部分——HTML

HTML是超文本标记语言的缩写,它不是一种编程语言，它是一种标记语言
浏览器是解释和执行HTML的工具，标签用来描述网页，因此网页不会显示标签

<meta>标签

描述文档类型和字符编码 ,比如其中的charset，通常设置为UTF-8，防止浏览器载入时乱码
提供网页检索的依据，比如name属性中定义的关键词就是搜索引擎分类检索的依据

html标签分类

块级标签：显示为块状，前后隔一行
行级标签：显示为行

常用标签

可以用<title>name</title>定义页面名称
标题标签：<h1>标题</h1>,提供h1到h6的标题风格
段落标签：<p>段落</p>,前后换行，为一个自然段
分割线标签： <hr/>，提供一行分割线，不成对
有序列表：列表元素带数字序号

<ol>
<li>coffee</li>
<li>tea</li>
<li>water</li>

</ol>

无序列表：列表元素用原点分布

<ul>
<li>coffe</li>
<li>tea</li>
<li>water</li>
</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>title</dt>
<dd>define</dd>


</dl>

表格标签：其中border属性表示边框尺寸，tr声明行，td声明列，有几对就是有几行，每行里面有几列

<table border="1">
<tr>
<td colspan="2">1</td>
<td>2</td>
<td>3</td>
</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">No1</option>
    <option value="0">No2</option>
    <option value="0">No3</option>
    <option value="0">&copy</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"/>

相对地址不安全，容易被攻击

强调标签：<span>text</span>
换行标签： <br/>此标签没有空行，两个p标签之间会空行
范围标签：div标签用来划分块
链接标签： a标签，也叫做anchor锚点元素，href属性是目的的超链接，通过对href值的设定完成不同的跳转需要

<a href="http://www.baidu.com">baidu</a>

//图片超链接
<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 here</a> </p>

//在新页面打开链接，只需将target设置为_blank
<a href="xxxxxx" target="_blank">新页面打开</a>

实际开发中常用的四种块状结构

div-ul(ol)-li: 用于分类导航或菜单
div-dl-dt-dd: 用于图文混合编辑
table-tr-td: 用于行列表
form-table-tr-td: 用于布局表单

万维网制定规范标准

标签名属性名必须小写
标签必须关闭
属性值必须用引号
标签必须正确嵌套
必须添加文档类型声明

特殊符号

空格： &nbsp
大于号： &gt
小于号：&lt
引号： &quot
版权号： &copy

综合演示

<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>MYTITLE</h1>
<h2>secondTitle</h2>
<h3>thirdtitle</h3>
<dl>
    <dt><a name="hehe">呵呵</a></dt>
    <dd>define</dd>


</dl>
<h4>4thtitle</h4>
<h5>5thtitle</h5>
<h6>6thtitle min</h6>
<hr/>
<p>this is a paragraph</p>
<p>this is anoteher paragraph</p>

<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>coffee</li>
    <li>tea</li>
    <li>water</li>

</ol>

<ul>
    <li>coffe</li>
    <li>tea</li>
    <li>water</li>
    <ol>
        <li>www</li>
        <li>eeee</li>
    </ol>
</ul>


<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

</table>

<a href="http://www.baidu.com">baidu</a>

<form>
    name:
    <input type="text" name="inch">
    <br/>
    sex:
    <input type="checkbox" name="insex">
</form>


<div>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
    </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">No1</option>
    <option value="0">No2</option>
    <option value="0">No3</option>
    <option value="0">&copy</option>
</select>
</body>

</html>

原文链接：https://blog.csdn.net/ZP_icenow/article/details/87936686