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 ...
随机推荐
- Acer电脑【no bootable device】引导修复
时隔一年,又遇上了我的电脑出现 No Bootable Device 的开机提示,进不了系统. 那么怎么办呢? // 本文修复方式仅针对宏碁电脑且分区表为MBR的情况.按如下方法引导并未 ...
- 抓包：MySQL Sniffer
1.依赖文件安装 依赖glib2-devel.libpcap-devel.libnet-devel [root@VMUest ~]# yum install cmake [root@VMUest ~] ...
- Django项目: 项目环境搭建 ---- 三、在码云平台创建项目&推送到码云上
三.在码云平台创建项目 git服务平台: 主要使用github(最主流) 国内访问速度慢 托管私有项目收费 国内一般使用码云gitee 国内访问速度快 托管私有项目免费(限制开发人数) 公司中使用gi ...
- 从0开始学习ssh之搭建环境
ssh即struts+spring+Hibernate,从头开始学习这个框架. struts环境配置,首先在apps目录下找到struts2-blank-xxx.war这个文件,这是已经发布好的war ...
- 伸缩布局flex
一.伸缩布局的起源 1.之前我们想要适应不同的浏览器,一般采用的是设置宽度.高度为父级元素的百分比,但是有时候百分比的计算是相当复杂的,加上有时候还有规定的宽度要设置,所以,伸缩布局的出现是我们所急需 ...
- string主要操作函数
参考博客:http://blog.csdn.net/zhenyusoso/article/details/7286456 std::string illegal(" \t\f\v\n\r\\ ...
- SQL Server中存储过程与函数的区别
本质上没区别.只是函数有如:只能返回一个变量的限制.而存储过程可以返回多个.而函数是可以嵌入在sql中使用的,可以在select中调用,而存储过程不行.执行的本质都一样. 函数限制比较多,比如不能用临 ...
- 创业型 APP 如何筛选合适的推送平台
对于中小型 App 开发团队来说,采用何种方式实现适时而精准的消息推送是一件矛盾的事.将相同内容推送给所有终端用户,担心打扰用户.引起用户反感:而个性化的分群推送,又因为团队人少.运营精力不足无法实现 ...
- 用py3的nonlocal来打破局部变量间的作用域
nonlocal:用于局部变量,找上层中离当前函数最近一层的局部变量,找到为止,如果在全局找到或找不到,报错. 使用场景:内层函数对外层数据修改/处理
- 手把手教你把Python应用到实际开发 不再空谈语法
手把手教你把Python应用到实际开发 不再空谈语法 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问 ...