html-css小记

Posted on | Updated on | In , | comments: | Visitors:
Words count in article: 3.5k | Reading time ≈ 14

HTML

1.什么是html?

HTML:超文本标记语言（Hyper Text Markup Language）

是网页的结构层，由W3C制定标准。

2.HTML文档的基本组成

1
2
3
4
5
6
7
8
9
<!DOCTYPE html> 
<html>
    <head>		
        <meta charset="UTF-8"> 
        <title></title>
    </head>
    <body> 
    </body>
</html>

1.!DOCTYPE html文档声明:让浏览器按照HTML5的标准对代码进行解释与执行,文档类型声明必不可少，而且必须放在文档最上方;

2.head 头部:也称作描述区。
3.title网页的标题:也就是浏览器标签栏中显示的文字;
4.body内容区:用来放在网页中能看见的内容部分。

3.HTML的标签

3.1双标签

成对显示，有开始标签和结束标签.

例如：

1
<div></div> <!--在开始标签和结束标签中间可以嵌套其他标签-->

3.2单标签

也叫空标签单标签是没有内容的标签，在开始标签中自动闭合。

例如：

1
<img src="" title />

4.常用的标签

###4.1标题标签h1-h6

1
2
3
4
5
6
<h1>一级标题</h1> <!--最大,慎用，一般一个网页只有一个h1（常用来嵌套logo）-->
<h2>二级标题</h2>
<h3>一级标题</h3>
<h4>二级标题</h4>
<h5>一级标题</h5>
<h6>二级标题</h6> <!--最小-->

###4.2段落标签P

<p></p>

作用：突出显示一段文字，被p标签包含的文本或者文字独占一行。不与其他元素同行显示。

4.3文本样式标签

/ 倾斜显示文本

给文本添加下划线

/ 文本加粗

给文本添加删除线

上标显示文本

下标显示本文

4.4 强制换行<br/>

###4.5水平线 <hr/>

4.6字符实体

&nbsp 空格

&copy 版权符号

4.7列表

4.7.1有序列表

1
2
3
4
5
<ol>
    <li>我是第一项</li>
	<li>我是第二项</li>
	<li>我是第三项</li>
</ol>
  1. 我是第一项
  2. 我是第二项
  3. 我是第三项

4.7.2无序列表

1
2
3
4
5
<ul>
    <li>我是第一项<li>
    <li>我是第二项<li>
    <li>我是第三项<li>
</ul>
  • 我是第一项
  • 我是第二项
  • 我是第三项

4.7.3自定义列表

1
2
3
4
5
6
7
8
<dl>
    <dt>名词1</dt>
    <dd>名词解释</dd>
    <dd>名词解释</dd>
    <dt>名词2</dt>
    <dd>名词解释</dd>
    <dd>名词解释</dd>
</dl>
名词1
名词解释
名词解释
名词2
名词解释
名词解释

4.8链接标签

1
<a href="url" target="_blank" >文字或者图片</a>

target:指定链接页面打开的方式，默认值为_self,在原有的窗口打开;_blank为在新的窗口打开。

4.9图片链接

1
<img src="图片地址(url)" title="鼠标悬停在图片上时显示的文字" alt="图片不能显示时显示的文本" />

4.9.1相对路径

1.同级目录下查找：<img src="xxx.jpg"/>
2.在子级文件夹中查找：<img src="images/xxx.jpg"/>、<img src="images/images1/xxx.jpg"/>
3.在父级目录下查找：<img src="../xxx.jpg"/>、<img src="../images/xxx.jpg"/>、<img src="../../images/xxx.jpg"/>

4.9.2绝对路径

从根目录开始查找，常用于网络文件路径。

例如：

