赵大超的学习周志（八）

本周是Java学习的第八周，主要是对前端知识的学习，其中学习的内容包括H5和CSS，具体学习了H5中的各种标签元素，CSS中的使用方式，最后是对网页的设计和布局的学习，综合运用所学可以实现简单的静态网页。总体来说学习的内容比较基础，想要熟练掌握还需要多应用实践，尤其是在对各部分布局上需要考虑怎么做才比较合理得当。现将本周学习的基本内容总结如下：

HTML

HTML 指的是超文本标记语言: Hyper Text Markup Language
HTML：是超文本标记语言，他不是编程语言，他是标记语言

HTML 标签

由< 和>包裹起来的内容，就是HTML的标签
<标签>内容</标签>
HTML编辑器：

vsc
sublime
hbuilder
idea
webStrome

标题标签：

<h1>我是一个H1</h1>
<H2>我是一个H2</h2>
<h5>我是一个H5</h5>
<H6>我是一个H6</h6>从h1到h6，字体是依次从大到小的，其中h1的字体最大，h6的字体最小

段落标签：

<p>我是一个p标签</p>

超链接标签

<a href="https://www.baidu.com">我是一个超链接标签</a>只有当a标签添加了href属性，才会出现可点击的内容

图片标签：

<img src="fenye.png" height="200px" width="200px">img标签有宽高属性可以设置，在没有设置宽高的时候，图片将以100%宽，100%的高进行展示

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息 about an element
属性一般描述于开始标签

属性总是以名称/值对的形式出现，比如：name=“value”。

比如：

<a name="testName" href="https://www.baidu.com">我是一个超链接标签</a>
<img src="fenye.png" height="200px" width="200px">name就是a标签的名称属性   href就是a标签的请求地址属性src就是img标签的路径属性   height 高度的属性   width宽度属性

HTML中属性：一定要用小写

分割线：

<hr>
他是有 width,宽度属性的，可以设置分割线的长度

换行符：
<br>

文本格式：

<b>加粗文字</b>
<i>这是一个斜体文字</i>
<sup>上标</sup>
<sub>下标</sub>

表格标签：

<table border="1">    <tr>        <th>第一</th>       <th>第二</th>        <th>第三</th>    </tr>    <tr>        <td colspan="3">香蕉1</td>    </tr>    <tr>        <td>苹果1</td>        <td>苹果2</td>        <td>苹果3</td>    </tr>    <tr>        <td rowspan="2">葡萄1</td><td>葡萄2</td>        <td>葡萄3</td>    </tr>    <tr>        <td>桃子2</td>        <td>桃子3</td>    </tr>
</table>
colspan：当使用合并列的时候，删除的同一个tr下的列，colspan的值等于n，就删n-1个td
rowspan：当使用合并行的时候，rowspan等于n，就删除n个tr下的对应td

无序列表

<ul>    <li>我是一个无序列表</li>  <li>我是一个无序列表</li>  <li>我是一个无序列表</li>    <li>我是一个无序列表</li>
</ul>

有序列表

<ol>
<li>我是一个有序列表1</li>
<li>我是一个有序列表2</li>
<li>我是一个有序列表3</li>
<li>我是一个有序列表4</li>
</ol>

自定义列表

<dl>
<dt>我是标题</dt>
<dd>我是第一行列表</dd>
<dd>我是第二行列表</dd>
<dd>我是第三行列表</dd>
</dl>

块状元素：不管内容有多少，该标签默认占一整行

块状元素有：ul, li, ol, dl, dt, dd h1-h6 ,p ,table, tr, hr br
注意：块状元素都有宽高属性

行内元素：元素大小只跟元素内容有关

行内元素有： a b i sub sup img
注意：行内标签是没有宽高属性，除了img标签

HTML<div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。

HTML <span> 与元素

HTML <span> 元素是行内元素，可用作文本的容器

<span> 元素也没有特定的含义

表单

表单：一个包含表单元素的区域
表单元素：输入框，文本域，单选，多选，按钮，下拉，滑块

