----------- android培训、java培训、java学习型技术博客、期待与您交流！ ------------
Html就是超文本标记语言的简写，是最基础的网页语言。
Html是通过标签来定义的语言，代码都是由标签所组成。
Html代码不用区分大小写。
Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部<body></body>两部分组成。
头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。
体部分是真正存放页面数据的地方。
多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
格式：<标签名 属性名='属性值'> 数据内容 </标签名>
<标签名 属性名='属性值' />
操作思想：
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。
标签就相当于一个容器。对容器中的数据进行操作，就是在再不断的改变容器的属性值。
字体标签：<font>
例：<font size=5 color=red>字体标签示例</font>
注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。
标题标签：<h1><h2>…..<h6>
因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。
列表标签：<dl>
<dt>：上层项目
<dd>：下层项目
例：
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>红色警戒</dd>
<dt>部门名称</dt>
<dd>技术部</dd>
<dd>培训部</dd>
</dl>
列表中项目符号对应的标签
<ol>：数字标签（a A 1 i I）
<ul>：符号标签（○●■）
<li>：具体项目内容标签。此标签只在<ol> <ul>中有效。
通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。
图像标签：<img>
例：<img src=”1.jpg” align=”middle” border=”3” alt=”图片说明文字”/>
align:属性定义图片的排列方式，border用来设置图像的边框。Src 连接一个文件
表格标签：<table>
组成：标题标签：<caption>，给表格提供标题。
表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。
行标签：<tr>
单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。
格式：
<table border="1" width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->注释部分
<caption>表格标题</caption>
<tr><!-- 第一行 -->
<th>姓名</th>
<th>年龄</th>
</tr>
<tr algin=”center”><!-- 第二行 -->
<td>张三</td>
<td>23</td>
</tr>
</table>
<th colspan="2"> <!-- colspan：th标签占两列 -->
个人信息
</th>
每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。
THEAD、TFOOT包含关于表格列的信息。
TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）
TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。
超链接标签：<a>
两种用法：
一、 超链接<a href=””>
例：
<a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>
<!-- href属性值可以是url，也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。 -->
二、 定位标记<a name=””>
一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。
注：定位标记要和超链接结合使用才有效。
例：
<a name=”标记”>标记位置</a>
<p>…….<!--很多空行以制造网页过长的效果 -->
<a href=”#标记”>返回标记位置</a>
注：使用定位标记时一定在href值的开始加入#标记名。
框架标签：<frameset>
注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。
例：
<frameset rows="10%,*">
<frame src="1.html" name="top" />
<frameset cols="30%,*">
<frame src="2.html" name="left" />
<frame src="3.html" name="right" />
</frameset>
</frameset>
这段代码会需要已经存在的3个html页面，分别是：1.html,2,html,3.html
框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。
表单标签：<form>
表单标签是最常用的标签，用于与服务器端的交互。
<input>：输入标签 ：接收用户输入信息。
其中的type属性指定输入标签的类型。
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。
单选框 radio 如：性别选择。
复选框 checkbox 如：兴趣选择。
隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值。
按钮 button 可以为其自定义事件。
文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
图像 image 它可以替代submit按钮。
<select>：选择标签 提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。
<option>：子项标签 属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。
<textarea>：多行文本框。如：个人信息描述。
<label>：用于给各元素定义快捷键。
for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。
accesskey 属性：指定快捷键，此快捷键需要和alt键组合使用。
例：
<label for="user" accesskey="u">用户名(u)</label>
<input type="text" id="user" />
表单提交：
1．先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。
2．明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。
get和post这两种最常用的提交方式的区别：
1．get提交将数据显示在地址栏，对于敏感信息不安全。
post提交不显示在地址栏，对于敏感信息安全
2．地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。
post可以提交大体积数据。
3．对提交数据的封装方式不同：
get：将提交数据封装到了http消息头的第一行，请求行中。
post：将提交的数据封装到消息头后，在请求数据体中。
注意：通常表单使用post提交，因为编码方便。
对于Tomcat服务器端，默认的解码方式是ISO8859-1,那么中文会出现乱码。
通过post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效。
如果是get提交，request.setCharacterEncoding(“GBK”)该方法对乱码解决不了，必须先进行ISO8859-1编码，然后在进行GBK的解码。这种方式虽然对post提交的乱码也通用，但是麻烦。所以建立表单提交使用post。
XHTML是可扩展的超文本标记语言（Extensible HyperText Markup Language）。
XHTML是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！可以理解为它是HTML一个升级版（HTML4.01）。
XHTML的代码结构更为严谨，是基于XML的一种应用。
XML是可扩展标记语言（Extensible Markup Language）
XML是对数据信息的描述。HTML是数据显示的描述。
XML代码规定的更为严格，如：标签不结束被视为错误。
XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。
各个服务器，框架都将XML作为配置文件。
CSS是层叠样式表（Cascading Style Sheets）用来定义网页的现实效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。
CSS和Html是如何在网页代码中相结合
通过四种方式
1. style属性方式：
利用标签中style属性来改变每个标签的显示样式。
例：
<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改
2. style标签方式：（内嵌方式）
在head标签中加入style标签，对多个标签进行统一修改。
<head>
<style type=”text/css”>
p { color:#FF0000;}
</style>
</head>
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活
3. 导入方式：
前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
例：
<style type="text/css">
@import url(css_3.css);
div { color:#FF0000;}
</style>
注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
4. 链接方式：
通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。例：
<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />
注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。
5. 样式优先级：
由上到下，由外到内。优先级由低到高
6. 总结CSS代码格式
选择器名称 { 属性名：属性值；属性名：属性值；…….}
属性与属性之间用 分号 隔开
属性与属性值直接按用 冒号 连接
如果一个属性有多个值的话，那么多个值用 空格 隔开。
7. 选择器：
就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
选择器共有三种：
a) html标签名选择器。使用的就是html的标签名。
b) class选择器。其实使用的标签中的class属性。
c) id选择器。其实使用的是标签的中的id属性。
每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。
在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。
8. 扩展选择器：
a) 关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
b) 组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器。
注：多个不同选择器要用逗号分隔开。
c) 伪元素选择器
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
格式：标签名：伪元素。类名 标签名。类名：伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
使用顺序 L – V – H - A
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。
:focus 具有焦点的元素。IE6浏览器不支持，在FireFox中可以看到效果。
----------- android培训、java培训、java学习型技术博客、期待与您交流！ ------------
扫一扫
9089
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
