day11 前端知识简单总结

<tabel>...</table>:整个表格以<table>标记开始、</table> 标记结束。
<tr>...</tr>：表格的一行，那么以为着有几个tr，表格就有几行。
<td>...</td>:表格的一个单元格，一行中包含几对<td></td>,说明一行中就有几列。
<th></th>:表格的头部的一个单元格，表格表头。
表格中列的个数，取决于一行中数据单元格的个数
caption标签，为表格添加标题
横向合并colspan 纵向合并rowspan

2.11 form表单

<form>：form标签是成对存在的，以<form>开始，以</form>结束。
action:浏览器输入的数据被传送到的地方，比如一个PHP页面(action.php)
method:数据传送的方式(get(默认)/post)

文本框和密码框

<form>

<input type="text" name="名称" value="文本" palceholder='请输入用户名'/>

<input type="password" name="名称" value="密码" palceholder='请输入密码'/>
</form>

type:
- 当type为’text‘时，输入框为文本输入框
- 当type为’password‘时，输入框为密码输入框
name:为文本框命名，后期用来给后台程序Java、PHP使用
value:为文本输入框设置默认值。(一般起到提示作用)
placeholder：提示用户内容的输入格式

单选框radio和复选框checkbox

男:<input type="radio" name="sex" value='0' checked='checked'>
女:<input type="radio" name="sex" value='1'>

复选

吃饭<input type="checkbox" name="hobby" value="eat" checked='checked'>
睡觉<input type="checkbox" name="hobby" value="sleep" checked='checked'>

下拉框select：

<form>
您要报名的课程?<br>
<select name="course">
<option value="python">python中级</option>
<option value="go">go精讲</option>
<option value="web" selected='selected'>web全栈</option> ps:selected 默认选中在<select>标签中设置multiple="multiple"属性，就可以实现多选功能
<option value="linux">linux深入挖掘</option>
</select>
</form>

提交按钮：在表单中有两种按钮可以使用，分别为：提交按钮(submit)和重置按钮(reset)

type:只有当type值设置为submit时，按钮才会有提交作用
value:按钮上显示的文字
label标签标识用户项目中的标题

它通常关联一个控件,label中的for属性，与某表单控件中的id对应。作为label元素的标签控件。
另外，当用户单击该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

填写表单信息时，发现书写错误，可以使用重置按钮使输入框回到初始化状态
<input type='reset' value='重置'>

二. css 简单布局知识

1.css的语法：

由选择符和声明组成，而声明又由属性和值组成

选择符:我们又称为选择器，指明网页中应用样式规则的元素，如上述图中网页的所有(p)的文本变为蓝色，而其它元素(如ul,ol等等)不会受到影响。
声明：在英文大括号”{}”中的就是声明，属性和值之间用英文冒号”：“分割。当有多条声明时，中间可以英文分号”;”分割，如下所示：

p{font-size：12px;color:red;}

css也有注释语句：

用/*注释语句*/来表明(html中使用)。

2.css引入的三种方式和优先级：

内联式
嵌入式
外部式

内联式：css样式表把css代码直接写在现有的HTML标签中

<p style='color:red;'>文字颜色为红色</p>

嵌入式：就是可以把css样式代码写在<style type='text/css'></style>标签之间，一般写在head标签里面

外部式：(也可称为外链式)就是把css代码写一个单独的外部文件中，这个css样式文件以”.css”为扩展名

<link rel="stylesheet" href="index.css" type="text/css">

css样式文件名称以有意义的英文字母命名，如main.css、index.css、base.css等。
rel=”stylesheet”
- rel:relationship的缩写，rel属性用于定义链接的文件和HTML文档之间的关系
- stylesheet：文档的外部样式表
href：Hypertext Reference的缩写。意思是指定超链接(之前学习a标签的时候)目标的URL。是css代码的一种。href属性的值为样式表文件的地址。
<link>标签位置一般写在<head>标签之内

2.优先级

内联式>嵌入式>外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面

3.css选择器

3.1 什么是选择器？

每一条css样式声明由两部分组成，如下：

选择器{

样式;

}

在css中{}之前的部分就是”选择器”,”选择器”指明了{}中的”样式“的作用对象，也就是说该”样式“作用与网页中的哪些元素。

3.2 基础选择器

1.标签选择器

标签选择器也就是html里面的标签，可以对标签设置对应的css属性

2.id 选择器

ID好比是每个人的身份证号一样，每个人都有身份证，并且身份证号是不一样的。在网页中所有的标签都可以设置id，并且id不能重复。

语法：#ID选择器名称{

css样式代码;

}

3. 类选择器

类选择器跟id有点相似，任何的标签元素都可以添加类(class)，但是不同的是类是可以重复，有“归类”的概念，并且同一个标签中可以携带多个类，

用空格隔开。

语法：类选择器名称{css样式代码;}

4. 类和id选择器的区别

相同点：可以应用于任何元素

不同点：

ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅仅一次。而类选择器可以使用多次。

5.高级选择器

5.1 后代选择器

所谓后代，就是父亲的所有后代(包括儿子、孙子、重孙子等)。

语法：

div p{

css代码样式;

}

使用空格表示后代选择器，上面表示 div是父元素，而p是div的后代元素。

也可以给div命名，比如<div class="container"></div>，那么css的编写如下代码：

.container p{
color:red;
}

5.2 子代选择器仅仅表示父亲的亲儿子，只有亲儿子。使用>表示子代选择器。

