第一 html和css
任务
1、html学习
2、CSS学习
笔记：
1、使用开发工具
JavaWEB:使用myeclipse工具开发。
2、HTML技术
2.1、什么是html
HTML：超文本标记（标签）语言。
HTML这门技术主要是用来书写可以在浏览器这个软件中直接解析运行的文件。
我们书写的HTML文件，不需要编译，直接交给浏览器，浏览器就可以去解析HTML文件中的数据，然后把相应的效果显示在浏览器上。
HTML的主要功能：书写网页的。
2.2、创建html文件
我们使用相应的开发工具创建：
使用myeclipse自带的功能：选择项目右击，创建html文件（注意：先选择html4.01版本）。
2.3、html手册（api）介绍
HTML技术由W3C组织制定的。对外提供了相应的帮助文档。
2.4、html文件的书写规范
HTML语法规范：
HTML语言主要是用来书写可以在浏览器中显示的数据（文本）。而这些文本需要使用W3C组织提前定义好的一些标记（标签）。
标签的功能：主要是把页面上要显示的数据封装在标签中，然后通过标签给页面上的数据设置相应的样式。
一个合格的html文件：
<html> 必须以html开始
<head>
<title></title>标题标签
</head> head中书写的是页面中的一些其他的定义信息和属性数据，不会在浏览器的窗口中显示。
<body></body>body中的信息会显示在浏览器的窗口中
</html> 以/html结束（闭合）
2.5、html标签介绍
书写在html文件中的数据，都需要W3C组织提前定义好的标签来封装数据。学习html，主要是学习W3C组织制定的标签。
Html中的标签分类：
单标签：
格式：<标签名 属性名=”属性值” 属性名=”属性值” 属性名=”属性值” />
双标签：
格式：<标签名 属性名=”属性值” 属性名=”属性值” 属性名=”属性值” >标签中需要封装的数据</标签名>
Html中的标签不区分大小写。
Html中的注释：
格式：<!-- 注释的内容 -->
注释内容不会再浏览器的窗口中显示，但是查看源代码可以查阅到。
2.6、常用标签介绍
2.6.1、font字体标签
<body>
<!--
html中的font标签：
font标签上的属性：
color：表示font标签中封装的数据在页面上显示的颜色
rgb(红绿蓝)
十六进制的颜色数据 xx xx xx
颜色的英文单词
face 设置font中封装的数据的字体（要求计算机支持的）
size 文本数据的大小（1~7）
br 是换行标签
hr 分隔符标签
-->
深圳<fontcolor="red"face="宋体"size="7">安卓14期</font><br/>
深圳<fontcolor="red"face="宋体"size="1">安卓14期</font>
<hrcolor="blue"align="center"width="200px"size="10px"/>
深圳<fontcolor="red"face="宋体"size="10">安卓14期</font>
</body>
2.6.2、特殊字符
<body>
<!--
Html中的特殊符号：
特殊符号在页面上的引入方式：
1、可以根据特殊符号的编号值引入。
2、可以根据名称引入
格式：&#编号值|名称;
< <
> >
空格
-->
a<b>c
<button>确定</button> <button>取消</button>
</body>
2.6.3、标题标签
<body>
<!--
标题标签：
h1到h6
h1是字号最大
h6字号最小
-->
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
2.6.4、超链接
超链接：它主要是在当前页面上连接其他的资源（页面）。
超链接有2个功能：
1、 连接其他的资源页面
2、 当前页面的定位
<body>
<!--
超链接标签：
a标签：链接其他资源需要在a标签上书写href属性，属性的值就是链接的资源的路径（地址）
href属性注意的事项：
如果我们需要书写的地址是其他的网站：这时href中必须以http开始
如果不写协议，默认是文件协议。
如果希望在其他的页面上打开资源：需要在a标签上添加target属性：
_blank 空白页面中打开
_parent 在父页面打开
_self 在当前页面打开，默认
_top 在最外层页面打开
自定义的位置打开
a标签的页面定位：
2步：1、设置锚点（定位的位置）
需要使用name属性或者id属性
2、设置连接，用于跳转
需要使用href属性，属性值需要以#号开始
-->
<ahref="http://www.itheima.com" target="_blank">黑马程序员</a>
<ahref="www.itheima.com">黑马程序员</a>
<ahref="thunder://sdfjsdjfljsdklfjlwekr234kl3j.avi">大圣归来高清版下载</a>
<ahref="mailto://[email protected]">联系我们</a>
<ahref="javascript:void(0);"onclick="alert('你真点啊！！')">您敢点击我吗？</a>
<aid="top"></a>
2.6.5、列表标签
列表标签3类：
有序列表：
无序列表：
自定义列表：
2.6.6、img标签
Img标签可以在页面中嵌入图片：
<!--
图片标签：img标签：
alt:对图片的描述，如果图片的路径有错误，这时描述信息会显示在浏览器中
src：图片的位置（绝对路径、相对路径）
-->
<imgalt="美女图片"src="./imgs/1.jpg"width="200px"height="100px"border="20px"/>
2.6.7、表格标签
Table:表格标签：
表格中的行：tr标签
表格中的列：td标签
表格中的所有数据全部写在td中。td可以理解成表格中的单元格
<!--
表格标签：table
行：tr
列：单元格td
注意：表格中单元格中没有数据的话，页面不显示
-->
<tablealign="center"border="1"width="70%"cellpadding="10px"cellspacing="0px"bordercolor="blue">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
2.6.8、跨行跨列表格
<!--
跨列的表格制作
跨列需要使用在制定的单元格td上使用colspan="列数"
跨行的表格制作：
在制定的单元格上td上使用rowspan="行数"
-->
<tablealign="center"border="1"width="70%"cellpadding="10px"cellspacing="0px"bordercolor="blue">
<tr>
<td>1</td>
<tdcolspan="2">2</td>
</tr>
<tr>
<tdrowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</table>
练习：页面上显示联系人的信息
| 联系人的信息 |
|||||
| 姓名 |
年龄 |
电话 |
邮箱 |
地址 |
备注 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2.6.9、框架标签
框架标签主要是把页面分成若干个子页面：
<!--
演示框架标签：
frameset:它可以也一个页面划分成若干个子页面
在frameset在标签上使用rows把页面分成若干行
cols 把页面分成若干列
在frameset中可以使用frame标签指定每一个子页面的内容
如果需要在制定的页面上打开其他页面中的数据，需要给这个frame起名
-->
<framesetrows="18%,*">
<framesrc="top.html">
<framesetcols="25%,*">
<framesrc="left.html">
<framesrc="right.html"name="right">
</frameset>
</frameset>
2.6.10、表单标签
表单的功能：它主要是把页面中表单标签中封装的数据（需要用户填写），提交给服务器。
表单标签它是一组标签，不是一个标签：
<form>
书写用户书写的数据项标签
<input/> 这个标签上的type属性不同，可以完成不一样的效果
<select></select>下拉框
<textarea></textarea>文本区域
</form>
<body>
<!--
表单标签：form
action：属性值是表示form表单中的数据具体需要提交给哪个服务器
书写的是服务器的地址URL
如果action中书写的地址是具体的网络中的地址，必须书写http协议
method：是form表单中数据提交给服务器时使用的提交方式：
提交方式以前有7种，现在常用2种：get和post
如果不写method默认是get方式
input标签中的type属性解释：
type="text" 普通的文本框，需要用户输入数据
type="password" 密码框，输入的数据隐藏
type="radio" 单选按钮，这个是要求用户选择的
type="checkbox" 多选按钮，也是让用户选择的
type="submit" 提交按钮，可以把form表单中的所有数据提交到action指定的服务器中
type="reset" 重置输入的数据到默认状态
type="button" 一个普通按钮，需要使用后面学习的JavaScript技术给按钮添加对应的功能
type="hidden" 隐藏form中的数据，在页面上不显示，但可以提交给服务器
type="file" 主要用在上传图片时让用户选择图片
type="image" 使用图片作为submit提交按钮的效果
select:下拉框，其中的每个选项需要使用option标签制定
textarea 它给出文本区域，其中的rows="文本区域的在页面占用的行数"cols="文本区域的在页面占用的列数"
-->
<formaction="http://127.0.0.1:8989"method="get">
用户名：<inputtype="text"/><br/>
密码:<inputtype="password"/><br/>
性别: <inputtype="radio"/>男
<inputtype="radio"/>女<br/>
爱好:<inputtype="checkbox"/>Java
<inputtype="checkbox"/>PHP
<inputtype="checkbox"/>IOS
<inputtype="checkbox"/>C++<br/>
<inputtype="button"value="按钮"/><br/>
<inputtype="hidden"value="隐藏的数据"/>
<inputtype="file"/><br/>
<!-- <inputtype="image" src="./imgs/1.jpg"/>-->
选择国籍:
<select>
<option>--请选择国籍--</option>
<option>中国</option>
<option>美国</option>
<option>英国</option>
</select><br/>
个人描述：
<textarearows="5"cols="20"></textarea><br/>
<inputtype="submit"value="注册">
<inputtype="reset"value="重置">
</form>
</body>
2.6.11、form表单的细节
form表单的细节：
1、如果要把form表单中的数据提交给服务器，要求所有form表单中的标签上必须有name属性
2、多个单选按钮的name属性的值必须一致
3、如果form中的数据是让用户选择的，这时必须书写value属性，手动的制定当前这个标签的数据
4、select下拉框中的数据提交：在select标签上写name属性，在每个option上写value
5、form表单的2种提交方式的区别：
get方式提交的数据会在浏览器的地址栏中显示，不安全
post方式提交的数据会在提交数据的请求体中
2.6.12、其他标签
<!--
html中提供的大部分的标签上都有属性，
可以通过这些属性设置标签中封装的数据的在页面上显示的样式效果
在后期出现了新的技术，把html标签中用来设置样式的数据从html中进行分离。
后期书写html文件的时候，html中的所有标签仅仅只是封装页面上要显示的数据，
而把封装数据样式的任务交给了CSS技术。
后期书写html文件的时候：
1、使用html标签只封装页面的数据
2、使用CSS技术设置页面上数据的样式
div和span他们的出现只为了封装页面上的数据，区别：
div标签封装的数据单独占用一行，
span标签封装的数据仅仅占用数据所需的页面区域
html的标签可以分成：
块级标签：div table ul oldl p
行内标签：span inputselect textarea
-->
<div>div数据</div>
<div>div数据</div>
<span>span数据</span>
<span>span数据</span>
<p>段落标签</p>
<p>段落标签</p>
3、CSS技术
3.1、CSS技术介绍
CSS：层叠样式表。主要功能：负责页面上的数据的展示样式效果设置。
查阅CSS手册：
CSS的手册主要提供的CSS代码中的的key和key对应的value值。
CSS代码的书写格式：
选择器{
Key:value；
Key：value;
....
}
3.2、CSS和html的结合方式
CSS是专门负责页面的样式，而页面的数据html标签在封装，我们必须让CSS代码和html标签之间产生关系。
3.1、第一种：
在几乎所有的html标签上都有style属性：
在style属性中书写css代码
3.2、第二种：
css和html的第一种结合方式，如果出现了多个标签需要相同的样式，这时会出现css代码严重重复：
可以把CSS代码从html标签上的style属性中抽离到html文件中：
格式：
<style type=”text/css”>
CSS代码
</style>
3.3、第三种：
如果多个页面上需要相同的CSS样式，这时可以继续把CSS从html中的style标签中抽离到CSS文件中：
3.4、第四种：
使用link标签引入CSS文件
Html：主要书写网页。
Html中常用的标签：
Font：设置字体样式
特殊字符：< >
超链接：a标签 href属性 target属性
图片标签：img alt 图片的描述信息 src 图片的位置
表格标签：table 行：tr 列 td
列表标签：有序列表ol 无序列表 ul 自定义列表dl dd dt
框架标签：frameset 可以把页面分成多部分
表单标签：form action表单中数据的提交位置 method 提交的方式（get、post）
CSS技术：主要是设置页面的样式。
代码书写格式：
Key:value；
CSS和html结合方式：
四种：1、在标签上使用style属性书写；2、在html文件中使用style标签书写；3、单独书写css文件，在style标签中使用@import导入；4、link标签引入外部的css文件。
1、CSS选择器
Css选择器：主要是用来选择css代码作用的html标签。
1.1、标签名选择器
在书写css代码的时候，在大括号的前面直接书写标签名
格式：
标签名{
CSS代码
}
1.2、id选择器
Html的标签上基本都有一个标准的属性id，我们可以通过id属性的值来选择当前这个标签。
格式：
#标签的id属性值{
CSS代码
}
注意：页面上的标签的id的属性值一定要唯一。主要是为后期的JavaScript技术和DOM技术结合使用提供数据。
1.3、class选择器（类选择器）
Html中的标签上都可以书写class属性，我们可以通过class属性的值选择当前这个标签
格式：
. class的属性值{
CSS代码
}
1.4、组合选择器
格式：
id选择器，class选择器，标签名选择器 .....{
CSS代码
}
1.5、关联选择器
格式：
父标签 子标签{
CSS代码
}
1.6、伪元素选择器
css中已经给我们定义好了一些选择器，可以直接作用在某些标签上。
/*
伪元素选择器：
:link 标签为被访问之前的样式
:hover 鼠标悬停在某个标签上的样式
:active 鼠标点击，但没有松开时的样式（瞬间状态）
:visited 鼠标点击之后的样式效果设置
顺序问题：link visited hover active
l v h a
*/
a:link {
font-size: 20px;
text-decoration: none;
color: blue;
}
a:visited {
font-size: 16px;
text-decoration: line-through;
color: gray;
}
a:hover {
font-size: 30px;
text-decoration: overline;
color: red;
}
a:active {
font-size: 40px;
text-decoration: underline;
color: green;
}