HTML基本语法简介

xml 可扩展标记语言
http 超文本链接
html5（http+xml+v5）超文本的一个标记语言第五个版本，14年才定制完。

为什么用H5

1> 跨平台
利用HTML5编写的UI界面能运行在所有拥有浏览器的平台
2> HTML5的运行平台：浏览器
3> 但是HTML5不能完成一些特定的功能，比如：拍照(ImagePickerController)、访问相册....

如何使用HTML5

1> 自己编写大量的HTML5代码
2> 使用现成的HTML5框架

sencha-touch
phoneGap
jQuery mobile
Bootstrap

手机APP的开发模式
1> 原生（纯OC）
2> 纯HTML5
3> 原生+HTML5
4> React Native
开发工具
1> Android
eclipse、MyEclipse、android studio
2> iOS
Xcode
3> HTML5
eclipse、MyEclipse
后端喜爱
Dreamwaver
网⻚三剑客 Dreamwaver、Flash、Fireworks -> Adobe
WebStrom
前端喜爱,⼤神编辑器,默认集成各种各样的插件,配⾊完美

一个有具体功能的完整的网页，一般由3部分组成
HTML
网页的具体内容和结构

CSS
网页的样式（美化网页最重要的一块）

JavaScript(掌握)
网页的交互效果，比如对用户鼠标事件做出响应

HTML\CSS\JavaScript学习资料：http://www.w3school.com.cn/

常见的HTML标签

标题：h1、h2、h3、h4、h5、h6
段落：p
换行：br、 hr(分割线)
容器：div(独占一行)、span（根据内容调整宽度）（用来容纳其他标签）
表格：table、tr、td
列表：ul、ol、li
图片：img
表单：input
链接：a

<header>里面包含css和js代码
<meta charset="utf-8"> header中设置编码，防止title乱码这个只设置一次! utf-8支持所有国家的语言
<body>包含html代码
<input placeholder="我是占位文字"> 没有闭合标签的都是单标签

<!--图像标签-->
    <!--
        src 资源路径   alt:占位文字
        相对路径:  XX/ XXX/ X/X/
        绝对路径:  http:// file:///
    -->
    <!--关于图片尺寸的设置,如果设置一个宽度,高度不设置默认帮你设置成为 auto 自动缩放-->
    <img src="img/img_01.jpg" alt="这是一张图片" width="150" >
    <!-- 百分比是相对于父标签!!! -->
    <img src="img/img_02.jpg" width="50%">

    <!--超链接标签 target : 打开网页的方式-->
    <!--
    _blank : 空白窗口
    _self: 当前窗口跳转(压栈的操作)
    _top : 点击我就回到顶部
    _parent: 父标签,父窗口
    -->
    <a target="_top" href="#">我是超链接</a>
    <!-- 相当于push  压栈的操作!!  默认target属性是:self  -->
    <a href="//jd.com">haah</a>
    <!--# 就是当前页面-->
    <a href="#">我也是超链接</a>

？理解一下target

_blank : 空白窗口
_self: 当前窗口跳转(压栈的操作)默认
_top : 点击我就回到顶部（href="#"时起作用，否则跟_self一样的效果）
_parent: 父标签,父窗口（自己测跟_self一样的效果）

src 引入资源，对标签是必须的，没有标签都不显示
href 引用，不必须
<div>相当于我们的view

HTML基本语法简介

为什么用H5

如何使用HTML5

推荐阅读更多精彩内容