H5实战

最新推荐文章于 2023-08-12 11:25:56 发布

Name is Q

最新推荐文章于 2023-08-12 11:25:56 发布

阅读量651

点赞数 1

文章标签： H5学习总结

本文链接：https://blog.youkuaiyun.com/qq_36282231/article/details/95218970

版权

二.js基础

1.运算符：

＊自相加/自相减：前置形式返回一个新的值，但后置返回原来的值（做加法/减法之前的值）。

前置形式，变量前： ++a --a

后置形式，变量后： a++ a--

注意：

1.自相加/自相减只能应用于变量。尝试将其应用于数值（比如 5++）会报错。

2.如果自相加/自相减的值不会被使用，那么两者形式没有区别：

let counter = 0;
counter++;
++counter;
alert( counter ); // 2，以上两行作用相同

3.如果我们想要对变量自相加并且立刻使用值，那么我们需要使用前置形式：

let counter = 0;
alert( ++counter ); // 1

4.如果我们想要使用之前的值，那么我们需要使用后置形式：

let counter = 0;
alert( counter++ ); // 0

一.CSS

1.CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器通常是需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）设置样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

2.id 和 class 选择器

在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

＃test{

text-align: center;

color:blue ;

}
<p id="test">Hello World!</p>

注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

（2）class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

<body>
		<p id="test" class="center">Hello World!</p>
		<h1 class="center">新?</h1>
	</body>

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

如果要在 html 标签中设置 CSS 样式，那么你有四种方法，即 css 选择器有四种。

除了提到的 id 和 class 选择器外，第三种选择器为标签选择器，即以 html 标签作为 css 修饰所用的选择器。

<style>
h3{
    color:red;
}
</style>
<h3>新?</h3>

第四种选择器即直接在标签内部写css代码。

<h3 style="color:red;">新?</h3>

这四种 css 选择器有修饰上的优先级，即：第四种 > id > class > 第三种

（3）兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）

<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p><!--文字是非红色的-->
  <div>no red text</div>
  <p>red text</p><!--文字是红色的-->
</div>

相邻选择器：

语法为：

A+B{
    声明1; 
    声明;
    ...
}

<!--相邻选择器选择每个div紧邻后的一个元素p-->
<style>
   div+p{
     color: red;
   }
</style>
<div>
   <p>not red text</p>
   <p>not red text</p>
</div>
<p>red text</p>
<p>not red text</p>

3.CSS 背景

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

background-color
background-image
background-repeat
background-attachment
background-position

（1）background-color 属性定义了元素的背景颜色.

页面的背景颜色使用在body的选择器中:

<style>
body
{
	background-color:#b0c4de;
}
</style>

（2）background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

设置页面背景图片：

<style>
body 
{
    background-image:url('test.png');
    background-color:#cccccc;
}
</style>

(3)默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

图像只在水平方向平铺 (repeat-x):

<style>
body
{
    background-image:url('gradient2.png');
    background-repeat:repeat-x;
}
</style>

(4)background-repeat ：让背景图像不影响文本的排版

设置背景图像与文本显示在同一个位置

<style>
body
{
	background-image:url('test.png');
	background-repeat:no-repeat;
}
</style>

（5）背景颜色的简写属性为 "background":

可以将这些属性合并在同一个属性中

<style>
body
{
	background:#ffffff url('test.png') no-repeat right top;
	margin-right:200px;
}
</style>

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

3:文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
<p class="uppercase">a</p>
<p class="lowercase">b</p>
<p class="capitalize">c</p>
</body>
</html>

如果想设置英文单词之间的间距，可以使用 word-spacing 来实现,汉字的间隔调节也是用 letter-spacing 来实现的。

h1{
    word-spacing:30px;
}

<h1>word spacing</h1>

4.用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题,使用 em 单位代替像素。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

4.CSS 列表

CSS列表属性作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

(1)列表

在HTML中，有两种类型的列表：

无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

(2)不同的列表项标记

list-style-type属性指定列表项标记的类型是：

<style>
	ul.a{list-style-type: circle;}
	ul.b{list-style-type: square;}
	ul.c{
		list-style-type: upper-roman;
	}
	ul.d{
		list-style-type: lower-alpha;
	}
</style>

一些值是无序列表，以及有些是有序列表。

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性：

ul
{
    list-style-image: url('test.png');
}

列表 -简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

为列表使用简写属性，列表样式属性设置如下：

ul
{
    list-style: square url("test.png");
}

可以按顺序设置如下属性：

list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image

如果上述值丢失一个，其余仍在指定的顺序，就没关系

二.HTML5 新的表单元素

HTML5 有以下新的表单元素:

<datalist>
<keygen>
<output>

1.HTML5 <datalist> 元素

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

3.Vue.js

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

https://cn.vuejs.org/v2/guide/

1.通过如下方式引入 Vue：

或：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。

在 Vue 中注册组件：

Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})