day01：html以及css样式
注：蓝体字为java中级的补充！！！
一，html
补充01：HTML的简介
HTML（HyperText Mark-up Language）即超文本标记语言.
HTML文本是由HTML命令(标签)组成的描述性文本，HTML命令可以说明文字、图 形、动画、声音、表格、链接等。
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的 具体内容。
补充02：互联网的三大基石
HTML语言被称为互联网的三大基石之一(其余两大基石分别为：HTTP协议、URL)。
- HTTP协议：解决了服务器和浏览器之间数据如何传送、传送格式的问题！实现了分布式的信息共享。
- URL协议：解决了众多服务器中资源定位问题。从而让浏览器可以访问不同的服务器资源，实现了全球信息的精确定位。
- HTML语言：解决了数据在浏览器中如何丰富多彩的展示，及如何合理标示信息的问题。
总而言之，言而总之：html页面根据http协议发送请求给url指向的资源！！！
补充03：为什么要学习html
目前软件的架构多数采用B/S 架构，此处的B即为Browser浏览器。那么，要想在浏览器中展示数据，必然涉及到HTML。因此，HTML也成为目前软件工程师必须要掌握的基本技能！
补充04：一些有关html标签和html元素的概念
注：开始标签的英文翻译是 start tag 或 opening tag，结束标签的英文翻译是 end tag 或 closing tag
html元素：标记+中间内容
例如： <b>bjsxt</b> 称之为一个元素！
补充05：一些常用的标签
补充11：内嵌<embed>(单标签)+<video>+<iframe>（剩下2个双标签）
<embed>标记用于在页面中嵌入多媒体文件，但是用户计算机上需要事先安装相应的处理程序。
1.常用嵌入式文档的格式：mp3, mid, wma, asf, swf, flv, rm, ra, ram, avi
2.典型用法：
-
html语法
2.标题字体
补充06：搜索引擎比较重视<hx>标记中的内容
3.物理字体
补充07：
<del>中划线显示(删除效果)
补充08：水平线<hr>
width 属性可以使用pixels像素值，也可以使用百分比。请注意它们的区别。如果是百分比，会随着窗口的变化，宽度也发生变化。像素值的话，窗口大小发生变化，水平线宽度也不发生变化。
3.字符实体
补充09：字符实体
想要在HTML中显示一个小于号“<”，需要用到字符实体：<或者<
4，列表
- 无序列表
- 有序列表
- 自定义列表
5超链接和图像
- 超链接
a标签里设置title时：
补充10：a标签的锚点设置
<!--
a 标签是超链接
href 所要链接的地址
target 设置页面打开方式
_blank 在一个新的窗口打开页面
_self 在当前窗口打开页面
-->
<a href="http://www.baidu.com" target="_self">点击前往百度</a>
<!--
跳转到其他页面
-->
<a href="../day03/test.html" title="点击跳转到day03">点击</a>
<!-- 点击下载文件-->
<a href="test_01.zip">点击下载</a>
<!-- 点击发送邮件-->
<a href="mailto:1525676@163.com">邮箱</a>
<!--
绝对路径：从盘符开始，一级一级目录找到目标文件
相对路径：从当前位置出发，找到目标文件
-->
<img src="img/img02.jpg" alt="图片去火星了" title="图片">
- 图像
6表格 （给表格设置背景颜色 bgcolor!）
表格的基本格式
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
*表格的相关属性
1）width="表格的宽度"
2）height="表格的高度"
3）border="表格的边框"
4）bordercolor="边框色"
补充12：table标签<table><tr><td><th>
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
7表单
补充13：表单的一些表单元素（内含隐藏域+下拉列表的selected）
问：默认提交的on是啥？
<input type="checkbox" name="C3" value="ON">
这是一个checkbox，需要发送一个指定的value给script进行判断。
该checkbox给C3赋值为ON，引发相关的脚本程序或者判断
1、表单框
<form name="表单名称" method="post/get" action="url">
</form>
2、表单控件
<input type="" />
控件的具体细节
1）文本框
<input type="text" value="默认值"/>
2)密码框
<input type="password" />
3)提交按钮
<input type="submit" value="按钮内容" />
4)重置按钮
<input type="reset" value="按钮内容" />
5)空按钮
<input type="button" value="按钮内容" />
5）单选按钮组
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral”
checked="checked" />(默认选中)女
6）复选框
<input type="checkbox" name="like" />
<input type="checkbox" name="like" disabled="disabled" /> (disabled="disabled" :禁用)
(checked="checked" :默认选中)
7)按钮
<input name="" type="button"
value="按钮内容" />
（他和submit的区别是 ，submit是提交按钮 起到提交信息的作用，button只起到跳转的作用，不进行提交。）
8表单域
<select name="" >
<option>下拉选项1</option>
<option>下拉选项2</option>
…………
</select>
表单域多行文本
格式：<textarea name="" cols="" rows="" >
</textarea>
说明
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。
常用元素
- div和span标签
表单的补充
1.action：表单提交地址，向服务器提交表单通常做法都是提交按钮。 2.method： get和post get 显示url（地址） post：不显示地址 3.form子标签加name才能提交 4.提交的是value的值 5.对于radio和checkbox而言 没有设置name的话提交on上的值 6.select提交的是option的value的值，如果没有设值提交option中间的文本 7textarea提交的是标签中间文本值 8.<input type="submit/reset/botton“ value=”“> value表示按钮的值 <botton type="submit/reset/botton">xxxx<botton>xxxx是按钮上的文字 9.<label for=”woman“></label><input id="woman" type="radio"></input> 对男女包装
二css
补充2种导入 1.link+2.@import 的区别和关系
1.link
语法：
<link href="url路径" rel="stylesheet" type="text/css" media="媒体查询列表"/>
例子:
<link href="common.css" rel="stylesheet" type="text/css" media="print,tv"/>
link 是 HTML 文件中的标签，在 <head> 标签中使用。如果指定了媒体查询类型，则只有在满足条件的情况下才会引入指定的样式文件。
2.@import
语法：
@import url; @import url 媒体查询列表; /*一个逗号分隔的 媒体查询 条件列表，满足条件时才引入 CSS。*/
例子：
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('mobile.css') (max-width: 680px);
@import url('landscape.css') screen and (orientation:landscape);
@import 是 CSS 中的一个@规则，必须先于所有其他类型的规则（@charset 规则除外），结尾需要加分号。@import 用于从其他样式表导入样式规则
因为必须要用 CSS 引擎来解析，所以只能出现在 CSS 文件中或 HTML文件的 <style> 标签中。
3.link和@import的异同点
1.link 是 HTML 文件中的标签，在 <head> 标签中引入 CSS 文件。
2.@import 是 CSS 中的一个 @规则，只能出现在 CSS 文件中或 HTML文件的 <style> 标签中。
3.@import 和 link 一样，都可以定义媒体查询(media queries)
4.import应用场景
1.非模块化开发
@import 引入的样式在所在的 CSS 文件加载完成后再加载，不推荐使用。
正常开发时，所有的 CSS 文件都需要引入。如果在某个 CSS 文件中使用了 @import ，浏览器要先下载使用了 @import 的 CSS，解析完后发现有另外的 CSS 文件需要下载，再去下载、解析，增加了用户的等待时间。
如果 CSS 内容不多, 可以合并到一个文件里, 减少请求次数。对于多个独立的 CSS 文件, 最好直接用 link 标签加载。
2.模块化开发
在用 webpack 等工具开发时，会合并 CSS 文件。如果 CSS 文件相互之间有依赖，可以直接用也只能用 @import 引入，最后构建好的文件会合并文件，不会出现 @import。
！important属性
属性: 忽略 远近 优先 使用 这个样式
@charset
用在css文件中
1、内部样式表（嵌套到页面中）
语法：
<style type="text/css">
css语句
</style>
注：使用style标记创建样式时，最好将该标记写在<head></head>;
2、内联样式（行间样式，行内样式，嵌入式样式）
语法：
<div style="属性1:值1;属性2:值2;属性3:值3;……">
</div>
3、引用外部样式表文件
(1) 语法：
<link href="目标文件的路径及文件名全称"
rel="stylesheet" type="text/css" />
说明：使用link元素导入外部样式表时，需将该元素写在文 档头部，即<head>与</head>之间。
rel：用于定义文档关联，表示关联样式表；
type：定义文档类型；
css选择器
补充14：类选择器和id选择器的区别？
1.id相当于人的身份证，不可以重复
2 class相当于人的名称可以重复
3.一个html标签只能绑定一个id名称
4.一个html标签可以绑定多个class名称
上述总结一个定义一个class标签可以被多次使用，但是id被定义出来在整个生命周期只能被使用一次 类似于java中的常量！！
注意：id一般情况下是给js用的，所有除非特殊情况下，否则不要用id去设置样式
补充15：属性选择器
[attribute=value] 选择 attribute="value" 的所有元素。
注：attriibute=属性
例子：
1.类型选择符（标记选择器）
2.类选择符 （class选择符）
3.ID选择符 （id选择器）
4.伪类选择器
5.群组选择符（集合选择器）
6.通配符（*）
7.包含选择符（后代选择器）
4==伪类的细节
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
}
div:hover{
background-color: blue;
}
div:active{
background-color: yellow;
}
/*
伪类选择符
设置标签的几种状态
1，link 正常状态
2，visited 访问过后的状态
3，hover 光标悬浮的状态
4，active 点击没放手的状态
只有a标签可以全部设置这4种状态
设置的顺序必须按照该顺序来，否则也可能不起作用
马老师独家记忆法
love hate 爱恨交织
*/
a:link{
color: red;
}
a:visited{
color: yellow;
}
a:hover{
color: green;
font-size: 40px;
}
a:active{
color: black;
font-size: 20px;
}
</style>
5.群组选择符的详细
<title>群组选择符</title>
<style type="text/css">
/*
当多个选择符具有相同的样式的时候
可以声明一个群组选择符
将这些相同的样式写在群组选择符后面
在给每个选择符书写不同的样式即可
*/
.d1 , .d2 , .d3{
width: 100px;
height: 100px;
}
.d1{
background-color: red;
}
.d2{
background-color: blue;
}
.d3{
background-color: yellow;
}
/*
通配符
页面上所有的标签都具有的样式用通配符来表示
*{
border: 1px solid red;
}
*/
/*
包含选择符
指定一个范围内的所有的某一种标签都具有该样式
*/
.d3 p{
color: red;
}
</style>
</head>
<body>
<div class="d1">
</div>
<div class="d3">
<p>123</p>
<p>123</p>
</div>
<div class="d3">
<p>123</p>
<p>123</p>
</div>
<p>123</p>
</body>
</html>
权重问题：包含选择器权重可以相加
权重占比：行间1000 id100 class10 标签1
css的核心属性（如字体的样式 文本的设置等）
颜色的设置：
css的长度单位
- 绝对长度值包括cm、mm、in、pt、pc等
- 相对长度值包括px、em、ex等。
- 字体属性
font-family: "宋体";
- 字体大小
font-size: 30px;
- 字体颜色
color: red;
- 字体加粗
/* 字体加粗 100~500常规字体 600~900粗体 */ /*font-weight: 600;*/ - 字体斜体
font-style: italic;
- 字体的复合写法
font：style variant weight size family； 总体设置字体，按以上顺序;size和family不可和其他属性位置互换； font: italic 100 30px "宋体"; color: red;
