首页 > 代码库 > html笔记
html笔记
HTML笔记：
1、IE,CHrome,FireFox,Opera,Safari(Apple) 五大浏览器类型；作用是来解析html，css，js
2、HTML（超文本标记语言）（HyperText Markup Language）
3、静态页面：*.html/*.htm 浏览器请求服务器上的页面，服务器直接返回页面的内容叫做静态页面
4、动态页面：*.asp/*.aspx/*.jsp/*.php 动态页面里面是有代码的（C#/JAVA/PHP），
当请求页面时会执行C#代码会生成html代码生成新的html页面，不管是动态页面还是静态页面，浏览器接收到的都是html标签，
区别就在于静态页面存的就是html标签，而动态页面存在有编程代码，请求动态页面的时候会执行编程代码来生成html标签
5、背景颜色：bgcolor="#0000FF" 表示背景颜色为蓝色 16进制的数可以用取色工具获得
6、doctype 文档定义 ，因为html有很多版本（html1.0\html2.0\html3.0\html4.0\xhtml1.0\xhtml2.0\html5）,
所以必须要写文档定义，告诉浏览器文档是按什么规范写的，解析的时候需要按该规范解析，写html的时候一定要加文档定义
7、html与xml的联系与区别：都是标记语言，注释都是用<!--内容、内容-->，都可以通过dom方式来访问，都可以通过CSS来改变外观。
xml语法要求更严格，有开始必须要有结束，大小写一致，属性用双引号。
xml侧重于数据存储，html侧重于数据展示。
html中只有要显示的页面内容，样式都由CSS来控制，html页面中不再有<font>等标签，控制样式都用CSS。
XHTML:超文本编辑语言，遵循xml规则的html
dhtml：动态html，即html，CSS，js的组合
以后用的就是dhtml
8、<h1></h1>：标题标签 h1到h6字体逐渐变小
9、<br/>:换行，他是一个自关闭标签
10、<p></p>:段落，也可用做换行，与<br/>的区别在于p标签行间距会很大
11、<center></center>:使标签包含的内容居中显示
12、<b></b>:加粗
13、<u></u>:下划线
14、<i></i>:斜体
15、<strong>加粗</strong>
16、<em>斜体</em>
17、<sup></sup>: 上角标 10<sup>2</sup> 为十的平方
18、<sub></sub>: 下脚标 H<sub>2</sub>O
19、<font color="red" size="7" face="楷体">颜色</font>
20、<hr/>:水平线 <hr/ color="red" size="7" width="200" align="right">
21、<pre></pre>:保持标签内内容的格式
22、html编码:
:空格
©:商标符号
<:小于 < less than
>:大于 > greater than
&: 去地址符 & 如要显示<；可以写为 &lt;
23、<a></a>: 超链接标签 <a href="http://www.baidu.com" title="hahaha" src="http://www.mamicode.com/1.jpg" target="_blank">超链接</a>
超链接中的target属性的一些取值：
_blank:在新窗口中打开
_self:在自己的窗口中打开
_parent:在父窗口中打开
_top:表示在顶级窗口中打开
框架名称：在指定框架中打开
给自己的窗口起名为mywin，则此后凡是target="mywin"的连接都在该窗口打开
herf="../net.html" 表示链接到上一级目录下的net.html
herf="net.html" 表示链接到当前目录下的net.html
href="http://www.mamicode.com/新建文件夹/net.html" 表示连接到新建文件夹下的net.html
href="http://www.mamicode.com/#zt" 表示连接到同一网页某个name="zt" 或者id="zt"的a标签
<a href="http://www.mamicode.com/#zt">回到猪头</a> <a name="zt"></a> <a id="zt"></a>
src="http://www.mamicode.com/1.jpg" 表示将1.jpg这张图片添加到网页上来
24、<img/>:显示图片<img width="100" height="100" src="http://www.mamicode.com/图片的地址.jpg" alt="图片显示不出来的时候显示的文字" title="鼠标移动到图片上显示出来的文字"/>
设置width和height属性只能改变图片的显示大小，不能改变图片的实际尺寸（即内存中的大小）
25、单位px：像素
26、<ul></ul>: 无序列表
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
type 的值有square 矩形,circle 圆,disc 黑点
27、<ol></ol>:有序列表
<ol type="I">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
type的值有1,a,A,I
28、<table></table>:表格
<table border="1" height="300" width="350" cellspacing="20" cellpadding="50">
<tr>
<td>春</td>
<td>夏</td>
<td>秋</td>
</tr>
<tr>
<td>春</td>
<td>夏</td>
<td>秋</td>
</tr>
<tr>
<td>春</td>
<td>夏</td>
<td>秋</td>
</tr>
</table>
<tr>标签表示行，<td>标签表示列，cellspacing是单元格之间的间距，cellpadding是单元格内部的内容与单元格的间距
colspan="2" 横向跨两个单元格
rowspan="2" 纵向跨两个单元格
<td align="center" valign="bottom"> 水平对齐，align的值有left，center,right
垂直对齐，valign的值有top,middle,bottom
<table>
<thead></thead>
<tbody><tbody>
<tfoot></tfoot>
</table>
29、表单：可以接收数据 ,只有表单元素才能有name，并且name可以重复
name属性的目的是为了可以将数据提交到服务器
id的目的是为了在客户端，可以通过js语言来操作某个元素
所有元素都可以有id，但是每个元素的id不能重复,radio提交的是value的值
get方式提交，是把数据封装成了通过&连接起来的键值对的方式，
通过地址栏，提交到服务器的。
因为请求的地址的长度是有限的，所以不能通过get方式上传文件。
因为get提交的数据会直接显示在url地址栏，不安全。
post方式提交，默认情况下也是使用&把键值对连接起来，同时提交的内容中显示
相对安全。
<form action="http://www.baidu.com/a.aspx" method="get">
<table border="1">
<tr>
<td>姓名：</td>
<td><input name="txtName" type="text" /></td>
</tr>
tr>
<td>性别：</td>
<td><input id="rdMale" name="gender" type="radio" value="http://www.mamicode.com/male"/>
<label for="rdMale">男</label>
<input name="gender" type="radio" value="http://www.mamicode.com/female"/>女</td>
</tr>
<tr>
<td>邮箱：</td>
<td><input name="txtEmail" type="text"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input name="txtPassword" type="password"/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input name="txtConfirmPassword" type="password"/></td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td>
<input name="hobby" type="checkbox" value=http://www.mamicode.com/”1“/>篮球
<input name="hobby" type="checkbox" value=http://www.mamicode.com/”2“/>足球
<input name="hobby" type="checkbox" value=http://www.mamicode.com/”3“/>网球
<input name="hobby" type="checkbox" value=http://www.mamicode.com/”4“/>吃
<input name="hobby" type="checkbox" value=http://www.mamicode.com/”5“/>睡觉
</td>
</tr>
<tr>
<td>所在地区：</td>
<td>省：
<select name="province" multiple="multiple" size="3">
<option value="http://www.mamicode.com/11">黑龙江</option>
<option value="http://www.mamicode.com/12">吉林</option>
<option value="http://www.mamicode.com/13">辽宁</option>
<option value="http://www.mamicode.com/14">河北</option>
</select>
<select name="city">
<optgroup label="黑龙江">
<option value="http://www.mamicode.com/101">哈尔滨</option>
<option value="http://www.mamicode.com/102">佳木斯</option>
</optgroup>
<optgroup label="吉林">
<option value="http://www.mamicode.com/103">长春</option>
</optgroup>
<optgroup label="辽宁">
<option value="http://www.mamicode.com/104">大连</option>
</optgroup>
<optgroup label="河北">
<option value="http://www.mamicode.com/105" selected="selected">石家庄</option>
<option value="http://www.mamicode.com/106">保定</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="height:150px;">
<fieldset style="height:75px;">
<legend>请选择你感兴趣的内容</legend>
<input name="hobby" type="checkbox" value=http://www.mamicode.com/”1“/>篮球
<input name="hobby" type="checkbox" value=http://www.mamicode.com/”2“/>足球
<input name="hobby" type="checkbox" value=http://www.mamicode.com/”3“/>网球
<input name="hobby" type="checkbox" value=http://www.mamicode.com/”4“/>吃
<input name="hobby" type="checkbox" value=http://www.mamicode.com/”5“/>睡觉
</fieldset>
</td>
</tr>
<tr>
<td colspan="2">
请阅读协议：
<textarea cols="30" rows="10" readonly="readonly">
请阅读协议：请阅读协议：请阅读协议：请阅读协议：请阅读协议：请阅读协议：
请阅读协议：请阅读协议：请阅读协议：请阅读协议：
请阅读协议：请阅读协议：请阅读协议：
请阅读协议：请阅读协议：请阅读协议：
请阅读协议：请阅读协议：请阅读协议：
请阅读协议：请阅读协议：
</textarea>
</td>
</tr>
<tr>
<td>
请选择头像：
</td>
<td>
<input type="file"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="http://www.mamicode.com/注册"/>
<input type="reset" value="http://www.mamicode.com/重置"/>
</td>
</tr>
</table>
<marquee direction="right" scrolldelay="3" behavior="slide">
<img src="http://www.mamicode.com/1.jpg"/>
</marquee>
<embed src="http://www.mamicode.com/毕业后你不是我的-孙子涵.mp3" loop="true" autostart="true" name="bgss" width="460" height="68"/>
</form>
<fieldset></fieldset> 类似于C#中的groupbox
<label></label> 用于聚焦，人性化
<marquee>标签用于控制图片的滚动 behavior的值scroll循环，slide走一次，alternate拉回走
<embed>标签用于控制 音频播放
30、meta标签
<meta name="名字" content="值"/> 关于网页的描述信息
<meta http-equiv="名字" content="值"/> 模拟http响应头信息。这个信息主要是给浏览器软件来识别使用的。
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 指定网页编码
<meta http-equiv="Refresh" content="3"/> 三秒钟后刷新此网页
<meta http-equiv="Refresh" content="3;url=http://www.rupeng.com"/>三秒钟后重新定向到新网页
<meta http-equiv="Cache-Control" content="no-cache"/> 禁止浏览器缓存页面
31、DIV:就是一个框（容器），能包含任意东西，DIV默认是一个块级元素，独占整行
32、SPAN:也是一个框（容器），只包含文字，SPAN默认是一个行级元素，放到哪就在哪
html笔记