“D:\web\img\logo.gif”，或完整的网络地址(http://www.1000phone.com/img/banner_5_pic1.png）

4.10表格

1
2
3
4
5
6
7
8
<table>
    <tr>  <!--属性：bgcolor="设置该行所有单元格的背景色";align="left/center/right"设置内容水平对齐方式-->
        <td></td>	<!--width="" height="" align="" valign="" bgcolor="" -->
        <td></td>
        <td></td>
    </tr>
</table>
ps:这是一个一行三列的表格

1.<table> 表格标签,常用的table属性：cellspacing（表格边框到单元格边框的距离.单元格和单元格之间的距离）、cellpadding（单元格边框到内容的距离）

2.<tr> 表格的行,须嵌套在table中.

3.</td> 单元格（横向）,须嵌套在tr中。

4.单元格合并：colspan(合并列,横向合并)，rowspan(合并行,纵向合并)，colspan/rowspan=”n”,这里的”n”代表合并几个，colspan=”n”，说明横向合并列，就在当前的tr里删除被合并的单元格；rowspan同理。

4.11表单

1
2
3
<form action="数据提交的url" method="get/post(数据请求的方式)">
    <input type="表单控件类型"/>
</form>

4.11.1文本输入框

1
<input type="text" name="定义当前控件的名称" value="默认显示在输入框里的值(如：请输入您的姓名)"/>

4.11.2密码框

1
<input type="password" name="定义当前控件的名称" value="默认显示在输入框里的值(如：请输入密码)"/>

4.11.3单选按钮

1
2
3
<input type="radio" name="定义当前控件的名称/分组的组名"/>
ps:同系列的radio，name值必须一致。
默认选中：checked="checked"

4.11.4复选框

1
2
3
<input type="checkbox" name="定义当前控件的名称/分组的组名"/>
ps:同系列的checkbox，name值必须一致。
默认选中：checked="checked"

4.11.5提交按钮

1
2
<input type="submit"/>
将表单数据提交给服务器

4.11.6重置按钮

1
2
<input type="reset"/>
重置表单，将表单内容清空，恢复到初识状态

4.11.7普通按钮

1
2
<input type="button" value="点我(显示在按钮上的值)"/>
到后期通常和js绑定

5.HTML标签/元素的分类

5.1块级元素

从上向下排列，可以设置宽和高，元素独占一行。一般用作其他标签的容器或者父元素。

例如：

1
2
3
4
5
6
<div></div>  
<p></p>   
<h*></h*>  
<ul></ul>   
<li></li>
...

5.2行内元素/内联元素

从左到右排列，不能设置宽和高，元素的大小由内容撑开。

例如：

1
2
3
4
5
6
<a href=""></a>
<em></em>   
<i></i>    
<b></b>  
<span></span>
...

5.3行内块元素

从左到右排列，可以设置宽和高，但是有默认的宽高。用float浮动或者display可解决默认宽高。

例如：

1
2
3
<img src="" title="" />    
<input type="" name="" />
...

CSS

1.什么是css？

CSS：层叠样式表(Cascading Style Sheets)，俗称网页美容师。

是网页的表现层，标准同样由w3c制定。用于修饰和美化网页元素，实现网页排版和布局。

2.从建立样式表的方式对css进行分类

2.1内联样式表

在标签中使用style属性，引入css样式代码。

语法：<标签 style="声明">

例如：

1
2
3
<div style="width:200px;height:200px;background-color:red;"></div>
      
直接在标签后引入css样式，声明用""包裹起来，多个声明用冒号隔开。

2.2内部样式表

可以将css代码和具体的标签进行分离，在html中使用双标签<style></style>将css代码引入。

语法：

1
2
3
4
5
6
7
8
9
10
<style>
  选择器1{
    声明1；
    声明2；
  }
  选择器2{
    声明1；
    声明2；
  }
</style>
1
2
3
4
5
6
7
<style>
  div{
    width:200px;
    height:200px;
    background-color:red;
  }
</style>

2.3外部样式表

真正实现html文档与css样式表的分离，在html中引入外部.css文件。

引入方式1：

1
<link rel="stylesheet" type="text/css" href="url(外部样式文件.css)"/>

引入方式2:

1
2
3
<style>
@import url(外部样式文件.css);
</style>

注意⚠️：两种方法之间的区别：

1.本质的差别：link属于html标签，而@import是由css提供的一种方式；

2.加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

3.兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

4.使用dom(document object model文档对象模型 )控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

2.4以上三种样式表的优先级

内联样式表的权重最高

内部样式表和外部样式表，与书写代码的顺序有关：在不发生冲突的情况下，共同起作用。如果发生冲突，后者居上。

3.css选择器/选择符

3.1标签(元素)选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下： 

1
2
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
   元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

3.22 id 选择器

使用 # 进行标识 后面紧跟 id 名字 

1
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

说明

A）当我们使用id选择符时，应该为每个元素定义一个id属性 如：<div id="div1"></div> B）id选择符的语法格式是“#”加上自定义的id名 如：#box{width:300px; height:300px;}

C) 起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字) 如：head标记 D）一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。 E) 最大的用处：创建网页的外围结构。

###3.3 类(class)选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

1
2
3
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

 标签调用的时候用 class=“类名”  即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

goole 案例

3.4 id 选择器和类选择器的区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜

id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

3.5 多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

  1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受css样式书写的上下顺序有关。
  2. 各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

3.6 群组选择器

语法：选择符1，选择符2，选择符3{属性：属性值;} 说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。

3.7 通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下： 

1
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

3.8 伪类选择器

伪类可以用于文档状态的改变、动态的事件等，例如用户的鼠标点击某个元素、未被访问的链接。

语法：

a:link{属性:属性值;} 超链接的初始状态

a:visited{属性:属性值;} 超链接被访问后的状态

a:hover{属性:属性值;} 鼠标划过超链接时的状态

a:active{属性:属性值;} 鼠标按下时超链接的状态

要按照 :link –> :visited –> :hover –> :active 的顺序。 错误的顺序有时会使超链接的样式失效

记忆口诀：

lv 包包， hao

3..9 包含选择器

语法：选择符1 选择符2{属性：属性值;}

说明：

选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2;

用法：当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。

##4. 权重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
css中用四位数字表示权重，权重的表达方式如：0，0，0，0 

类型选择符的权重为0001 

class选择符的权重为0010

 id选择符的权重为0100 

伪类选择符的权重为0010  

包含选择符的权重：为包含选择符的权中之和 内联样式的权重为1000 

内联样式的权重为1000

继承样式的权重为0000

当不同选择符的样式设置有冲突的时候，高权重选择 符的样式会覆盖低权重选择符的样式。

例如：b .demo的权重是1+10=11 .demo的权重是10 所以经常会发生.demo的样式失效

相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。（注意：是css样式中定义该选择符的先后，而不是html中使用先后）

0%