黑马程序员技术交流社区
标题:
html课堂笔记-为入学云四的兄弟姐妹提供复习大纲
[打印本页]
作者:
smhjx2006
时间:
2013-6-6 19:43
标题:
html课堂笔记-为入学云四的兄弟姐妹提供复习大纲
html：超文本标记语言。
html语言中是由标签组成的。
html中的数据都会封装在标签中。因为可以通过标签中的属性值的改变对封装内数据进行操作。
确定html代码范围。<html> </html>
在该范围中可以定义两部分内容，一部分是头，一部分是体。
<html>
<head></head>
<body></body>
</html>
head:网页的一些属性信息。比如：标题。
body:网页显示的数据
标签特点：对于数据进行封装，那么就要开始标签和结束标签。
但是也有一些标签只体现单一功能，所以不需要结束标签，规范中要求标签必须要结束，所以这样的标签在内部结束。
如：<br/> <hr/> <img /> <input />
标签格式：<标签名 属性名="属性值" >数据</标签名>
<标签名 属性名="属性值" />
------------------------------------------------
常见标签：
1、字体：<font>
<font size="7" color="#ffffoo">数据</font>
特殊部分：如果要在页面显示一些特殊符号，需要进行转义。
<: < >:> &: & 空格:  
标题: <h1> <h2> <h3>.....<h6>
2、列表标签：<dl></dl>
上层项目:<dt>
下层项目:<dd>
项目符号标签:
<ul>
<ol>
这两个标签中的列表项都由<li>标签封装。
示例：
1、游戏名称
a.星际
b.红警
2、游戏内容
a.攻略
b.秘籍
3、图像标签：<img>
<img src="" alt="图像说明文字" />
4、表格标签：<table>
表格由行组成，行由单元格组成。
表格中默认都由一个tbody标签
<table border="1" bordercolor="red" width="60%" cellpadding="10" cellingspacing="0">
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格式最常用的标签，用于对数据进行格式化。
5、超链接：<a>
<a target="_blank">新浪网站</a>
当被点击后，会启动引擎所对应解析程序。
去查找指定主机。
1、先找本地主机的hosts文件。如果没有找到该主机对应的ip地址
2、去公网DNS服务器上找对应的ip地址。
<a href="
mailto:abc@sohu.com?subject=haha&cc=qq@163.com
" >联系我们</a>
当点击超链接时，就会出现邮件相关联的解析程序，本机默认的是outlook。
超链接的另一个作用：
定义标记：
<a name="top">一个位置</a>
<a href="#top">获取那个位置</a>
6、表单标签：
该标签是可以和服务端进行交互的。
<form>
表单标签中元素：
<input>:该标签因为type属性的值的不同，所对应的组件也不一样。
type属性：
1，text：文本框，输入的文本可见。
2，password：密码框，输入的文本不可见。
3，radio：单选框，注意，要被选中，必须要给单选框定义一个属性name。
当有多个单选框时，只能有一个被选中，那么这些单选框的name值必须相同。
4，checkbox：复选框，当对多个数据进行同时选中时。
5，file：可以进行文件选择的组件。通常用于附件或者文件上传。
6，hidden：隐藏组件，该组件不会在页面上显示，但是其定义的name和value可以提交到服务端。
7，buuton：按钮组件，自定义一个按钮默认是没有任何效果的，可以通过注册事件并加入自定义效果。
8，submit：提交按钮，将组件中添加的数据提交到指定的目的地。
10，image：图像组件，为了避免提交按钮的难看，可以通过image的src属性连接一个好看的按钮图片完成提交效果。
下拉式菜单：<select>
每一个下拉菜单项都由option进行封装。
<select>
<option></option>
</select>
文本区域：<textarea>
表单组件通常都需要定义name和value属性，因为要将数据发送给服务端，
服务端只有知道了该name的值才可以对提交的数据进行分别获取。
form表单中的常见属性：
action：指定数据提交的目的地。method：提交方式。两种常用值get和post。get为默认。
get和post的区别：
get：会将提交的数据显示在地址栏上。
post：不会将数据显示在地址栏。
get：提交的数据的体积受地址栏的限制。
post：可以提交大体积数据。
get：对于敏感信息不安全。
post：对于敏感信息安全。
get：会将提交信息封装在请求行，也就是http消息头之前
post：会将提交信息封装在数据体中，也就是http消息头后的空行后。
对于服务端而言。
表单提交尽量用post，因为涉及编码问题。
对于post提交的中文，在服务端可以直接使用setCharacterEncoding("gbk")就可以解决。
对于get提交的中文，在服务端只能通过ISO8859-1将数据编码一次，再通过指定的编码表如GBK解码。
使用表单的组件不一定要定义form标签。只有需要将数据进行服务端的提交的时候才会用到form标签。
css层叠样式表。
将网页中的样式分离出来，完全由css来控制。
增强样式的复用性以及可扩展性。
格式：
选择器{属性名：属性值;属性值.....}
css和html代码相结合的四种方式：
1，每一个html标签都有一个style属性。
2，当页面有多个标签有相同样式时，可以进行复用。
<style>
css代码
</style>
3、当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个css文件。
通过在每个页面中定义
<style>
@import url("1.css");
</style>
4、通过html中head标签中的link标签链接一个css文件。
<link rel="stylesheet" href="1.css"/>
技巧：为了提高相同样式的复用性以及可扩展性，可以将多个标签样式进行单独定义，并封装成css文件。
p.css,div.css.......
在一个css中使用css的import将多个标签样式文件导入。
然后在html页面上，使用link标签导入这个总的css文件即可。
1.css
@import url("p.css");
@import url("div.css");
<link rel="stylesheet" href="1.css"/>
------------------------------------------
选择器：其实就是样式要作用的标签容器。
当样式分离后，html作用在于用标签封装数据。然后将css加载到指定标签上。
选择器的基本分类：
1、标签选择器。其实就是html中的每一个标签名
2、类选择器。其实就是每一个标签中的class属性。用.的属性表示
只用来给css所使用，可以对不同标签进行相同样式设定。
3、ID选择器。其实就是每一个标签中的ID属性。但是要保证ID的唯一性。用#来表示
ID不仅可以被css所使用，还可以被javaScript所使用
选择器的优先级：ID>class>标签
扩展选择器：
1、关联选择器：其实就是对标签中的标签进行样式定义。选择器
2、组合选择器：对多个选择器进行相同样式定义。将多个选择器通过","隔开的形式。
3、伪元素选择器：其实就是元素的一种状态。
a:link：超链接被点前状态
a:visited:超链接点击后状态
a:hover:悬停在超链接上
a:active:点击超链接时
在定义这些状态时，有一个顺序：L V H A
p:first-letter
p:first-line
:focus:很遗憾，IE6不支持。但FF支持。
css滤镜：其实通过一些代码完成丰富了样式。
当使用到css的更多属性时，还需要查阅css api
网页设计的时候。div+css
div：行级区域
span：块级区域
p:行级区域。p中不要嵌套div
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2