html学习笔记
1，颜色 color:#930; css
2，文字大小 font-size:15px; html
3，文字居中 text-align:center 浏览器
4，插图片连接 <img src="#"> 服务器
5，浏览器标题信息 <head> <title> </title></head>, 网络
6，注释 <!-- -->, ssh
7，分级标题<h1></h1> <h2></h2> post
8，字体加粗<strong></strong> 字体
9，斜体<em></em>, ui
10，单独设置文字样式 <span></span> <head> <style> color:blue;</style> </head> url
11，引用 <q></q> :双引号
12，长文本引用 <blockquote ></blockquote> :让文本为缩进式
13，回车 <br/> :在须要还行的地方处添加
14，空格
15，分割线 <hr/>
16，地址显示<address></address>
17,加入一行代码语言 <code> </code>
18,加入大量代码 <pre> </pre>
19,添加列表 <ul> //没有先后顺序信息的列表信息
<li> </li> //一行
<li> </li>
</ul>
20,添加有序列表
<ol>
<li> </li>
<li> </li>
</ol>
21,独立板块 <div id="模板名称"> </div>
22,表格 <table> <tbody> <tr> //一行<th> //一列 </th> </tr> </tbody> </table>
23,表格的摘要 <table summary="简介文档">
24,表格标题 <table> <caption>标题文本</caption> </table>
25,网页连接 <a href="目标网址" title="鼠标滑过显示的文本">连接显示的文本</a>
26,在新建浏览器窗口中打开连接 <a href="#" target="_blank">click here! </a>
27,连接Email地址
1，邮箱地址 <a href="mailto:yy@qq.com">发送</a>
2,抄送地址 <a href="mailto:yy@qq.com?cc=xx@qq.com">发送</a>
3,秘密抄送地址 <a href="mailto:yy@qq.com?bcc=xx@qq.com">发送</a>
4,多个收件人、抄送、秘密抄送 <a href="mailto:yy@qq.com;xx@qq/com">发送</a>
5,邮件主题和内容 <a href="mailto:yy@qq.com?subject=发送电子邮件&body=你好">发送</a>
28,插入图片 <img src="#" alt="下载失败的替换文本" title="鼠标滑过的提示文本">
29,表单标签，与用户交互 <form method="传送方式" action="服务器文件"> </form>
30,文本框、密码输入框
<form>
<input type="text/password" name="名称(文本框的名字，便于后台调用)" value="输入框默认值" />
</form>
31，文本域，多行文本输入
<textarea rows="行数" cols="列数">文本</textarea>
32，选择框、复选框
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
当 type="radio" 时，控件为单选框
当 type="checkbox" 时，控件为复选框
同一组的单选按钮，name 取值必定要一致
33，下拉列表框
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
设置selected="selected"属性，则该选项就被默认选中。
<select multiple="multiple"> //下拉框具备多选功能
34，使用提交按钮
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交做用
value：按钮上显示的文字
35，重置按钮重置表单信息
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置做用
36，form表格里面的lable标签
label标签不会向用户呈现任何特殊效果，它的做用是为鼠标用户改进了可用性。若是你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）
注意：标签的 for 属性中的值应当与相关控件的 id 属性值必定要相同。
<label for="控件id名称">
37.form标签
通俗的讲 form标签是用来进行表单提交用的
form标签里面的常见属性以下
action: 表单提交的地址, 确定是要提交给某个服务器的,action的地址就是要提交的服务器的地址
method:以何种方式提交,常见的为get和post. 区别在于一个是明文(在url中显示),一个是暗文
第一次实际帮人家作网页的页面，操做起来也没那么容易。。
第一个问题，记事本写好后在保存为html后缀文件时仍是出现了txt文本，实际上是后缀被隐藏了，在多打一个html后缀就能够解决了。
顺便附上本身写的网页模板，方便之后直接copy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主页面</title>
<style type="text/css" >
#bodydiv{ position:relative; margin-left:95px; margin-right:95px;}
#body{
background-color:#ffffff;
margin-top:auto;
color: #996600;
font-family: "黑体";
;
}
.title{
float:left;
}
#bannerdiv{ position:relative;}
#bannertable{}
#centerdiv{ position:relative; padding-left:3px;}
#centertable{ }
#rootdiv{ margin-top:11px;}
</style>
</head>
<body>
<div id="bannerdiv" width="100%">
<img src="images\ssh.zetadata_01.gif" width="100%" height="100%">
</div>
</br>
</br>
<div id="centerdiv">
<table id="centertable" border="0" cellpadding="8px" align="center">
<tr>
<td rowspan="2" >
<div >
<font class="title" size="4" color="000000">热门活动</font></br></br>
<div style="border:1px solid #C0C0C0;width:490px;">
<div style="font-size:0;">
<a href="BaiMi.html" style="text-decoration:none">
<img src="images\ssh.zetadata_04.gif" width="490" height="278">
</div>
</br>
<font size="4" color="000000">"I Love EP"创意绘画展</font>
</br>
</br>
<font size="2" color="#C0C0C0">活动时间：2016-03-06 10:30-11:30</font>
</br>
</br>
</div>
</br>
</br>
</a>
</div>
</div>
</br>
</td>
<td rowspan="2" >
<div >
<font class="title" size="4" color="000000"></font></br>
<div style="border:1px solid #C0C0C0;width:490px;">
<div style="font-size:0;">
<a href="BaiMi.html" style="text-decoration:none">
<img src="images\ssh.zetadata_05.gif" width="490" height="278">
</div>
</br>
<font size="4" color="000000">科学梦想家夏令营动员大会</font>
</br>
</br>
<font size="2" color="#C0C0C0">活动时间：2016-06-06 10:30-11:30</font>
</br>
</br>
</div>
</br>
</br>
</a>
</div>
</div>
</td>
</tr>
</table>
</div>
<div id="centerdiv">
<table id="centertable" border="0" cellpadding="8px" align="center">
<tr>
<td rowspan="2" >
<div >
<font class="title" size="4" color="000000">往期活动</font></br></br>
<div style="border:1px solid #C0C0C0;width:490px;">
<div style="font-size:0;">
<img src="images\ssh.zetadata_08.gif" width="490" height="278">
</div>
</br>
<font size="4" color="000000">农行杯 我有一个公益梦</font>
</br>
</br>
<font size="2" color="#C0C0C0">活动时间：2015-12-06 10:30-11:30</font>
</br>
</br>
</div>
</br>
</br>
</div>
</div>
</br>
</td>
<td rowspan="2" >
<div >
<font class="title" size="4" color="000000"></font></br></br>
<div style="border:1px solid #C0C0C0;width:490px;">
<div style="font-size:0;">
<img src="images\ssh.zetadata_09.gif" width="490" height="278">
</div>
</br>
<font size="4" color="000000">私塾慧幼儿时装大赛</font>
</br>
</br>
<font size="2" color="#C0C0C0">活动时间：2015-10-01 10:30-11:30</font>
</br>
</br>
</div>
</br>
</br>
</div>
</div>
</br>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
2，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>百米</title>
<style type="text/css">
body {color:grey }
body {text-align: center }
.txtcss1 {
text-align: left; /* 用于文字右对齐 */
font-size:18px;
color:#6c6c6c;
}
#bodydiv{ position:relative; margin-left:95px; margin-right:95px;}
</style>
</head>
<body>
<div width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<img src="images\BaiMin_9_01.gif" width="100%" height="100%">
</div>
<table bgcolor="#c7cbca" width="100%" height="45" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="color:white" align="center">活动时间：2016-03-06 10:30-11:30 | 活动地址：邻瑞广场一楼露天</td>
</tr>
</table>
<textarea class="txtcss1" cols="120" rows="90" style="overflow-y:hidden;border:0">
1、活动背景和目的
随着经济社会的发展，生活节奏的加快，不管是社区仍是居民都疲于工做，不少时候根本没有时间和意识发现身
边的美和孩子身上的艺术潜力以及培养孩子的环保意识，其实人人都是浑然天成的艺术家和生活家。经过组织这次
活动，但愿可让本身和本身的孩子都快乐的拥有一个属于本身心中的环保梦想。
这次活动也是为提升民众联络所和社区之间人文艺术环境，进一步营造良好的区域正能量的氛围，鼓励小朋友进行
艺术文化和环保行为的熏陶和感觉，逐渐培养艺术美感和环保意识。
2、组织机构
1.主办方：苏州工业园区湖东社工委金鸡湖民众联络所
2.承办方：荣域社区居委会，邻瑞社区居委会，双湖湾社区居委会，滨湖社区居委会，邻瑞广场，中新苏州工业园
区置地有限公司，苏州工业园区湖东思塾慧文化服务中心
3.合做方：山姆会员店，浦发银行荣域支行，星美影院，嘉睿私塾，乐橙美术
4.媒体：苏州地铁报
5.参与者：金鸡湖区域的居民及其余感兴趣的居民
3、活动时间
发起时间：2016年2月18日
活动时间：2016年3月6日上午10:30-11:30
做品展出时间：2016年3月6日当天，以及4大社区巡回展出
4、活动名称
“I Love EP”百米长卷创意绘画展
5、活动规模
50个家庭
6、年龄定位
5-12岁小朋友的家庭
7、活动地点
邻瑞广场一楼露天空地（若是下雨活动在邻瑞广场室内负一楼）
8、活动流程
1.由金鸡湖民众联络所，邻瑞广场, 荣域社区居委会，邻瑞社区居委会，双湖湾社区居委会，滨湖社区居委会及思
塾慧发起线上线下宣传
2.荣域社区居委会，邻瑞社区居委会，双湖湾社区居委会，滨湖社区居委会及其余社区的居民能够提早预定报名
3.艺术展分为彩绘环节、颜料布绘环节、展现环节
?彩绘环节
2016年3月6日上午10:30-11:30，参加绘画的家庭能够用专业的（不会对皮肤有伤害）彩绘颜料自行或由老师帮助
进行面部彩绘，增长趣味性。
?颜料布绘环节
2016年3月6日上午10:30-11:30，50个家庭将集体在百米长卷上进行创意绘画。绘画最后会评选最具艺术性和创
意性的5个家庭颁发奖品。
?展现环节
2016年3月6日10：00-13：30展出百米长卷创意做品，以后在4个社区进行巡回展出。
苏州工业园区湖东思塾慧文化服务中心
2016年2月24日
技术支持：苏州泽它网络科技有限公司
</textarea>
</body>
</html> 3.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>summer campe</title>
<style type="text/css" >
<!--p.leftmargin {margin-left: 5cm}-->
body {color:grey }
body {text-align: center}
</style>
</head>
<body>
<div width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<img src="images\YellowBanner_01.gif" width="100%" height="100%">
</div>
<table bgcolor="#c7cbca" width="100%" height="45" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td style="color:white" align="center">|</td>
</tr>
</table>
</br>
</br>
</br>
</br>
<div id="centerdiv" style=" text-align:center;">
<font color="#A9A9A9">活动正在筹划中，尽请等待……</font>
</div>
</div>
</br>
</br>
</body>
<ml>
- 1. html学习笔记
- 2. HTML学习笔记
- 3. HTML—学习笔记
- 4. HTML 学习笔记
- 5. 【学习笔记】HTML
- 6. Html学习笔记
- 7. HTML学习笔记——HTML基本标记
- 更多相关文章...
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字节跳动21届秋招运营两轮面试经验分享
- 2. Java 3 年，25K 多吗？
- 3. mysql安装部署
- 4. web前端开发中父链和子链方式实现通信
- 5. 3.1.6 spark体系之分布式计算-scala编程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在线
- 8. 在线画图
- 9. devtools热部署
- 10. 编译和链接
- 1. html学习笔记
- 2. HTML学习笔记
- 3. HTML—学习笔记
- 4. HTML 学习笔记
- 5. 【学习笔记】HTML
- 6. Html学习笔记
- 7. HTML学习笔记——HTML基本标记