html5自学笔记

声明 ： 所有标签和快捷键是基于webstrom中

<p>段落

<hr>  分割线

<br>  换行 ，不另起一段的换行

<img> 图片

--------------------------------------------------------------

<a> <a href -"指定需要跳转的目标界面"  target - "专门控制如何跳转 " title - "鼠标悬停显示“”>需要展现给用户</a>   

target 中包含 _self :用于当前选项卡中跳转，也就是不新建界面     _blank：用于在新的选项卡中跳转，也就是新建界面

<base> 专门用来统一的指定当前网页中所有的超链接需要如何打开 （必须写在head标签的中）

a标签中的假链接    假链接格式

1. #    点击这个假链接  可以返回网页顶部 

2.javascript:

a标签 可以跳转到指定的位置  但是没有过度动画 ， 也可以跳转到别的页面的指定位置

跳转本页面位置   先给位置ID  在<a href="#ID">

跳转别的页面的位置  同样先给位置ID  然后<a href="跳转的页面#ID"

---------------------------------------------------------------------

列表标签

1.无序列表（使用最多）（unordered list）

2.有序列表（使用最少）（ordered list）

3.定义列表（其次）（definition list）

ul 标签 和li标签都是成对出现的

复杂的界面 可以在li中放其他的标签丰富li标签

生成ul和li 的快捷方法  ul>li*n(n是li的个数)

-----------------------------------------------------------------------

表格标签

格式<table   border="1px">                                     table指的是整个表格

<tr>                                                  tr代表整个表格中的一行数据

<td>需要显示的内容</td>                td代表一行中的一个单元格

</tr>

</table>

表格标签有一个边框属性，这个属性决定了边框的宽度 默认情况下是0 (border)

cellspacing 属性规定单元之间的空间 (用来控制表格线的粗细)  ||  cellpadding 属性规定的是单元边沿与单元内容之间的空间（控制里面文字与边线的距离）

图例：

caption,只要将标题写在caption标签中，标题就会自动相对于表格宽度居中（必须位于table标签中）

th 将当前列的标题自动居中+加粗

单元格合并

colspan 水平方向的单元格合并 <td colspan="2"></td> 

rowspan 水平方向的单元格合并 <td rowspan="2"></td> 

表单

专门用来收集用户信息  表单格式：

<form>

<表单元素>

</form>

常见表单元素

input标签,type属性，有很多类型的取值，取值不同界定了input标签的功能和外观

type类型：

1) button 普通按钮  <input type = "button" value="我是按钮" οnclick="">

2) image 图片按钮

3) reset  重置按钮  作用： 清空表单的数据 value  也可以修改默认标题

4) submit  提交按钮 吧表单数据提交到远程服务器  ，可以通过form标签中的action属性来告诉表单，那个需要提交到服务器

5)  hidden 隐藏域 悄悄收集用户的一些数据，隐藏域是不会出现在界面中的 

6) text 明文输入框

7) password 暗文输入框

8) radio  单选框 需要添加name属性才能单选  checked 属性为默认选中

9) checkbox  多选框  checked=“checked” 默认为选中

form中的绑定格式

1.利用label标签将文字包裹   2.给输入框一个ID  3.通过label中的for属性和输入框进行绑定

例如 ：<label for="text">账号：</label> <input type="text" id="text">

 

下拉列表  格式

<select>    <optgroup labet="分组名称"><option>列表数据</option> </optgroup></select> 

注意点： 1.下拉列表不能输入内容，但是可以直接在列表中选择

2.可以个option标签添加一个selected来指定列表的默认值

3.可以个option标签包裹一层optgroup label="分组名称“

textarea标签  ：定义多行输入框

1.默认情况下输入框可以无限换行

2.默认个情况下输入框有自己的宽度和高度

3. 可以通过cols和rows来指定输入框高度和宽度

多媒体标签

1.video标签   （播放视频）

标签属性  src 需要播放视频的地址 

autoplay 是否需要自动播放  

controls 是否显示控制条

poster  用于未播放时显示的占位图片

loop 一般用于做广告视频 循环播放

preload 预加载视频 注意和antoplay冲突，设置了autoplay 那么proload 就会失效

muted  静音

width/height  控制视频的宽高

