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属性最小化(必须使用小写字母)也是禁止的
最新文章
- JavaScript值类型与执行环境和垃圾处理机制
- codeforces 724D(贪心)
- jvm分析(MD语法)
- zju(6)中断控制实验
- 魔兽争霸3 replay 格式
- node.js应用Redis数据库
- 使用virtualenvwrapper隔离python环境
- AngularJS(15)-依赖注入
- Arch 常用工具
- URAL 1081
- JS时间日期格式转换
- java将map拼接成“参数=值&;参数=值”
- 70. Climbing Stairs(easy, 号称 Dynamic Programming 天下第一题)
- windows下程序启动检查,只启动一个实例
- Java框架spring Boot学习笔记(八):@PropertySource,@Value注解
- GitHub的操作
- Lazarus分体式改成一体式窗口
- 常用的 Linux 命令
- PHP 数字序数&;字母序数 相互转化
- 消息/事件, 同步/异步/协程, 并发/并行 协程与状态机 ——从python asyncio引发的集中学习