1.1 HTML基础
1.1.1 什么是 HTML？
HTML 是用来描述网页的一种语言。
· HTML 指的是超文本标记语言 (Hyper Text Markup Language)
· HTML 不是一种编程语言，而是一种标记语言 (markup language)
· 标记语言是一套标记标签 (markup tag)
· HTML 使用标记标签来描述网页
1.1.2 HTML结构
<html></html> html5程序
<head></head> 头部 <title></title> 标题
<body></body> 躯干（文字、图片、链接）
1>:html不区分大小写，但推荐用小写。
2>:<style>…</style>定义CSS格式
1 <Script language=“”>…</Script>
2 用于定义脚本，Eg. Javascript
1.1.3 HTML标准开头 （！+Tab）文件后缀名为html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
1.1.4 HTML直接命名方式：
输入“网页.html” Ctrl+S 保存
1.1.5 HTML颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）
1.2 HTML标签
1.2.1 h1~h6 六种标题模式，格式大小依次减小
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h4>这是一个标题</h4>
<h4>这是一个标题</h4>
1.2.2 常见标签：
超级链接，跳转到另一文件
<a href=“url” target=“TargetWindow”>文字
</a>
*标题字体大小--<h#> #=1、2、3、4、5、6
*分隔线--<hr>
* ：空格
*<p>…</p>：分段落现实
*<div>…</div>(一层) <span>…</span>（行内块）
*分块显示：
<ul>…</ul>(列表)
<li type=“disc circle square”>…
*符号列表：
<ol>…</ol>
<li>…
*数字列表
*<br> 换行
*<nobr>…</nobr> 不换行
*<pre></pre>保留原有格式
*<marquee></marquee>跑马灯效果
*<blockquote></blockquote>
*<dl><dt><dd>
*对齐—align
<h1 align=“”>
<div align=“”>
<table align=“”>
<hr align=“”>
……
取值:left right center top middle bottom
*<img src=“” align=“” alt=“” border=“”>
Src 图片路径，一般使用相对路径
Alt 图片无法显示时显示的文字
Border 边框的厚度
Align = left right top middle bottom 图文混排时用于和图片的对齐
<p>这是一个段落</p>
水平线<hr/>
换行<br/>
引用<blockquote></blockquote>
预格式<pre></pre>
ol>li*3 + Tab 自动生成列表格式
<ol>
<li></li>
<li></li>
<li></li>
</ol>
h2*3 + Tab 自动生成3个
<h2></h2>
<h2></h2>
<h2></h2>
1.2.3 有序列表标签：
<ol>
<li>填写信息</li>
<li>提交信息</li>
<li>注册成功</li>
</ol>
1.2.4 无序标签：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
文字前面加项目号“点”
1.2.5 描述标签：
<dl>
<dt>标题</dt>
<dd>描述1</dd>
<dd>描述2</dd>
</dl>
标题
描述1
描述2
1.3 div把网页分成不同的布局、分区、容器
1.3.1 <!–注释–>
Ctrl+/ 注释选中的内容、注释该行
1.3.2 增加样式
< header>
//但是在显示上没有区别
头部logo、搜索框、目录等
</header>
<footer> //但是在显示上没有区别
尾部联系信息、版权信息等
</footer>
<footer style="background-color: blue">
这是尾部
</footer>
1.3.3 < nav>网页主导航
<nav>
<ul> //无序标签
<li>首页</li>
<li>产品介绍</li>
<li>公司新闻</li>
<li>技术中心</li>
<li>联系我们</li>
</ul>
</nav>
1.3.4 < hgroup> 标题组
<hgroup></hgroup>
1.3.5 < article>定义文章
<article></article>
1.4 HTML各种标签嵌套使用
1.4.1 < aside>侧边
<section>
定义节，表示专题
</section>
会生成大纲目录，而div不会生成
里面一般跟< h1>标题< h2> …… 不加的话会导致专题错乱
1.4.2 输入文字时，没有任何区别
<header>头部logo、搜索框、目录等</header>
<footer>尾部联系信息、版权信息等</footer>
<article>文章</article>
<section>定义节，表示专题</section>
<aside>侧边</aside>
<time>时间戳</time>
1.5 HTML 表单
1.5.1 <input> 元素
<input> 元素是最重要的表单元素。
<input>元素有很多形态，根据不同的 type 属性。
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
-
email
-
url
-
number
-
range
-
Date pickers (date, month, week, time, datetime, datetime-local)
-
search
-
color
<form action="/example/html5/demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
Homepage: <input type="url" name="user_url" /><br />
Points: <input type="number" name="points" min="1" max="10" /><br />
Points: <input type="number" name="points" min="1" max="10" /><br />
Date: <input type="date" name="user_date" />
<input type="submit" />
</form>
1.5.2 Action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
在上面的例子中，指定了某个服务器脚本来处理被提交表单
如果省略 action 属性，则 action 会被设置为当前页面。
<form action="action_page.php">
1.5.3 Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">
何时使用 GET？
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
action_page.php?firstname=Mickey&lastname=Mouse
GET 最适合少量数据的提交。浏览器会设定容量限制。
何时使用 POST？
如果表单正在更新数据，或者包含敏感信息（例如密码）。
POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。
1.5.4 Name 属性
如果要正确地被提交，每个输入字段必须设置一个 name 属性。
本例只会提交 “Last name” 输入字段：
<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
1.5.5 其他属性
用 组合表单数据 元素组合表单中的相关数据 元素为 元素定义标题。
属性
描述
accept-charset
规定在被提交表单中使用的字符集（默认：页面字符集）。
action
规定向何处提交表单的地址（URL）（提交页面）。
autocomplete
规定浏览器应该自动完成表单（默认：开启）。
enctype
规定被提交数据的编码（默认：url-encoded）。
method
规定在提交表单时所用的 HTTP 方法（默认：GET）。
name
规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate
规定浏览器不验证表单。
target
规定 action 属性中地址的目标（默认：_self）。
onsubmit
onsubmit 属性在提交表单时触发。onsubmit 属性只在<form> 中使用。
*<form>的属性
Method: (get post)
Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe
Post 数据长度无限制，不会显示在url中
Action:Form中数据交给服务器端哪个程序进行处理
*eg:<form method=“post” action=“user.jsp>……</form>
**位于<form>之中，接收用户输入:
格式：<input type=“” name=“”>
type:
text radio checkbox password hidden select submit reset button textarea image
name:
提交到服务器端的变量的名字
文本框 text
<input type=“text” name=“” value=“” maxlength=“” size=“”>
maxlength – 最大字符长度
size – 文本框宽度（字符）
密码区域—特殊的单行文本输入框 password
<input type=“password” name=“” value=“” size=“” maxlength=“”>
单选按钮
<input type=“radio” name=“” value="" checked>
典型用法 : 同一名字，不同的值
错误的用法 : 不同的名字
复选框
<input type=“checkbox” name=“” value=“” checked>
典型的用法 : 同一name，不同的value
隐藏域
<input type=“hidden” name=“” value=“”>
不显示在网页中
通常用作向下一个页面传输已知信息或表单的附加信息
1.5.6 分块：
<frameset cols=“20%,*”> <frame name=“left” src=“a.htm”> <frameset rows=“40%,*”> <frame name=“righttop” src=“b.htm”> <frame name=“rightbottom”
src=“c.htm”> </frameset> </frameset>
html中username表单的验证：
<input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())">
<span id="usernameErr"></span>
js代码：
function checkUserName(ssn){
if( ssn.length<3 || ssn.length>18 ) {
document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名长度为3-18位！</font>";
form.username.focus()
return false;
}
- 始终为属性值加引号
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='Bill "HelloWorld" Gates'
1.6 HTML参考手册
1.6.1 HTML Basic Document
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
1.6.2 Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
1.6.3 Logical Styles
<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>
1.6.4 Physical Styles
<b>This text is bold</b>
<i>This text is italic</i>
1.6.5 Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
1.6.6 Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
1.6.7 Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
1.6.8 Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
1.6.9 Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
1.6.10 Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
1.6.11 Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>
1.6.12 Entities
< is the same as <
> is the same as >
© is the same as ©
1.6.13 Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
tobehero666.png
网友评论