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属性最小化（必须使用小写字母）也是禁止的
web前端学习（二）html学习笔记部分（11）-- 没有标号记录的知识合集的更多相关文章
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- web前端开发控件学习笔记之jqgrid+ztree+echarts
版权声明:本文为博主原创文章,转载请注明出处. 作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...
- 2022年Web前端开发流程和学习路线（详尽版）
前言 前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理.理论上,面向用户的产品里,所有问题(包括产品.设计.后端.甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题 ...
- web前端零基础入门学习！前端真不难！
现在互联网发展迅速,前端也成了很重要的岗位之一,许多人都往前端靠拢,可又无能为力,不知所措,首先我们说为什么在编程里,大家都倾向于往前端靠呢?原因很简单,那就是,在程序员的世界里,前端开发是最最简单的 ...
- 最适合2018年自学的web前端零基础系统学习视频＋资料
这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
- 史上最全的web前端开发程序员学习清单！
今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我回答过无数次这种问题了,但是问这个的还是有 ...
- WEB 前端模块化，读文笔记
文章链接 WEB 前端模块化都有什么? 知识点 根据平台划分 浏览器 AMD.CMD 存在网络瓶颈,使用异步加载 非浏览器 CommonJS 直接操作 IO,同步加载 浏览器 AMD 依赖前置 req ...
随机推荐
- java接口的意义
java当中继承一个接口,要重写他的方法的话,那为什么还要多此一举的去实现一个接口呢? 直接把方法写在类当中不就可以了?就是说去掉类名后面的Implements 接口 ,可以不可以呢? 接口的最主要的 ...
- struts2文件上传（多文件）文件下载
一 文件上传 1.环境要求 commons-fileupload-xxx.jar commons-io-xxx.jar 2.准备jsp页面 单 <%@ page language="j ...
- Ubuntu 16.04下apt安装ssh及卸载（含FileZilla 使用过程）
前言:文件发布测试过程中需要使用Windows和Ubuntu实现文件共享. 以下内容转载自:http://blog.csdn.net/jiang13479/article/details/535014 ...
- HashMap 和 concurrentHashMap
从JDK1.2起,就有了HashMap,正如前一篇文章所说,HashMap不是线程安全的,因此多线程操作时需要格外小心. 在JDK1.5中,伟大的Doug Lea给我们带来了concurrent包,从 ...
- python urllib模块中的方法
1.urllib.urlopen(url[,data[,proxies]]) 打开一个url的方法,返回一个文件对象,然后可以进行类似文件对象的操作.本例试着打开google >>> ...
- 学习Python：StringIO与cStringIO
StringIO的行为与file对象非常像,但它不是磁盘上文件,而是一个内存里的“文件”,我们可以将操作磁盘文件那样来操作StringIO.一个简单的例子,让你对StringIO有一个感性的认识: f ...
- JZOJ5895【NOIP2018模拟10.5】旅游
题目 Description
- HZOI20190722 B visit 组合数+CRT合并
题目:https://www.cnblogs.com/Juve/articles/11226266.html solution: 30%:dp 设dp[k][i][j]表示经过k时间,在(i,j)的方 ...
- ArcMap应用——三维场景中井盖的属性配置
在精细三维场景中,有地面(包括道路面.马路牙子).有部件数据(包括井盖).我们会发现有马路牙子的地方比道路面要高出一部分,比如0.1米,但是雨水井盖却有些在路面上.有些在道路以外.就是说在道路面上的井 ...
- Spring注解驱动开发(六)-----spring容器创建【源码】
Spring容器的refresh()[创建刷新] 1.prepareRefresh()刷新前的预处理 1).initPropertySources()初始化一些属性设置;子类自定义个性化的属性设置方法 ...