HTML CSS基础
-----------android培训、java培训、java学习型技术博客、期待与您交流！------------
①Html内容
1、Html就是超文本标记语言的简写，是最基础的网页语言。
2、Html是通过标签来定义的语言，代码都是由标签组成。
3、Html代码不用区分大小写
4、Html代码由<html>开始</html>结束，里面由头部分<head></head>和体部分<body></body>两部分组成
5、头部分是给Html页面增加一些辅助或者属性信息，他里面的内容会先加载
6、体部分是真正存放页面数据的地方
注意：
1、多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束
2、想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择
3、属性与属性值之间用“=”连接，属性值可以用双引号或者单引号或者不用引号，一般都会用双引号，或者公司规定的书写规范
4、格式：<标签名属性名="属性值">数据内容</标签名>
<标签名属性名="属性值"/>
5、操作思想：
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作，标签就相当于一个容器，对容器中的数据进行操作，就是在不断的改变容器的属性值
常用标签的使用
字体：
1、字体标签：<font>
例如：<fontsize=5color=red>字体标签示例</font>
代码如下：
效果如下：
注：简单颜色可是直接写对应的英文，复杂的颜色用16进制表示，表现形式#ff0000，两个数为一组，按红。绿、蓝排列，如：#00ff00表示绿色。建议用工具选取
2、标题标签：<h1><h2>.......<h6>
你好黑马！
黑马-卢明
hello
因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。
3、特殊字符：
如果要在网页上显示一些特殊符号，比如<>&等，因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示
<------< >------->&------& "----"
®------® ©----©  -----空格
注：在Dreamever8中都具有联想功能
列表
4、列表标签：<dl>(definedlist)
<dt>：上层项目
<dd>：下层项目
例如：
<dl>
<dt>游戏名称</dt>
<dd>星际争霸</dd>
<dd>红色警戒</dd>
<dt>部门名称</dt>
<dd>技术师</dd>
<dd>培训师</dd>
</dl>
//数字标签（a A 1 i I）//具体项目内容标签aljflajflaljflajflaljflajflaljflajfl//:符号标签（空心圆 实心圆 实心正方形）akjfljaakjfljaakjfljaakjflja//上层项目游戏名称//下层项目星际争霸
列表中项目符号对应的标签
<ol>:数字标签（aA1iI）
<ul>:符号标签（空心圆实心圆实心正方形）
<li>:具体项目内容标签。此标签只在<ul><ol>中有效
通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到css。
图像
5、图像标签：<img>
例如：<imgsrc="1.jpg"align="middle"border="4"alt="图片说明文字"/>
Aling:属性定义图片的排列方式border：用来设置图像的边框src：连接一个文件
6、图像地图：<map>
应用：当要在图像中选取某一部分作为连接的时候，如：中国地图每个省所对应的区域。Map标签要和img标签联合使用。Href是超链接
<imgsrc="sunset.jpg"alt="图片说明文字"usemap="#Map"/>
<map>
<areashape="rect"coords="50,59,116,104"href="1.hml"/>
<areashape="circle"coords="118,203,40,"href="2.hml"/>
</map>
表格
7、表格标签：<title>
组成：标题标签：<caption>,给表格提供标题
表头标签：<th>一般对表格的第一行或者第一列格式化，就是粗体并居中，并不常用
行标签：<tr>
每个表格可以有一个表头（thead）、一个表尾（tfoot）和一个或多个表体（tbody）。
Tbody的作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样就会减少用户等待时间。）使用tbody的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个tbody行，就可以先显示一行。
Tbody这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。
超链接
8、超链接标签：<a>
两种用法：
一、超链接<ahref="">标记位置</a>
二、定位标记<aname="">
<aname="top">标记位置</a>
<ahref="#top">获取那个位置</a>
表单
9、表单标签是最常用的标签，用于与服务器端的交互
<input>：输入标签，接收用户输入信息
其中的type属性指定输入标签的类型
一、文本框text：输入的文本以原点或者星号的形式显示
二、密码框password：输入的文本以原点或者星号的形式显示
三、单选框radio：性别选择
四、复选框checkbox：兴趣选择
五、隐藏字段hidden：在页面上不显示，但在提交时候随其他内容一起提交
六、提交按钮submit：用于提交表单中的内容
七、重置按钮reset：将表单中填写的内容设置为初始值
八、按钮button：可以为其自定义事件
九、文件上传file后期扩展内容，会自动生成一个文本框和一个浏览按钮
十、图像image：它可以替代submit按钮，图片按钮，具备提交效果。
十一、<select>选择标签（下拉菜单）：提供用户选择内容。如用户所在的省份。Size属性为显示项目个数
<option>子项标签：属性selected
十二、注册区域：
<filedset>
<legend>注册区域</legend>
</fieldset>
代码练习：
效果如下：
其它标签：
<textarea>:多行文本框。如：个人信息描述
<label>:用于给各元素定义快捷键
For属性：指定快捷键键作用的表单元素。必须与要作用的表单元素的id值相同
Accesskey属性：指定快捷键，此快捷键需要和alt键组合使用
十三、表单提交：
1、先定义form表单中的action属性值，指定表单数据提交的目的地（服务器）
2、明确提交方式，通过指定method属性值，如果不定义，那么method的值默认是get
十四、其他标签
1、<marquee>：让内容动起来
Direction属性：left right down up
Behavior属性：scroll alternate slide
2、<pre>：可以将文本内容按在代码区的样子显示在页面
<p>和<strong>分段<sub>：下标 <sup>：上标
代码：
afaf afafaafafafafa
//让内容动起来
效果：
头标签
头标签都放在<head></head>头部分之间。包括：title base metalink
1、<title>：指定浏览器的标题栏显示的内容
2、<base>：
Href属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。 注意值的结尾处一定要用/表示目录。只作用与相对路径的超链接文件。
Target属性：指定打开超链接的方式。如_blank表示所有的超链接都用新窗口打开显示。
3、<meta>：
Name属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎 的关键字进行搜索。.
http-equiv属性：模拟http协议的响应消息头。
例：
<metahttp-equiv="refresh"content="3;url=http://www,"/>
表示打开此页面3秒后自动转到新浪页面。
4、<link>:
Rel属性：描述目标文档与当前文档的关系。
Type属性：文档类型
Media：指定目标文档在哪种设备上起作用
例：
<linl rel="stylesheet" type="text/css" meidia="streen,print" href="a.css" />
正则表达式：
是一种专门用于操作字符串的规则
通过一些符号来表示，简化对字符串的复杂操作
弊端：阅读性较差。
常见的操作：
1、匹配Stringmatches(regex)
2、获取（查找）：Pattern，Matcher
Patternp=pile(regex);
Matcherm=p.matcher(String);
While(m.find)
{
System.out.println(m.group());
}
3、切割：Stringsplit(regex);
4、替换：StringreplaceAll(regex,str);
示例：
Stringregex="\\d{3,}"
Patternp=pile(regex);
Matcherm=p.matcher(String);
While(m.find)
{
Stringa=m.group();
s.replaceAll(regex,"#");
}
网页爬虫：
通过网络已经IO读取网页的源文件，并通过规则获取网页中的符号规则的数据。
比如：mail爬虫。
Stringmailreg="[a-zA-Z0-9_]{6,12}@[a-zA-Z0-9]+(\\.[s-zA-Z]+)+";
正则表达式中组的含义：将部分进行封装以便重用。\\num反向引用指定组。
②CSS层叠样式表
将网页中的样式分离出来，完全由css来控制
增强样式的服用性以及可扩展性。
格式：
选择器（属性名：属性值；属性名：属性值.......）
Css和html代码相结合的四种方式：
1、每一个html标签都有一个style属性
2、当页面有多个标签有相同样式时，可以进行复用。
<style>
Css代码
</style>
3、当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个css文件。
通过在每个页面中定义
<style>
@importurl("1.css");
</style>
4、通过html中head标签中的link标签连接一个css文件
<linkrel="stylesheet"href="1.css"/>
技巧：为了提高相同的样式的复用性以及可扩展性，可以将多个标签样式进行单独定义，并封装成css文件。
P.css,div,css........
在一个css文件中使用css的import将多个标签样式文件导入。
然后再html页面上，使用link标签导入这个总的css文件即可、
1.Css
@importurl("p.css");
@importurl("div.css");
<linkrel="stylesheet"href="1,css"/>
--------------------
选择器：其实就是样式要作用的标签容器。
当样式分离后，html作用在于用标签封装数据，然后将css加载到指定标签上。
选择器的基本分类：
1、标签选择器：其实就是html中的每一个标签名。2、类选择器：其实就是每一个标签的class属性，用.的形式表示。
3、ID选择器：其实就是每一个标签中的ID属性。但是要保证ID唯一性。用#来标识。
ID不仅可以被css所使用，还可以被javascript所使用。
选择器的优先级：ID>class>标签
扩展选择器：
1、关联选择器：其实就是对标签中的标签进行样式定义。选择器选择器。。。。。
2、组合选择器：对多个选择器进行相同样式定义。将多个选择器通过，隔开的形式。
3、伪元素选择器：其实就是元素的一种状态、
A:link;超链接被点前状态。
A:visited：超链接被点击后状态
A:hover：悬停在连接上状态
A:active：点击超链接时状态
在定义这些状态是，有一个顺序：LVHA
P:first-litter
P:first-line
:focus：很遗憾，IE6不支持，但FF支持。
Css滤镜：其实通过一些代码完成丰富了样式。
当使用到css的更多属性时，还需要查阅cssapi
注意：网页设计的时候，主要用到div+css
Div：行级区域
Span：块级区域
P：行级区域。P中不要嵌套div
