web前端学习（二）html学习笔记部分（11）-- 没有标号记录的知识合集
这一部分内容相对比较简单，就不按规矩排序了。（主要是网站上也没有这一部分内容的排序）
1. html5的 非主体结构元素
学习笔记（1）里面记录过。
2. html5表单提交和PHP环境搭建
1. php环境搭建
详见我的下一篇随笔
2. html5表单的创建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <form action=""> 用户名： <input type="text"> <br/> 密码： <input type="password"> <br/> 你喜欢的水果有？ <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <br/> 请选择您的性别： 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <!--radio的name属性必须是一样的，否则就会出现两个选项都可以选了--> <!--下拉列表：select标签--> <select name="" id=""> <option value="">www.jikexueyuan.com</option> <option value="">www.google.com</option> <option value="">www.iwen.com</option> </select> <input type="button" value="按钮"> <input type="submit" value="submit提交"> </form> <!--文本域可以在表单form之外创建--> <textarea name="" id="" cols="30" rows="10"></textarea> </body> </html>
3. html5表单与php交互
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <form action="http://localhost:8000/newPHPProject/newfile.php" method="get"> <!--get提交的时候表单的内容都要写一遍 post提交的时候什么都不写--> 用户名： <input type="text" name="name"> <br/> 密码： <input type="password" name="password"> <br/> 你喜欢的水果有？ <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <br/> 请选择您的性别： 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <!--radio的name属性必须是一样的，否则就会出现两个选项都可以选了--> <!--下拉列表：select标签--> <select name="" id=""> <option value="">www.jikexueyuan.com</option> <option value="">www.google.com</option> <option value="">www.iwen.com</option> </select> <input type="button" value="按钮"> <input type="submit" value="submit提交"> </form> <!--文本域可以在表单form之外创建--> <textarea name="" id="" cols="30" rows="10"></textarea> </body> </html>
newfile.php
<?php echo "hello\n"; echo "用户名：".$_GET['name']."<br>密码：".$_GET['password']; // 点是用来链接字符串的，就这么蛋疼，有时候不知道一个小点就很难受，毕竟完全没有认真学习php知识 // 上面使用的get提交表单的方法就用get，用post方法提交表单的方法就用post echo $_GET['name'];
3. html5开发前准备
3.1 html5开发前的准备
1. 为什么学习html5？
自从2010年html5正式推出以来，它立刻收到了世界各大浏览器的热烈欢迎和支持。根据世界上各大IT界知名媒体的评论，新的web时代，html5的时代马上到来。
跨平台运行
硬件要求低
flash之外的选择
2. 软硬件环境
硬件：双核、2g内存
软件：windows、mac OS X、linux
3. 介绍HTML5
1）什么是html5？
HTML是用来描述网页的一种语言
HTML是指超文本标记语言（Hyper Text Markup Language）
HTML是不是编程语言，是一种标记语言
2）HTML5的新特性：
用于绘画的canvas标签
用于媒介回放的video和audio元素
对本地离线存储的更好支持
新的特殊内容元素
如：article、footer、header、nav、section
新的表单控件：
如：calendar、date、time、email、url、search
浏览器的支持：
Safari、Chrome、Firefox以及Opera包括IE9基本支持了HTML5
4. 环境搭建
开发工具
常用：WebStorm、notepad++、Eclipse、text sublime、Dreamweaver
推荐：Intellij IDEA
5. 常见问题解决
寻求问题根源
查看参考文档
参考示例
常见问题通过搜索引擎搜索
问题反馈
6. 需要掌握的技能
HTML5
XHTML
CSS3
JavaScript
jQuery：
jQuery-UI
jQuery-Mobile
掌握一些常用的快捷键
4. html5框架、背景和实体
4.1 框架（框架在html5中已经过时了）
框架标签（frame）：
框架对于页面的设计有着很大的作用
框架集标签（<frameset>）:
框架集标签定义如何将窗口分割为框架
每一个frameset定义一系列行或列
rows/cols的值规定了每行或每列占据屏幕的面积
常用标签：
noresize：固定框架大小
cols：列
rows：行
内联框架（现在很重要的框架，详细讲解）：
frameset示例：
frama.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body bgcolor="#efca65"> </body> </html>
framb.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body bgcolor="#333333"> </body> </html>
framc.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body bgcolor="aaaaaa"> </body> </html>
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <frameset rows="10%,10%,10%"> <!-- 写百分比和不够100不影响最终的布局，因为都是按比例调的 --> <frame src="framea.html"></frame> <frame src="frameb.html"></frame> <frame src="framec.html"></frame> </frameset> </html>
最重要的内联框架iframe
顺便讲解target的四种的区别（_self，_blank，_parent，_top）
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <a href="http://www.jikexueyuan.com" target=""></a> <body> <iframe src="framec.html" frameborder="0" width="800px" height="800px"></iframe> </body> </html>
framea.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body bgcolor="#efca65"> framea <br/> <a href="www.baidu.com" target="_top">百度</a> </body> </html>
frameb.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body bgcolor="#333333"> frameb <br/> <iframe src="framea.html" width="400px" height="400px"></iframe> </body> </html>
framec.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body bgcolor="aaaaaa"> framec <br/> <iframe src="frameb.html" width="600px" height="600px"></iframe> </body> </html>
4.2 背景、颜色
背景标签：
Background
背景颜色：
Bgcolor
示例：
<body background="cat.jpg"> <!--这里的猫图片是重复的--> </body> <body bgcolor="#111111"> <!--这里的猫图片是重复的--> </body>
4.3 实体
HTML中预留字符必须替换成字符实体
如：<(<)、>(>)、&、
直接在百度中搜索html实体就可以搜到。
5. html5列表、块和布局
5.1 html5列表的使用
列表标签
<ol> 有序列表
<ul> 无序列表
<li> 列表项
<dl> 列表
<dd> 描述
1. 无序列表
使用标签：<ul> <li>
type属性选择：disc（实体圆）、circle（空心圆）、square（方块）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>list</title> </head> <body> <ul type="square"> <li>ios</li> <li>java</li> <li>前端</li> <li>php</li> </ul> <!--默认type是实心圆--> </body> </html>
2. 有序列表
使用标签：<ol><li>
属性：A、a、l、i、start
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>list</title> </head> <body> <ol type="a" start="3"> <!--start里面必须是数字，不关type是什么类型的--> <li>ios</li> <li>java</li> <li>前端</li> <li>php</li> </ol> <!--默认type是数字，start是开始的第一个字符--> </body> </html>
3. 嵌套列表
<ul>、<ol>、<li>
顾名思义就是列表嵌套
4. 自定义列表
<dl>、<dt>、<dd>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>list</title> </head> <body> <dl> <dt>helloworld</dt> <dd>哈哈哈哈哈哈哈哈</dd> <dt>helloworld</dt> <dd>哈哈哈哈哈哈哈哈</dd> </dl> </body> </html>
5.2 html5块元素标签的使用
html块元素
块元素在显示时，通常会以新行开始
如：<h1>、<p>、<ul>
html内联元素
内联元素通常不会以新行开始
如：<b>（加重元素）、<a>、<img>
html<div>元素
<div>元素也被称为块元素，其主要是组合HTML元素的容器
html<span>元素
<span>元素是内联元素，可作为文本的容器
注：css中的color元素改的是内部所有没有样式的文字的颜色。
5.3 html5布局的使用
1. 使用<div>元素布局
2. 使用<table>元素布局
div布局示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>unusual_title</title> </head> <style type="text/css"> body{ margin:0px; } div#container{ width:100%; height:950px; background-color:darkgray; } div#heading{ width:100%; height:10%; background-color: aqua; } /*写div一般是很麻烦的，一般都是会删掉的*/ #content_menu{ width:100%; height:10%; background-color: aquamarine; } #content_body{ width:70%; height:80%; background-color: blueviolet; float:left; } #footing{ width:100%; height:10%; /*百分比指的都是占父元素的百分比；*/ background-color: black; clear:both; /*clear：both功能是清除左右两侧的浮动元素，否则无法显示这一层的内容*/ } </style> <body> <div id="container"> <div id="heading">heading</div> <div id="content_menu">content_menu</div> <div id="content_body">content_body</div> <div id="footing">footing</div> </div> </body> </html>
table布局示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body marginheight="20px" marginwidth="30px" bgcolor="#8a2be2"> <!--marginheight和marginwidth指的是body边界的上下margin和左右两边的margin--> <table width="100%" height="950px" style="background-color: darkgray"> <tr> <td colspan="3" width="100%" height="10%" style="background-color: aqua">这是头部</td> </tr> <tr> <td width="20%" height="80%" style="background-color: blue"> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </td> <td width="60%" height="80%" style="background-color: blueviolet">内容主体</td> <td width="20%" height="80%" style="background-color: blue">右菜单</td> </tr> <tr> <td width="100px" height="10%" colspan="3" style="darkcyan">这是底部</td> </tr> </table> </body> </html>
6.html5特性简介
什么是html
html是用来描述网页的一种语言
html指超文本标记语言
html不是编程语言，是一种标记语言
2012年出现的html5，2013年出现的xhtml
学好html5需要学好以下知识
html、xhtml、css、css3、JavaScript、JQuery、HTML5
HTML新特性
1.用户绘画的canvas标签
2.用于媒介回访 video和audio元素
3，对本地离线储存的更好支持
4.新的特殊内容元素
如：article、footer、header、nav、section
5.新的表单控件
如：calendar、date、time、email、url、search
6.浏览器的支持
Safari、Chrome、Firefox以及Opera包括IE9基本支持了HTML5
集成开发环境搭建
intellij idea软件可以编写web前端程序；
下载时选择下载收费版，收费版功能更加齐全。
7.html5样式、链接和表格
7.1html5样式
1.标签
<style> :样式定义
<link>:资源定义
2.属性
rel="stylesheet" : 外部样式表
type="text/css" :引入文档的类型
margin-left：外边距
3.三种样式表插入法
外部样式表：
<link ref="stylesheet" href="" type="text/css">
内部样式表：
<style>
</style>
内联样式表：
<p sytle="color:red">
7.2html链接
1.链接数据
文本数据
图片链接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.baidu.com">文字链接</a> <a href="http://www.baidu.com"> <img src="html.png" alt="图片加载失败(图片链接)"> </a> </body> </html>
2.属性：
href属性：指向另一个文档的链接
name属性：创建文档内的链接
3.img标签属性
alt：替换文本属性
width：宽
height：高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.baidu.com">文字链接</a> <a href="http://www.baidu.com"> <img src="html.png" alt="图片加载失败" width="20px" height="30px"> </a> <a name="tips">hello</a> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <a href="#tips">跳转到hello</a> <!--意思就是跳转到name为tips的文档内的链接--> </body> </html>
7.3 html表格
| <table> | 定义表格 |
| <caption> | 定义表格标题 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格的单元 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
| <col> | 定义表格的列属性 |
1.没有边框的表格
<table border="0px">
2.表格中的头
<table border="1px"> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格222</td> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格22</td> </tr> </table>
3.空单元格
4.带有标题的表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>表格头种类1</p> <table border="1px"> <caption>表格头种类2</caption> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格222</td> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格22</td> </tr> </table> </body> </html>
5.表格内的标签
顾名思义
6.单元格边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>表格头种类1</p> <table border="5px"> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格222</td> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格22</td> </tr> </table> <br/> <br/> <table border="5px" cellpadding="5px"> <!--cellpadding调细胞单元格的内边距（padding）--> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格222</td> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格22</td> </tr> </table> </body> </html>
7.单元格间距
table的border属性设置的是内部小单元格的边距，要通过设置单元格的边距来消除多重border
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>表格头种类1</p> <table border="5px"> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格222</td> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格22</td> </tr> </table> <br/> <br/> <table border="5px" cellspacing="5px"> <!--cellpadding调细胞单元格之间的外边距（padding）--> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格222</td> </tr> <tr> <td>单元格222</td> <td>单元格222</td> <td>单元格22</td> </tr> </table> </body> </html>
8.表格内的背景颜色和图像
9.单元格内容排列
10.跨行和跨列单元格
8.html元素、属t性和格式化
元素指的是从开始标签到结束标签的所有代码
| 开始标签 | 元素内容 | 结束标签 |
| <p> | this is my web page | </p> |
| <br/>(也叫空标签) |
标签以键/值对的形式出现
常用标签属性：<h1>:align 对齐方式
通用属性：
title：规定元素的额外信息
格式化：
| <b> | 定义粗体文本 |
| <big> | 定义大号字 |
| <em> | 定义着重文字 |
| <i> | 定义斜体字 |
| <small> | 定义小号字 |
| <strong> | 定义加重语气 |
| <sub> | 定义下标 |
| <sup> | 定义上标 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
9.XHTML的使用规范
1.什么事XHTML
XHTML指的是可扩展超文本标记语言
XHTML与HTML4.01几乎是相同的
XHTML是更严格更纯净的HTML版本
XHTML是以XML应用的方式定义的HTML
XHTML的到所有主流浏览器的支持
2.为什么使用XHTML
为了代码的完整性和良好性
3.文档声明：
DTD：规定了使用标记语言的网页语法
4.三种XHTML文档类型
STRICT（严格类型）
TRANSITIONAL（过渡类型）
FRAMESET（框架类型）
5.XHTML 1.0 Strict：
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">
该DTD包含所有HTML元素和属性，但不包括展示性和弃用的元素（比如font），不予许框架集（Framesets）。
XHTML需要写标准的语法
XHTML元素语法：
XHTML元素必须正确嵌套
XHTML元素必须始终关闭
XHTML元素必须小写
XHTML文档必须有一个根元素
XHTML属性语法规则
XHTML属性必须使用小写
XHTML属性值必须用引号包围
XHTML属性最小化（必须使用小写字母）也是禁止的
