【无标题】HTML5第一周总结

Day01

1.什么是h5

h5是html的第五个版本，也是一门技术的总称。

2.h5可以实现的功能

网页开发；桌面软件；小程序 公众号；App：混合开发，原生开发；小游戏，后端相关的。

3.一个网页的组成部分

页面的结构：用html完成；页面的美化：用css来完成，页面的功能：用javascript来实现。

4.html常用的标签：

（1）.文本标题：<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5><h6></h6>

注.h1到h6字号逐渐减小，有加粗效果，垂直排列

（2）.段落：<p></p>

  (3).加粗<b></b>和<strong></strong>

  (4).倾斜：<i></i>和<em></em>

  (5).上标：

(6)下标：

(7)下划线：<u></u>

(8)删除线：<del></del>和<s></s>

(9)强制换行：<br>

(10)水平线：<hr>

(11)划分区域：<div></div>

(12)文本结点：<span></span>

(13)特殊字符：版权 &copy;空格：&nbsp;

6.三大列表格式

（1）.无序列表

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>  <!-- 默认符号是小黑圈，如要改变，可以在ul上加type="disc"  type="square" type="circle"   type="none"--> 

(2).有序列表

<ol>

<li>1</li>

<li>2</li>

<li>3</li>

</ol>   <!--默认符号是1，2，3---，如需改变可加type="1"  或者type="A";type="I";type="a"。如果要改变开始的位置，可以给ol添加start=""-->

(3)自定义列表

<dl>

     <dt></dt>

     <dd></dd>

     <dd></dd>  <!--dd可以有多个但dt只能有一个-->

</dl>

Day2

1.html标签

<img src="" width="" height=""  title="" alt="">

(1）src书写目标图片的路径

(1.1)绝对路径：D:\12.jpg;

(1.2)相对路径：当前文件和目标文件在同一目录src=“目标文件的名字+拓展名”

当前文件与目标文件所在的文件夹在同一目录下src="目标文件所在的文件夹/目标文件的名字.拓展名” 

当前文件所在的文件夹与目标问价在同一目录下src="../目标文件.拓展名"

注：图片一定要在站点里面，不要出站点外面。  width和height后面可以不写px,  title指鼠标悬停之后显示的内容，alt指图片丢失之后显示的信息。

2.表单

（1）作用：用来收集数据

创建一个表单<form action="设置提交的地址"  method="设置提交方式"></form>

method有两种提交方式，一种是get,他是一种默认值，用来获取数据，安全性较低，在数据传送过程中，用户可以在地址栏上看到传送的过程，数据量较小。第二种是post,用来传送数据，在数据传送过程中，用户不可以在地址栏上看到传送的过程，安全性较高，数据量较大。

输入一个表单<input type=""  placeholder=""  name=""  value="">

其中type="类型"  其中有type="text" type="password" type="submit"  type="reset"  type="button"

placeholder="书写提示信息"   

name必须填写，如果不填写，用户在传送数据时会接受不到

value 对text和password是用来给定初始值的，对submit和reset和button来说是修改文本内容的

（2）超链接

<a href="" title="" target=""></a>

target用来设置窗口的打开方式 默认情况下targe="_self"   target="_blank"表示 在新窗口打开

title="鼠标悬停之后的提示信息"

href后面可以跟相对路径和绝对路径，使用方法跟img一样

3.css基础

什么是css?   css是层叠样式表

css可以做什么？ 可以用来修饰网页

css的三种引入方式

（1）行内样式（也称内联样式 嵌入式样式）<标签 style="width:50px  height:50px"></标签>

（2）内部样式，先在body里面创建想要修饰的样式如<p></p>,然后在head里面创建<style></style>,最后在style里面style里面修饰想要的样式p{width="50px"}

(3)外部样式  ，先在body里面写入想要修饰的样式，然后在外面建立一个css文件，用Link连接起来，然后在css里面书写修饰过程p{width="50px"}，通过Link或者import将html和css连接起来，

<link href="" rel="stylesheet">

4权重值

行内样式权重值是1000，class是10，id是100，类型选择器是1

5.选择器的分类

基本选择器，伪类选择器，层次选择器，伪对象选择器1，属性选择器

Day03

1.css相关的选择器

基本选择器，层次选择器

基本选择器有通配符和群组选择器两种，通配符是让所有的标签执行该样式常用于*{padding:0;margin:0;}权重是0。群组选择器是用于简化代码，语法是某某1，某某2，某某3，没有权重的概念。

层次选择器有两种结构一种是包含结构，一种是并列结构，包含结构有两种，一种是后代选择器，一种是子选择器，后代选择器的语法是某某1 某某2{}，可以选择某某1里面所有的某某2。子选择的语法是某某1>某某2{}，可以选择到某某1里面的某某2，权重都是算和。

并列结构有两种，一种是相邻兄弟选择器，另一种是通用兄弟选择器，相邻兄弟选择器是对于后面紧挨着的选择器的操作，语法是某某1+某某2，权重算和。通用兄弟选择器是对于后面所有兄弟的操作语法是某某1~某某2，权重算和。

2.css相关的属性

font-size，字体大小。浏览器默认是16，谷歌最小是12px，12pt=16px 1em=16px ,em是相对于字体大小而言的

color,文字颜色

字体，font-family

加粗属性:font-weight:bolder/bold/normal;    font-weight:100-300/400-500/600-900;<!--

不带单位 -->

倾斜，font-style:italic/oplique;

文本水平对齐：text-align:left/right/center/justify; 其中text-align=“justify”只对多行起作用

text-align-last:justify;实现单行的时候也可以两端对齐，如果是多行只对最后一行起作用。

Day04

1.行高

 行高是基线到基线的距离，也可以是底线到底线的距离，也可以是顶线到顶线的距离

行高是字体大小加间距

如果想要清除文字自带间距，可以使用line-height:1;或者line-height:100%;来表示

 2.首行缩进text-indent：2em;  <!--em是相对于字体大小而言的,可以是负值，只对第一行起作用>

3.text-decoration:   ;文本修饰后面可以跟上划线overline，下划线underline,删除线line-through

4.行内样式>ID>class>类型选择器>通配符>自带样式>继承样式

继承来的样式最低，跟文本相关的属性可以继承

5.CSS的背景属性

background-color:背景颜色；background-image:url();  background-repeat:<!--默认情况下是平铺 的，可以设置background-repeat：no-repeat/repeat-x/repeat-y；    

background-position:水平位置  垂直位置；可以跟负值，可以跟数字；

background-attachment:scroll/fixed;<!--固定之后就像对于浏览器窗口了

 默认的时候：图片的位置在容器的左上角。