语法：

div>p{css代码样式;}

5.3 通用选择器

通用选择器是功能最强大的选择器，它使用一个*号来表示，它的作用是匹配html中所有标签元素

*{color:red;}

5.4 组合选择器

html中为多个标签元素设置同一个样式时适用组合选择器

h1,span,p{

color:red;

font-size:14px;

}

5.5 仿类选择器

伪类选择器，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色

a:hover{

color:red;

}

另外a标签不仅仅是应用在hover，鼠标悬浮上，它遵循”爱恨准则“，所谓爱恨就是”LoVe HAte“

/*没有被访问过a标签的样式*/
a:link {
color: green;
}
/*访问过后a标签的样式*/
a:visited {
color: yellow;
}
/*鼠标悬浮时a标签的样式*/
a:hover {
color: red;
}
/*鼠标摁住的时候a标签的样式*/
a:active {
color: blue;
}

6.继承性

继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。

注意：某些属性是可以继承下来的，比如常见的color、font系列的、text-*系列的等等。

但有些属性是不可以继承下来的，比如border:1px solid green;

7.特殊性

浏览器是根据权值来判断使用哪种css样式的，权值高的它的优先级会越高，就会呈现那种css样式，

8 !important

有些特殊的情况需要为某些样式设置具有最高权值，怎么办？比如我们知道内联样式的权值是1000，比较大，那么我们可以使用!important来解决。

<style type="text/css">

div{

color:green !important;

}

</style>

什么情况下可以使用!important?

第一种
- 你的网站上有一个设计了全站样式的css文件
- 同时你或者你的小伙伴写了一些很差的内联样式
第二种

#box p { color: blue; } p.awesome { color: red; }

怎样才能使得文本的颜色变为红色？这种情况下，如果不适用!important.第一条规则永远大于第二条的规则。

常用样式排版

1.字体属性

为网页中的文字设置字体为微软雅黑。

body{font-family:'微软雅黑'}

设置备选字体

body{font-family:'Microsoft Yahei','宋体','黑体'}

设置大小，浏览器默认是16px

字体颜色：颜色分为三原色：红、绿、蓝，三原色进行混合能呈现出不同的颜色

网站中我们可以通过font-weight来设置文字的粗体大小。这里有很多值可选，那么使用最多的就是normal和bold分别代表普通和加粗和字体粗细。

normal：普通字体加粗

bold：加粗的字体粗细

lighter：比普通字体更细的字体

bolder：比bold更粗的字体

100~900 400表示 normal

none:无文本修饰文本属性：如果想实现下划线或者删除线，使用text-decoration属性

underline 文本下划线

overline 文本上划线

line-through 穿过文本的线

缩进两个空格使用text-indent属性来实现。

首行空两格，那么首先要知道字体大小是多少。比如字体大小默认是16px，那么我需要给它设置text-indent:32px;才能实现效果。

设置行距：line-height:2em;表示2倍行间距。

设置中文字间隔或字母间隔可以使用letter-spacing或word-spacing来实现。

文本对齐设置：text-align

left right center

css盒子模型

在css中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(也叫行内元素)和内联块元素。

常用的块状元素有：特点独占一行可以设置宽高

<div>、<p>、<h1>~<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<table>、<form>

常用的内联元素有：所有的内联元素在一行内显示不可以设置狂傲

<a>、<span>、<i>、<em>、<strong>、<label>

常见的内联块状元素有：在一行内显示可以设置宽高

<input>、<img>

盒子模型理解

所谓盒子模型，在css中，”css model“这一术语是用来设计和布局时使用。那么所有的HTML元素可以看作盒子。css的盒模型本质上是一个盒子，来表示周围的HTML元素，它包括：边距、边框、填充和实际内容

盒子模型中有四个属性：内容的宽高、内边距、外边距、边框

width:内容的宽度

height:内容的高度
padding: 内边距表示盒子的边距到内容之间的距离
border:边框
margin: 外边距

未完待续............

posted @ 2019-06-25 15:59 ivy_wang 阅读(189) 评论(0) 编辑收藏举报

刷新页面返回顶部

ivy_wang

day11 前端知识简单总结

目录

一. html 常用标签

1.head里面的标签，仅仅应用于网页的一些基础信息

1.1 meta 属性http-equiv 向浏览器传达一些有用的信息与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

1.2 .title标签用来告诉用户和搜索引擎这个网页的主要内容是什么

2. body里面的常见标签

二. css 简单布局知识

1.css的语法：

2.css引入的三种方式和优先级：

2.优先级

3.css选择器

3. 类选择器

4. 类和id选择器的区别

5.高级选择器

6.继承性

7.特殊性

8 !important

公告

ivy_wang

day11 前端知识简单总结

目录

一. html 常用标签

1.head里面的标签，仅仅应用于网页的一些基础信息

1.1 meta 属性http-equiv 向浏览器传达一些有用的信息 与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

1.2 .title标签用来告诉用户和搜索引擎这个网页的主要内容是什么

2. body里面的常见标签

二. css 简单布局知识

1.css的语法：

2.css引入的三种方式和优先级：

2.优先级

3.css选择器

3. 类选择器

4. 类和id选择器的区别

5.高级选择器

6.继承性

7.特殊性

8 !important

公告

1.1 meta 属性http-equiv 向浏览器传达一些有用的信息与之对应的属性值为content，content中的内容其实就是各个参数的变量值。