表单form中有两个常见的属性，method:表单提交的方式，分别有get和post，get和post到javaWBE再说
action:表单提交的后台地址
<form method="get" action=""><!--text:文本类型--><input type="text" placeholder="请输入你的名字哦" value="我是一个value"                      name="userName"><br><!--password:密文，比如密码--><input type="password" name="password" ><br><!--search:搜索框--><input type="search" name="search"><br><!--number:输入框只能输入数字，并且可以对数字进行上下调动的按钮--><input type="number" name="tel"><br><!--date:日期选择框--><input type="date" name="date"><!--date:月份选择框--><input type="month" name="month"><!--datetime-local:获取日期和时间--><input type="datetime-local" name="datetime"><!--range:滑块--><input type="range"><br><!--file:文件选择窗口--><input type="file"><br><!--radio:单选框，当使用radio属性时，input中一定加上name属性，并且name的值必须相同--><input type="radio" name="sex" value="1"> 男<input type="radio" name="sex" value="2"> 女<input type="radio" name="sex" value="3">不详<!--checkbox:多选框,每个input都必须加上name属性，且name都必须一致--><input type="checkbox" name="inters" value="1">唱歌<input type="checkbox" name="inters" value="2">劈叉<input type="checkbox" name="inters" value="3">篮球<input type="checkbox" name="inters" value="4">rap<br><!--下拉选择器--><select name="city"><option value="1">武汉市</option><option value="2">潜江市</option><option value="3">监利市</option><option value="4">天门市</option></select><!--文本域，rows可以设置行数，也就是文本域的高；cols可以设置宽度--><textarea rows="4" cols="5"></textarea><br><!--button：按钮，value可以设置按钮的显示内容--><input type="button" value="这是一个按钮"><!--reset：重置按钮--><input type="reset"><!--submit：提交按钮--><input type="submit"></form>注意：
readonly ： input只能读，不能修改，但是可以被提交给后台
disabled：input只能读，不能修改，但是不可以被提交到后台

H5的新元素

什么是 Canvas?

<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

Video

HTML5 <video>标签定义了一个视频或者影片.

以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频

不支持HTML4或者以上版本

<!--controls：HTML5自带的播放器控制台-->
<video width="500px" height="500px" controls>
<source src="H5-01.mp4">
</video>

audio

<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg"></audio>

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

浏览器将HTML5和CSS3进行加载，并渲染出来，在页面展示

语法：
selecter{
css的名称: css的值；
}

选择器的使用：

/*标签选择器：页面中所有的该标签都遵循这个css*/
p{    color: #4a74d8f0;/*color：字体颜色*/    font-size: 20px;
}
/*id选择器：根据id选择到对应的元素*/
#xiaoP{    color: green;    font-size: 50px;
}
/*class选择器：根据元素的class找到对应的元素*/
.secondP{color: blueviolet;font-size: 30px;
}

其中：标签选择的范围最广，精确度最低

class选择器的范围第二广，原因是标签中的class是可以重复的，精确度也低
id选择器，范围最窄，但是精确度最高，因为id 是唯一的

一边加载，一边执行

比如：一个标签中有两个class 那么给这两个class同时设置css，最终谁最后被加载，就使用谁的css

/*class选择器：根据元素的class找到对应的元素*/
.secondP{    color: blueviolet;    font-size: 30px;
}
.testP{    color: red;    font-size: 60px;
}<p class="secondP testP">我是第二个</p>最终使用的.testP的css，而.secondP的css会被覆盖掉

CSS的引用：

内嵌css

第一种方式：在标签内部使用：<p class=“secondP” style=“color: red;font-size: 60px”>我是第二个</p>

内部css

第二种方式：
使用style标签，引用css，在head的后面使用undefined<style>css</style>

外部css：

第三种方式：
使用<link rel=“stylesheet” href=“index.css”>标签，引入外部的css
rel=“stylesheet” 规范引入的css的文件格式 href引入的css的文件路径

img标签比较特殊