第二种格式(为了兼容所有浏览器二推出（.mp4 /.webm/.ogg）

<video>

<source src="video.mp4" type="video/mp4"></source>

source src="video.ogg" type="video/ogg"></source> 

source src="video.webm" type="video/webm"></source>

</video>

2.audio标签（音频）、

标签属性  src 需要播放视频的地址 

autoplay 是否需要自动播放  

controls 是否显示控制条

loop 一般用于做广告视频 循环播放

preload 预加载视频 注意和antoplay冲突，设置了autoplay 那么proload 就会失效

muted  静音

用法和video基本相似

3.详情和概要标签

作用利用summary来描述概要信息，利用details来描述详细信息，默认情况下是折叠状态

格式：

<details>

<summary>概要信息</summary>

详情信息

</details>

 4.marquee 标签 跑马灯效果

<marquee 

direction="设置滚动方向" 

scrollamount="滚动速度（1-100）"

loop="滚动次数  默认为-1位  无数次"

behavior = "设置滚动类型"

> 滚动内容

</marquee>

behavior:参数slide滚动到边界就停止  ，alternate滚动到边界就弹回

strong标签定义重要性强调文字

ins(inseted)标签定义插入的文字

em(emphasized)标签定义强调的文字

del(deleted)标签定义被删除的文字

实体字符 

&nbsp;  空格    

&lt;  小于号<

&gt;  大于号>

&copy; 版权符号

 

Css

格式：

<style type = "text/css">

标签名称{

属性名称：属性对应值；

...

}

</style>

注意点：

style 必须写在head标签的开始和结束标签之间；

2.style标签中的type属性可以不用写，默认就是type= “text/css”

3.设置样式是必须按照规定格式来设置，key:value;

常见文字样式属性

1.规定文字样式的属性

font-style:italic; 设置倾斜

2.规定文字粗细的属性

font-weight:bold;加粗

快捷键
fw	font-weight:;
fwb	font-weight: bold;
fwbr	font-weight: bolder;

3.规定文字大小的属性

font-size: 30px;

注意点： 通过font-size设置大小一定要带单位， 也就是一定要写px

4.规定文字字体的属性

font-family:"楷体";

1.如果取值是中文， 需要用双引号或者单引号括起来

2.设置的字体必须是用户电脑里面已经安装的字体

--如果设置的字体不存在, 那么系统会使用默认的字体来显示
默认使用宋体

--如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办?
可以给字体设置备选方案
格式:font-family:"字体1", "备选方案1", ...;

--.如果想给中文和英文分别单独设置字体, 怎么办?
但凡是中文字体, 里面都包含了英文
但凡是英文字体, 里面都没有包含中文
也就是说中文字体可以处理英文, 而英文字体不能处理中文
**注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

--补充在企业开发中最常见的字体有以下几个
中文: 宋体/黑体/微软雅黑
英文: "Times New Roman"/Arial

--还需要知道一点, 就是并不是名称是英文就一定是英文字体
因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei

font: style weight size family;
例如:
font:italic bold 10px "楷体";

-----注意点:
-----在这种缩写格式中有的属性值可以省略
sytle可以省略
weight可以省略
-----在这种缩写格式中style和weight的位置可以交换
-----在这种缩写格式中有的属性值是不可以省略的
size不能省略
family不能省略
-----size和family的位置是不能顺便乱放的
size一定要写在family的前面, 而且size和family必须写在所有属性的最后

文本装饰的属性
-----格式:text-decoration: underline;
取值:
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
快捷键:
td  text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;

-----文本水平对齐的属性
格式: text-align: right;
取值:
left 左
right 右
center 中
快捷键
ta text-align: left;
tar text-align: right;
tac text-align: center;

-----文本缩进的属性
格式: text-indent: 2em;
取值:
2em, 其中em是单位, 一个em代表缩进一个文字的宽度
快捷键
ti text-indent:;
ti2e text-indent: 2em;

标签选择器

1.什么是标签选择器?
作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性

格式:
标签名称{
    属性:值;
}

注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

id选择器

1.什么是id选择器?
作用: 根据指定的id名称找到对应的标签, 然后设置属性

格式:
#id名称{
    属性:值;
}

注意点:
1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前面加上#
4.id的名称是有一定的规范的
4.1id的名称只能由字母/数字/下划线
a-z 0-9 _
4.2id名称不能以数字开头
4.3id名称不能是HTML标签的名称
不能是a h1 img input ...
5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的

class选择器

1.1
id相当于人的身份证不可以重复
class相当于人的名称可以重复
1.2
一个HTML标签只能绑定一个id名称
一个HTML标签可以绑定多个class名称

2.id选择器和class选择器区别?
id选择器是以#开头
class选择器是以.开头

3.在企业开发中到底用id选择器还是用class选择器?
id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式

4.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可

后代选择器

1.什么是后代选择器?
作用: 找到指定标签的所有特定的后代标签, 设置属性

格式:
标签名称1 标签名称2{
    属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
div p{}

注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去

子元素选择器

1.什么是子元素选择器?
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

格式:
标签名称1>标签名称2{
    属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去

后代选择器和子元素选择器的异同

区别

1.1
后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号
1.2
后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签

2.后代选择器和子元素选择器之间的共同点
2.1
后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2.2
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
选择器1>选择器2>选择器3>选择器4{}

3.在企业开发中如何选择
如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器

并集选择器

1.什么是并集选择器?
作用: 给所有选择器选中的标签设置属性

格式:
选择器1,选择器2{
    属性:值;
}

注意点:
1.并集选择器必须使用,来连接
2.选择器可以使用标签名称/id名称/class名称

兄弟选择器

1.相邻兄弟选择器 CSS2
作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性

格式:
选择器1+选择器2{
    属性:值;
}

注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

2.通用兄弟选择器 CSS3
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性

格式:
选择器1~选择器2{
    属性:值;
}

注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

序选择器

CSS3中新增的选择器最具代表性的就是序选择器
1.同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型

2.同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type  选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n)  选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签