RectNative开发—Html篇

来源：互联网发布：视频图像拼接软件编辑：程序博客网时间：2024/06/01 19:26

前言

Html是用来描述网页的一种语言，Html指的是超文本标记语言（Hyper Text Markup Language）,Html不是一种编程的语言而是一种标记语言，由一套标记标签来描述网页;Html标记标签通常被称为Html标签，是由尖括号包围的关键词并且是成对出现的，第一个标签是开始标签，第二个是结束标签

Part 1、一般标签

骨架结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title></head><body></body></html>

tips:

1、DOCTYPE ：不是html标签，它是用来声明用来声明我们的标签用哪个版本来编写

2、meta ：元 charset字符编码都有utf-8万国码、gb2312，utf-8一个汉子占用三个字符，gb2312一个汉子占用两个字符；用meta也可以来定义关键词只需要另name="keywords"即可，某些搜索引擎再遇到这些关键字的时候，会用这些关键字对文档进行分类。

3、title ：定义文档的标题，浏览器会以特殊的方式来使用标题，并且通常把它放置再浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表的时候，标题将称为该文档链接的默认名称

这里列举一些标签

        这里列举几个：            h  ： 标题系列            p  :  段落            span  没有语义，但是再文字当中需要加一些额外的样式的时候是用            br    换行            hr    水平线            img   图片            a     超链接            ul    无序列表 ul的下一级只能是li            ol    有序列表            dl    dt相当于一个小的title，dt就是对这个小的title的描述        a标签的作用            1、链接倒指定的其他链接            2、通过id属性值可以跳到内部的某个锚点            3、邮件

dl标签的使用

    <dl>        <dt>小标题01</dt>        <dd>小标题01的内容</dd>        <dt>小标题02</dt>        <dd>小标题02的内容</dd>    </dl>

效果~

a标签通过id属性值可以跳倒内部的某个描点

    <a href="#goto">跳转goto的位置</a>    <h3 id="goto">goto的位置</h3>

Part 2、表格标签

标签：

        Table里面的标题 不能用h系列        caption   表示表格的标题        tr        表示表格的一行        td        表示表格里面的内容        rowspan   跨行        colspan   跨列        跨行和跨列同时使用的时候基本就再tfoot标签，再这个时候再tfoot标签里面只加一个td标签，        虽然说分好区域之后，再我们的网页中没有看出任何的改变，但是这个分区域体现了我们的专业程度

实例

    <table border="1">        <caption>课程表</caption>        <thead>        <tr>            <th>  </th>            <th>周一</th>            <th>周二</th>            <th>周三</th>            <th>周四</th>            <th>周五</th>        </tr>        </thead>        <tbody>        <tr>            <th rowspan="4">上午</th>            <td>体育</td>            <td>美术</td>            <td>数学</td>            <td>英语</td>            <td>语文</td>        </tr>        <tr>            <td>地理</td>            <td>历史</td>            <td>化学</td>            <td>物理</td>            <td>生物</td>        </tr>        <tr>            <td>地理</td>            <td>历史</td>            <td>化学</td>            <td>物理</td>            <td>生物</td>        </tr>        <tr>            <td>地理</td>            <td>历史</td>            <td>化学</td>            <td>物理</td>            <td>生物</td>        </tr>        <tr>            <th>中午</th>            <td colspan="5">午休</td>        </tr>        <tr>            <th rowspan="2">下午</th>            <td>诗歌</td>            <td>舞蹈</td>            <td>钢琴</td>            <td>手绘</td>            <td>自习</td>        </tr>        <tr>            <td>生物</td>            <td>历史</td>            <td>政治</td>            <td>英语</td>            <td>数学</td>        </tr>        </tbody>        <tfoot>        <tr>            <td rowspan="3" colspan="6">                好好学习，天天向上            </td>        </tr>        </tfoot>    </table>

效果~

基本表格就这些内容

Part 3、表单

用户提交是有两种方式的

post ：把用户输入的信息进行打包，然后传送，比较安全

Get ：只能够传送文本的信息，会把用户输入的信息暴露出来

标签

用户名：<input type="text" value="请输入您的用户名"/>

当你鼠标点击用户名的区域，鼠标将不是箭头并且点击没有任何效果，然而再很多时候我们的需求是希望点击用户名区域能够选中输入框，这时候就需要引入label标签

label标签：其实是起一个辅助的作用，可以让我们用鼠标点击这个区域就能够选中我门需要的那个区域，其中for属性值要和id的属性值保持一致才能够选中

        <label for="username">用户名：</label>        <input type="text" name="username" id="username" value="请输入您的用户名"/>

除了这些标签以外还有下拉列表标签

        <select name="place" id="">            <option value="shanghai">上海</option>            <option value="beijing" selected="selected">北京</option>            <option value="guangdong'">广东</option>            <option value="shandong">山东</option>        </select>

这里要注意的是当用户选择之后传入后台的是value值，所以option的value要保持不同；selected为默认选中的项

Html简单介绍就完毕了，更多内容可以查看http://www.w3school.com.cn/index.html

最后通过列举块级元素、行内元素区别来结束文本

        块级元素:特点是独占一行，可以设置宽和高 bolock            Div、p、h、table、ul、ol        行内元素:特点是再同一行显示，不能设置宽和高 inline            Span、a、td、th、input        嵌套规则            1、块元素可以包含行内级元素或某些块元素，但行内级元素却不能包含块元素，            它只能包含其他的行内元素            2、块级元素不能放在p标签里面            3、有几个特殊的块级元素只能包含行内元素，不能再包含块级元素，这几个特殊的标签是：            h1、h2、h3、h4、h5、h6、p、dt

0 0