img标签的属性width和height，和他的css：width，height 属性和css名称一样
当属性宽高和css的宽高同时存在是，css将约束标签的宽高，而属性不起作用

内嵌的css的优先级最高

内部和外部引用的css，谁后加载，就用谁

背景：

background:url("timg.jpg")   white     no-repeat 1px          2px;背景图片        背景颜色    平铺   1px代表x轴  2px代表y轴

选择器：

*{    font-size: 20px;   全局选择器，整个页面所有标签都遵循这个css
}
p,div{    所有的p标签和所有的divcolor: #4a74d8f0;/*color：字体颜色*/font-size: 20px;}div p{   选择到所有的div标签包含的p标签color: black;}div>p{  选择父元素为div的所有的p标签color: blue;}div+p{   选择所有div之后的p标签color: palevioletred;}p[class]{   选择所有有class属性的p标签color: violet;}p[class=firstP]{   选择所有class等于firstP属性的p标签color: violet;}
伪类选择器p:hover{   当鼠标悬停到标签上时触发的选择器，鼠标移开恢复原样} input:focus{   当input标签被选择，出现可以输入的光标时触发的选择器，失去焦点时，恢复原样height: 100px;}

浮动float和display：

标准文档流：页面中元素按照其原有的特性进行排列

脱离标准文档流：给块状元素添加了浮动之后，块状将不会按照标准文档的排列顺序进行排列，而会进行位置移动

当需要让块状元素排成一行时，可以给块状元素添加float的css，这样这些块状元素将脱离标准文档流，并且排成一行，同时他也会覆盖掉标准文档的标签

float:left;    让块状元素向左浮动，添加了float属性后，块状元素将脱离标准文档流
clear:both;    清除浮动，清除的是该元素的四周的浮动属性与该元素的影响dispaly 属性
/*将块状元素转换为行内元素*/
display: inline-block;/*行内块状元素：有行内元素的特性：不主动换行；又有块状元素的特性：可以设置宽高*/display: block;/*block：将一个行内元素转换为块状元素*/display: none;/*当使用display为none时，该标签不会被显示在页面中*/

盒子模型

蓝色的区域：元素的内容区域

padding：内边框----内容区域与border之间的距离

border: 边框

margin：外边框----元素与元素之间产生的距离

其中行内元素只能调整margin-left和margin-right,上和下是无法调整，如果要调整行内元素的上下，那么就需要调整他父元素的padding（内边距）

当块状元素添加了浮动后，他会覆盖正常没有添加浮动的块状元素（取消覆盖的方式：clear:both）清除浮动

当行内元素和块状元素在一起，都有超过一定数值的border厚度时，行内元素的上边框和下边框会覆盖其他元素的内容

当两个块状元素分别调整margin-bottom和另外一个的margin-top时，谁的值更大，就使用谁的外边距

一个元素的宽度=内容+padding+border+margin

定位：

就对页面中的某个元素实现位置调整

绝对定位：

position: absolute;

当给一个元素添加了绝对定位css后，如果不进行位置调整时，这个元素将在原位不动

如果需要调整位置时：top,bottom,left,right

定位的参考对象：

添加了绝对定位属性后，该元素会找他的父元素，如果他的父元素没有position属性，那么他会找他父元素的父元素，这样逐层找，直到找到包含有position的某一个长辈元素，如果没有找到任何长辈元素有position属性，那么该元素将以body元素为基准进行定位调整

当元素添加了绝对定位后，该元素就脱离了标准文档流

当一个元素进行了绝对定位，并且进行了位移，那么他未进行移动的时候的位置，浏览器将不会给他保留

相对定位：

相对定位：position: relative;

相对定位是，相对于他自己原有的位置进行定位

相对定位的元素是没有脱离标准文档流

当一个元素添加了相对定位后，他移动之后的位置，浏览器会给他保留

定位的口诀：父相子绝

固定定位：

position: fixed;

将一个元素固定在页面中的某一个位置上，不管页面如果滑动，他的位置都不会改变

固定定位的元素会脱离标准文档流

固定定位是根据body为基准进行定位移动的