Html1-2学习总结(html标签、CSS)

6.1 常用架构

1. C/S :Cilent/Server 客户端和服务器端。
   - 优点：使用简单方便（用户体验好）
   - 缺点：安装和部署麻烦，服务器端更新，需要客户端更新。
2. B/S :Browser/Server浏览器和服务器端。
   - 优点：服务器端更新，客户端不需要更新
   - 缺点：用户体验不好

6.2 资源的分类

1. 静态资源: 用户访问网页，看到的结果一样（网页的数据内容是不会变的）
   特点：浏览器可以直接展示静态资源的内容（解析静态资源数据）
   常用的技术：HTML,CSS,JavaScript
2. 动态资源：用户访问网页，看到的结果可能不一样（网页的数据内容是会变化的）
   特点：浏览器不能直接展示动态资源的内容（先把动态资源转成静态资源）
   常用的技术：jsp/servlet, springMVC,struts等等技术

6.3 html

什么是html: 它是一门超文本标记语言（一门网页开发语言）。

超文本：超出了文本的范围（超出了文字的范畴,视频、图片、音频等）

基本语法：

• 标签分两大类
  * 围堵标签：有开始和结束
  * 自闭和标签： 只有一个标签，比如:<标签名称/>
• 标签名称不区分大小写
• 标签要合理的嵌套。

(1)html的文字标签

-	注释：<!—注释内容-->
-	换行：<br/>
-	水平线：<hr/>
-	特殊字符：&nbsp  （空格）; &copy （  ©）; 
-	标题标签：<h1></h1>----< h6></h6>
-	段落标签：<p></p>
-	加粗：<b> </b>
-	倾斜：<i></i>
-	下划线：<u></ u>
-	字体标签：<font></font>
-	居中标签：<center></center>

(2)html的图片标签

- <img  src=”图片的路径”>
1.	同一级目录：src路径直接写图片名称
2.	上一级目录：../
3.	下一级目录：./

(3) 超链接标签：

<a  href=”跳转资源的路径” > 被点击的内容</a>
注意：target属性  
1.	_self,默认的属性值（在当前窗口打开新的资源）
2.	_blank ，重新开一个窗口，打开新的资源。
	href属性对应的路径值写相对路径：
  相对路径分为三种情况：
1.	同一级目录href路径直接写资源的名称
2.	上一级目录：../
3.	下一级目录：./

(4)列表标签

 * 有序列表 ：<ol><li></li>---</ol>
 * 无序列表 : <ul><li></li>--</ul>

(5)列表标签

* table 定义表格
    * width：宽度
	* border：边框
	* cellpadding：定义内容和单元格的距离
	* cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
	* bgcolor：背景色
	* align：对齐方式
* tr 行
 	* bgcolor：背景色
	* align：对齐方式
*  th 表头
*  td 单元格（td在tr里面）
	* colspan：定义这个td、tr占几列（合并列）
	* rowspan：定义这个td、tr占几行（合并行）
* <caption>：表格标题
* <thead>：表示表格的头部分
* <tbody>：表示表格的体部分
* <tfoot>：表示表格的脚部分

(6)表单标签

• 概念：用于采集用户输入的数据的。用于和服务器进行交互。
• form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围。

1. 属性
   • action：指定提交数据的URL（#代表返回当前网页）（表单数据要被提交，必须指定name）
   • method:指定提交方式（一共七种，两种较常用）
     • get
       1. 请求参数会在地址栏中显示。会封装到请求行中。
       2. 请求参数大小是有限制的。
       3. 不太安全。
     • post
       1. 请求参数不会再地址栏中显示。会封装在请求体中.
       2. 请求参数的大小没有限制。
       3. 较为安全。

2.表单项标签

• input：可以通过type属性值，改变元素展示的样式
  • text：文本输入框，默认值
  • placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
  • password：密码输入框
  • radio:单选框
    • 注意：
    1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
    2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    3. checked属性，可以指定默认值
  • checkbox：复选框
    • 注意：
    1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    2. checked属性，可以指定默认值
  • file：文件选择框
  • hidden：隐藏域，用于提交一些信息。
  • submit：提交按钮。可以提交表单
  • button：普通按钮
  • image：图片提交按钮(src属性指定图片的路径)

7.1 CSS

概念： Cascading Style Sheets 层叠样式表

好处：功能强大、将内容展示和样式控制分离

（1）CSS的使用方式

1. 内联样式（不常用）
   在标签内style属性指定css：< div style=“color:red;”>hello css</ div>
2. 内部样式
   在head标签内，定义style标签，style标签的标签体内容就是css代码
3. 外部样式
   定义css资源文件，在head标签内，定义link标签，引入外部的资源文件：< link rel=“stylesheet” href=“css/a.css”>

（2）语法

	选择器 {
		属性名1:属性值1;
		属性名2:属性值2;
		...
	}
//选择器:筛选具有相似特征的元素

(3) 选择器

1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
   #id属性值{}
2. 元素选择器：选择具有相同标签名称的元素（id选择器优先级高于元素选择器）
   标签名称{}
3. 类选择器：选择具有相同的class属性值的元素。（类选择器选择器优先级高于元素选择器）
   class属性值{}
4. 所有元素：
   *{}
5. 并集选择器
   选择器1,选择器2{}
6. 子选择器：筛选选择器1元素下的选择器2元素
   选择器1 选择器2{}
7. 父选择器：筛选选择器2的父元素选择器1
   选择器1 > 选择器2{}
8. 属性选择器：选择元素名称，属性名=属性值的元素
   元素名称[属性名=“属性值”]{}
9. 伪类选择器：选择一些元素具有的状态
   元素:状态{}

//并集选择器
div,p{font-size:50px}
<div>aaaa</div> 字体变为50px的大小
<p>bbbb</p> 字体变为50px大小

//子选择器（作用在有此父标签的*子标签*上）
div p{font-size:50px}	
<div> <p>sss</p></div> p里的sss字体变为50px;
<p>aaa</p> 内容默认大小

//父选择器（作用在有此子标签的*父标签*上）
div > p{width:300px;}
<div> <p>sss</p></div> 边框宽为400px
<div>aaa</div> 没有宽度

//属性选择器
input[name=’username’]{font-size:50px;}
<input  type=”text” id=”t1” name=”username”>内容大小50px
<input  type=”text” id=”t2” name=”email”/>

(4)Tips

1. 使div内文字在div正中央显示：
   text-align：center
   line-height：（div高度）

2. 设置边框：
   border : border-width || border-style || border-color

   • border-style属性可选
     solid :　 实线边框
     double :　 双线边框。两条单线与其间隔的和等于指定的border-width 值
     none :　 默认值。无边框。不受任何指定的 border-width 值影响
     hidden :　 隐藏边框。IE不支持
   • border-width和border-color属性可以分别设置0-4个值，分别表示：
     0：均使用默认值，黑色，无边框。
     1：将应用于全部四条边。
     2：第一个作用于上下边框，第二个作用于左右边框。
     3：第一个作用于上边框，第二个作用于左右边框，第三个作用于下边框。
     4：分别作用于上、右、下、左边框。

3. 盒子模型

   • margin：外边距

   • padding：内边距
     * 默认情况下内边距会影响整个盒子的大小
     * box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小（大小不变价）

   • float：浮动（使div在同一行上显示）
     * left
     * right