前言

java学习之路—–>Html+Css

内容

1. HTML

1.1 语言结构

<html> 根标签
    <head></head>网页的头信息
    <body></body>网页的体信息
</html>

1.2 注释

<!-- 注释的内容 -->

1.3 头信息的作用

1> 可以设置网页的标题
2> 可以

1.4 html常用标签

1> 标签作用：用于描述一个网页的结构
2> 需要操作数据时，需要添加标签
3> 标签
 <h1>--<h6>描述标题
 <p></p>表示段落
 <hr/>水平线
 <sub></sub>下标标签
 <br/>换行
 <sup></sup>上标
 <pre></pre>原样标签
 <ol>
      <li></li>有序列表标签
      <ul></ul>无序列表
 </ol>
 <dl>
    <dt></dt>无缩进
    <dd></dd>有缩进
 </dl>
 <span></span>行内标签
 <div></div>块标签 标签内容独立占一行

1.5 实体标签

&nbsp 空格
&lt; 小于号
&gt; 大于号
&amp; 与号
&yen; 人民币
&copy; 版权
&reg; 商标

1.6 媒体标签

<embed src=""></emned> 
src表示路径
<marquee>弹幕</marquee>
<embed src="纯音乐 - 偏偏喜欢你.mp3"></embed>
<marquee direction="right" scrollamount="30">
<font color="#CC0000" size="+5">弹幕</font>
</marquee>

1.7 超链接标签

<a></a>
href = "链接"
target：设置打开新资源的目标
        Blank 在独立的窗口上打开资源
        _self 在当前窗口下打开
file 是用在查找本地的网页
使用http协议,会在本地机器去找一个hosts文件，如果再此文件没有该域名的主机，则
去NDS上找到该域名的主机号,不是http或者file协议的，会去查找本地是否有适合这个
协议的应用，如果有则处理。
邮件协议：mailTo
迅雷协议：thunder
锚点定位：
         1.首先写一个锚点  <a name="锚点名字">数据</a>
         2.使用a标签的herf属性链接到锚点处: href="#锚点名

1.8 图片标签

<img src=""/>
width设置宽度
height高度
alt图片加载不了时，进行提醒

1.9 表格标签

<table></table>
<tr>表示行
<td>单元格 
<th>表头  默认剧中加粗
<caption> 表的标题
border表格的边框
bordercolor表格边框颜色
width表格宽度
height表格高度
align位置
colspan表示单元格占据几个列
rowspan表示占据的行数
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

1.10 框架标签

frameSet:　一个frameset可以切割成多块
<frameset></frameset>
frame不可以被分割，位于frameset中

1.11 表单标签

<form> </form>
 action 指定提交数据的地址
 method 指定有表单提交方式
        get提交方式 默认 提交内容会显示在地址栏 不超过1KB 不安全 

        post提交方式 不会显示  数据不受限制 安全  
        注意:表单提交，需要加上name属性

2. CSS

html负责一个页面的结构
css 负责一个页面的数据的风格和样式

2.1 编写CSS代码的方式

1.在style标签中编写css代码
   <style type="text\css">
         a{
     color:#366;
     text-decoration:none;
     }
</style>
2.引入css文件
    ⑴建立.css文件 推荐使用
      使用<link href=".css" rel="stylesheet"/>
    ⑵用style引入
       <style type="text\css">
         @import url("1.css");
   </style>
3.直接在html中引用
  style内容里编写 用分号隔开

2.2 css注释

/* */

2.3 选择器

标签选择器

   标签名{
      样式1；样式2.....
    }
   div{
     color:#f00:
     font-size:20px;
    }

类选择器 
   .class的属性值{
   样式1；样式2....      
    }
class名不能以数字开头
类选择器的样式要优先于标签选择器的样式

id选择器
#one{
background-color:#ff9;
}
id选择器的优先值最高
id也不能以数字开头命名
id属性值在一个html页面中只能出现一次

交集选择器
选择器1 选择器2{
     样式1，样式2....
}

并集选择器:对制定的选择器进行统一的样式化
格式：
    选择器1 选择器2 ..{
      样式1;样式2....
   }

通过选择器
    *{
       样式1;样式2...
      }

伪类选择器:对元素处于某种状态的进行的样式的
   link  没有被点击过  
   visited 已经被访问过的样式
   hover 鼠标经过的状态
   active 点击未释放

2.4 常用CSS样式

背景属性：
background 背景颜色样式
background-image 背景图片
background-repeat 可以设置图片是否可以重复
background-position 位置设置  第一个参数是水平 第二个是垂直

文本属性：
color 设置文本颜色
direction 没什么用
font-size 字体大小
font-height 行高
letter-space 字符跟字符间的间距
text-align 元素的对齐方式
text-decoration 文本样式
text-transform 转换字符

表格属性：
border-collapse:collapse 合并边框
border-spaceing 
empty-cells 要不要显示空单元格
table-layout 控制单元格的样式 

边框属性：默认无边框
 border-style 边框样式
 border-color 边框颜色

2.5 盒子模型

把html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或
者是边框与边框之间的距离.
盒子模型主要是用于操作内边框与外边框.

2.6 定位

相对定位： 是相对于元素原来的位置来移动
           利用position:relative属性
绝对定位： 绝对定位是相对于整个页面而言
固定定位： 相对于整个浏览器而言的位置