HTML5 App应用开发教程-第02章_第1页
HTML5 App应用开发教程-第02章_第2页
HTML5 App应用开发教程-第02章_第3页
HTML5 App应用开发教程-第02章_第4页
HTML5 App应用开发教程-第02章_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

本章要点

了解HTML语言特性。掌握HTML5文档的基本格式。熟练掌握HTML语言中的布局div标签、各种文本控制标签、图像img标签、超链接a标签、列表标签、页面交互性标签、表格table标签、表单form标签、各种input输入标签、select标签等的使用。

HTML5页面的扩展名是.html或.htm，页面上所展示的内容就是由HTML（HyperTextMarkupLanguage超文本标记语言)所构建的。它是标签标记式语言（uni-app的组件也是采用的这种设计方式），所以非常简单，易于掌握，最重要的是它与平台无关。HTML简介HTML简介1.标签

标签是由一对尖括号包裹的单词构成的，推荐使用小写字母。标签通常是成对出现的，分为开始标签和结束标签，在它们中间的是标签体：

<标签名>标签体</标签名>

自结束标签：

<标签名/>

标签是可以嵌套的，但是注意一定不要出现交叉嵌套HTML简介2.标签的属性：<标签名属性名=”属性值”>标签体</标签名>或<标签名属性名=”属性值”/>3.注释标签<!--注释语句-->HTML5文档基本格式

1.DTD声明

<!DOCTYPEhtml>2.根标签<html></html>3.头部标签

<head></head>

引用脚本、指示浏览器在哪里找到样式表、提供元信息等<metacharset="UTF-8">

当前页面采用的编码格式是“UTF-8”HTML5文档基本格式

<title></title>

用来定义文档的标题4.主体标签<body></body>

用于定义HTML文档所要显示的内容

一个容器，在这个容器中可以放置各种标签内容，我们主要是通过<div>标签来实现各种各样的布局效果：<div>内容</div>默认宽度与高度自适应布局div标签1.标题h标签文本控制标签<h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6>2.段落p标签文本控制标签<p>段落内容</p>3.水平线hr标签4.换行br标签文本控制标签<hr/><br/>5.特殊字符标记文本控制标签6.修饰span标签文本控制标签HTML中的<spanstyle="color:red">span标签</span>标准用途是什么?图像标签

网络路径：

<imgsrc="cn/imgs/bd_logo.png"alt="百度的Logo"/>

本地路径：<imgsrc="../img/baidu.png"alt="百度的Logo"/>图片的base64编码：<imgsrc="data:image/png;base64,图片的base64编码/>超链接a标签<!--普通的文字超链接-->

<ahref=""target="_blank">打开网易</a><ahref="example-2.4.html">打开上个例子</a><!--图片超链接--><ahref=""><imgsrc="../img/163.png"/></a>

超链接a标签<!--拨打电话--><ahref="tel:10086">拨打电话</a><!--发送短信-->

<ahref="sms:10086">发送短信</a><!--发送Email--><ahref="mailto:mail@">发送邮件</a>

超链接a标签列表标签1.无序列表ul<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li></ul>列表标签2.有序列表ol<oltype="项目符号类型值"start="项目符号开始的数值"> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <li>列表项4</li></ol>语义化标签

将每个区域语义化，让页面结构更清晰，更利于SEO音视频标签<audioid=”myaudio”><sourcesrc="song.ogg"type="audio/ogg"><sourcesrc="song.mp3"type="audio/mpeg">你的浏览器不支持audio标签</audio><videoid=”myvideo”><sourcesrc="song.ogg"type="video/ogg"><sourcesrc="song.mp4"type="video/mp4">你的浏览器不支持video标签</video>音视频标签表格标签

<tableborder="1"> <tr> <td>一年</td> <td>1.75</td> </tr> <tr> <td>二年</td> <td>2.25</td> </tr>……</table>表格标签

使用thead、tfoot、tbody使用使用rowspan=“2”colspan=“2”表单的应用表单是页面的重要组成部分，它收集用户的输入信息，并将这些信息发送给服务端程序进行处理。表单由表单form标签和各种输入标签组成。form标签<formmethod="提交方式"action="服务端url"enctype="编码方式">

</form>method属性：用于规定如何发送表单的数据，数据会发送到action属性所定义的服务端，它分为get和post两种方式。get方式表单的应用是默认值，使用这种方法提交的数据将会附加在服务端url之后，以?与url分开。使用这种方式传输的数据量小，由于受到url长度的限制，最多只能传递1KB。字母数字字符原样发送，空格转换为”+”，其它符号转换为%XX,其中XX为该符号以16进制表示的ASCII（或ISOLatin-1）值。例如：/?x=2&y=3post方式传递的数据量较大，它把数据作为http请求的内容，数据不会附加在url之后。action属性：指明表单数据要发送到的页面或APIURL，如果这个属性是空的或未写，那么当前的文档URL将被使用。表单的应用enctype属性：可省略，规定在发送到服务器之前应该如何对表单数据进行编码表单的应用2.各种input输入标签

（1）单行文本输入框<inputtype="text"value="张三丰"/>

（2）密码输入框

<inputtype="password"value="12345"/>

表单的应用（3）普通按钮<inputtype="button"value="普通按钮"/>

（4）单选框<inputtype="radio"checked/>男

（5）复选框<inputtype="checkbox"checked/>同意与否

表单的应用（6）提交按钮，与普通按钮没有什么区别，不同的是它会引起表单提交

<inputtype="submit"value="注册"/>

（7）图片提交按钮<inputtype="image"src="../img/micky.jpg"/>

表单的应用（8）重置按钮，恢复表单的初始状态，<inputtype="reset"value="取消"/>

（9）隐藏域,在界面上是不显示的，主要用来在表单向服务器提交一些隐藏的数据

<inputtype="hidden"value="这是隐藏的值"/>

(10)文件上传域

<inputtype="file"multiple/>

表单的应用

（11）Email输入文本框<inputtype="email"/>

（12）URL输入文本框<inputtype="url"/>

(13)电话输入文本框<inputtype="tel"/>

（14）关键词搜索文本框

表单的应用

<inputtype="search"/>（15）颜色设置文本框

<inputtype="color"/>表单的应用（16）数字输入框<inputtype="number"value="当前值"min="最小值"max="最大值"step="值的间隔"/>

（17）滑动条<inputtype="range"value="当前值"min="最小值"max="最大值"step="值的间隔"/>

表单的应用（18）日期和时间输入框

<inputtype="date"/>

表单的应用<inputtype="month"/>

表单的应用<inputtype=“week”/>（iOS不支持）

表单的应用<inputtype="time"/>

表单的应用<inputtype="datetime-local"/>

表单的应用3.input输入标签的其他属性

（1）placeholder

（2）required

（3）

pattern：正则表达式

（4）disabled

（5）autofocus

表单的应用4.其他表单标签

（1）textarea

（2）select

<textarea>文字内容在这里！</textarea>表单的应用

<select> <optionvalue="item1">选项1</option> <optionvalue="item2"selected>

选项2</option> <optionvalue="item3">选项3</option> <optionvalue="item4">选项4</option></select>meta标签1.SEO辅助<metaname="keywords"content="视频,视频分享,视频搜索,视频播放"><metaname="description"content="视频服务平台,提供视频播放,视频发

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论