初学HTML5<step 1>
html5基础
一、internet与web
- 1.1 internet
- internet是个全球性的计算机互联网络，它提供的主要服务：Telnet/www/Email/BBS/FTP等。信息在internet上被分成许多小数据包（使用TCP/IP协议簇）进行传输，在目的地进行重组。
- 1.2 web
- web又称万维网或环球网，它将各种类型的信息和服务进行连接，提供生动的用户图形界面（可称为文档），web其实是无数文档的集合，这些文档就存在因特网的某个地方。
web的工作原理：由web服务器、浏览器、和通信协议组成，浏览器通过HTTP（超文本传输协议）向web服务器发出请求，web服务器应答并将信息发送给浏览器（主要以网页的形式发布），浏览器解释HTML网页文档，并显示在用户屏幕上。
二、HTML
- 2.1 HTML
- HTML是超文本标记语言，一种纯文本语言。用该语言编写的文件以.html或.htm为后缀,设计的网页由浏览器进行解释执行。在HTML页面上可以使用脚本语言编写的程序段，如VB/JS。
第一个学习的元素就是<html>
html作为超文本标记语言，它的元素如下表：
【上图网址http://www.html5star.com/manual/html5label-meaning/】
详细的元素标签使用方法可以在网上找《HTML5从rrumne入门到精通》
里面有详细内容，但是目录无法跳转，阅读十分不方便。
- 文本样式：就是对文本进行修饰
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<sub>下标</sub>
<sup>上标</sup>
-
标记语法分为单标记和双标记；元素是尖括号内的包围的部分，元素之间还可以相互嵌套；属性，每个元素都有自己所特有的属性,属性都有值，标准属性是绝大多数元素支持的属性，如id、title、class、style等。
注释
html文档结构
<!DOCTYPE html><html>
<head>
<title>HTML骨架</title>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="description" content="...">
<meta name="keywords" content="html,css,js"> </head>
<body>
<h1 align="center"></h1>
</body>
</html>文本
文本样式：对文本进行修饰，如<b>加粗</b>、<i>倾斜</i>等；
标题元素：<h#><h#>；
段落元素：<p></p>；
强制换行元素：
；
分区元素<span>行内分区</span>、<div>块内分区</div>；
分割线：
单标记；
预格式化：<pre></pre>，保留中间的格式； 图像和链接
[站外图片上传中……(2)]
<a href="http://www.apple.com" target="_self">点击浏览器会在原标签跳转到http://www.apple.com</a>
<a href="mailto:=266575219@qq.com?subject=我要请客吃饭&asda@163.com">发送邮件包含对象及内容或抄送对象</a>
<a href="压缩包.rar">下载文件</a><a href="图.png">打开图</a>
<a href="#锚点">适合远方</a>
<a href="javascript:...">链接到javascript 功能</a>
- 表格
表格由三种元素嵌套而成
table tr(行) td(列)
cellspacing：设置外边距
cellpadding：设置内边距
align:水平对其方式left/right/center
valign:横向对其方式top/middle/bottom
caption设置表格标题，必须跟在
table后面显示在表格上面
<table border="1" width="300px" height="300px" cellspacing="10" cellpadding="10"> <caption>表格名字</caption> <tr width="20" align="left" valign="top"> <td width="60">1</td> <td>2</td> <td>3</td></tr> <tr align="center" valign="middle"> <td>4</td> <td>5</td> <td>6</td> </tr> <tr align="right" valign="bottom"> <td>7</td> <td>8</td> <td>9</td> </tr> </table>
效果图
- 列表
- 有序列表ol和无序列表ul；
- li：指示具体列表内容；
- 列表中的type属性、列表的嵌套、定义列表。
结构标记 - 使用大量的div进行页面布局
- 表单
用于显示信息，并提交到服务器。使用<form></form>构建。
一些注意事项~~
checked:设置radio/checkbox的默认值
maxlength:设置最大字符数
select:
selected:默认选中项
size:让用户看到几个选项
option；列表项
textarea :
cols :设置宽 用字符数设置
rows:设置高
label: 与其他元素绑定，是实现选项点击选项按钮实现效果
for：实现绑定另一个元素id
按钮：<input type="submit"/>
<input type="reset">
<input type="button"/>跟JS搭配使用
<input type="hidden"/>
form属性 method:get/post
get:将数据放在url中，并对数据大小限制，且不安全
post:不将数据放在url中-->
<form> 用户名<input type="text" value="admin" name="user"/></br> 密 码<input type="password" value="admin"/> </br><input type="submit" value="ok"/>
</form>
- iframe
使用iframe在浏览器上显示多个 文档页面
<iframe src="http://www.baidu.com" width="500" height="500">
</iframe>
