HTML+css 基础语法


title: HTML+css 基础语法
categories: HTML
tags: [语法,HTML,css]


一、HTML

什是么网站?

​ 网站(Website)开始是指在因特网上根据一定的规则,使用HTML等工具制作的用于展示特定内容相关网页的集合

什么是网页?

​ 网页是一个包含HTML标签的纯文本文件,它可以存放在世界某个角落的某一台计算机中,是超文本标记语言格式文件扩展名为.html。

文字与图片是构成一个网页的两个最基本的元素。

1. WEB标准的概念及组成

结构:

HTML- 超文本标记语言 (Hyper Text Markup Language)

XHTML-可扩展超文本标记语言(EXtensible HyperText Markup Language)

表现:

CSS-层叠样式表(Cascading Style Sheets)

行为:

JavaScript-是轻量级的脚本语言

2. XHTM基本语法

1、常规标记/双标记
<标记 属性=“属性值”  属性=“属性值”>标记>
2、空标记/单标记

<标记 属性=“属性值” />

说明:

​ 写在<>中的第一个单词叫做标记、标签、元素名。

​ 标记和属性用空格隔开,属性和属性值用等号连接,属性值必须放在“”号内。

​ 一个标记可以没有属性也可以有多个属性,属性和属性之间不分先后顺序。

​ 空标记没有单独的结束标签,用“/”代替。

3. HTML5 基本结构

文档类型声明

<html>html>说明文档写的是标记语言 ,根标签

<head>head>文件头部

<title>title>文件标题(显示在状态栏上的内容)

<meta charset="utf-8" />['metə]
编码格式--meta标记用于定义文件信息,对网页文件进行说明,便于搜索引擎查找设置关键字等  

<body>body>文件主体(所有要写的内容)

4. 标签(<>)

(1)标签单双分类(根据有无单独的结束标签):

1. 双标签(常规标签):有单独的结束标签

​ h1~h6 p b strong i em del sup sub s strike ul ol dl dt dd li a table tr td

​ div span

2. 单标签(空标签):没有单独结束标签

​ br hr img ​

(2)元素行块分类(根据有没有自占一行进行分类的):

1. 块状元素:自占一行:

​ h1~h6 p hr ul ol dl dt dd li table div del

​ **2.行内元素:**宽度跟内容大小一致,并且可以跟其他的行内元素在一行内并列显示的:

​ b strong i em del s strike sup sub br img a imput buttom span

(3)标签作用

加粗:
<b>定义粗体的文本b>     //没有语义强调的意思,一般称为物理字体格式化标签
<strong>把文本定义为语气更强的强调的内容strong> //有语意 强调
倾斜:
<i>显示斜体文本效果i> //没有语义强调的意思,一般称为物理字体格式化标签
<em>把文本定义为强调的内容em>  //有语意 强调
删除标记:
<del>
<s>元素,已废弃,用来给文本加删除线(在HTML 4.01中废除)
HTML5 重定义了 <s> 元素,现在是被用来定义那些不正确的文本。
<strike> 定义加删除线文本(html5不推荐使用)
sup :上标文本    sub:下标文本


**注:**语义强调作用的```<strong><em>```比```<b><i>```更容易引起搜索引擎的注意,但是如果只是为了加粗样式,建议在css样式表里面实现  

**div标记** (division-部分)

可定义文档中的分区或节,可以把文档分割为独立的、不同的部分

作用:文档区域,文档布局对象

**span标记**

文本结点:用来组合文档中的行内元素

5. 列表(ul, ol, dl)

HTML中有三种列表,分别是:无序列表(ul),有序列表(ol),自定义列表(dl)

无序列表
<ul>--unordered List
   <li>列表项内容li> 
    … …
ul>

有序列表
<ol>-ordered List
    <li>列表项内容li>
        … …
ol>

自定义列表 
<dl>Definition List
    <dt>名词dt>Definition term
    <dd>解释dd>Definition Description
dl>

6. 图片(img)

<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />

**1. src属性:**规定显示图像的 URL

2. title属性: 在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的;

3. alt属性: 规定图像的替代文本。[ælt] olt

注:所要插入的的图片必须放在站点下

src==source所用图片的来源(路径)

7. 超链接(a)

<a href="" title="" target="_blank"> 链接文本/图片a>

1. href属性:设置目标文件路径

2. title属性:超链接标题

3. target属性:设置超链接的打开方式 ['tɑrɡɪt]

属性值:_blank-新窗口打开 [blæŋk]

​ _self-默认的打开方式(本窗口打开)

​ _top 在顶层WINDOW对象中打开,一般用于多层框架嵌套的情况
​ _parent 在父窗口打开,一般用于框架内的窗口改变父窗口页面 ['peər(ə)nt]

Href== Hypertext Reference的缩写,意思是超文本引用

8. 表单(from)

作用:用来收集用户信息的:

<form action="test.html" method="post" name="myFomr">
        <p><input type="text" name="userName" maxlength="50" placeholder="邮箱账号或手机账号">p> 
        <p><input type="password" name="userPassword"  placeholder="密码">p> 
        <input type="submit" value="登录">
        <input type="reset" value="reset">
form>
  1. **action属性:**规定当提交表单时,向何处发送表单数据。'ækʃ(ə)n]
  2. **method属性:**规定如何发送表单数据(表单数据发送到 action 属性所规定的页面)浏览器使用method属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法:POST 方法和 GET 方法。['meθəd]
1.文本框(input)
<input type="text" name="uername" value="内容" placeholder="提示" maxlength="20"/>
  1. type属性: 规定 input 元素的类型;(password,email,button)。

  2. value属性: 为 input 元素设定值;

  3. **name属性:**规定 input 元素的名称。name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据,只有设置了name属性的表单元素才能在提交表单时传递它们的值。

  4. **placeholder属性:**规定帮助用户填写输入字段的提示

  5. **maxlength属性:**规定输入字段中的字符的最大长度

2. 按钮(button)

button和submit的区别:

submit是提交按钮起到提交信息的作用,button只是一个按钮

9. 表格(table)

作用:显示数据

<table width="600px" height="400px" border="3" cellspacing="0">
    <tr>
       <td rowspan="4">第一个单元格td>
        <td>td>
        <td colspan="2" rowspan="4">td>
        <td rowspan="4">td>
        <td rowspan="4">td>  
    tr>
table>
  1. table: 标签定义HTML表格

  2. tr: 元素定义表格行(table row)

  3. td: 元素定义表格单元(table data数据)

  4. border: “表格的边框”

  5. bordercolor:“表格边框颜色”

  6. cellspacing=0: 单元格与单元格之间的间距

  7. cellpadding: 单元格与内容之间的空隙

    ​ 水平对齐方式:align=“left/center/right”;

    ​ 垂直对齐方式: vertical-align=“top/middle/bottom”;

    ​ 注:对其方式在td,tr上使用

  8. colspan: 所要合并的单元格的列数” 横向合并;

  9. rowspan: 所要合并单元格的行数” 纵向合并;

10. HTML和XHTML的语法区别

 XHTML 要求标签正确嵌套
 XHTML 所有标签必须关闭   /
 XHTML 区分大小写            
 XHTML 属性值要用双引号
 XHTML 用 id 属性代替 name 属性
 XHTML 特殊字符的处理   < >  

二、CSS基础

white-space:pre
		   nowrap //文本不进行换行知道
text-overflow:  //设置单行文本溢出是否显示省略号
	clip 修剪文本

CSS (cascading style sheets)WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页的显示样式。—级联样式表、层叠样式表

**语法:**选择符 { 属性:属性值;属性:属性值 }

1.样式表分类(内部、外部、内嵌)

1. 内部样式(style)
<style type="text/css">选择符 { 属性:属性值;属性:属性值 } style>	
2. 外部样式(link)
 "stylesheet" type="text/css" href="目标文件路径" />
  1. rel: 规定当前文档与被连接文档之间的关系 stylesheet: 样式表

  2. **type: ** 规定被链接文档的类型

  3. href: 规定被链接文档的位置

3.外部样式表的导入-2(@import)

注:@和import之间没有空格 url和小括号之间也没有空格;必须结尾以分号结束

3.外部样式对比

两种导入样式表的方法比较:

  • link 属于 HTML 标签,而 @import 是 CSS 提供的。
  • 页面被加载时,link 会同时被加载,而 @import 引用的 CSS 会等到页面被加载完再加载。
  • @import 只在 IE 5 以上才能识别,而 link 是 HTML 标签,无兼容问题。
  • link 方式的样式的权重高于 @import 权重。

一般推荐使用 link 导入样式表的方法,@import 可以作为补充方法使用。

2. 选择器(选择符)

1. 元素选择器/类型选择器(标签 )
语法:元素名称{属性:属性值;}
说明:
元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span等。
2. id选择器 (#)
语法:#id名{ }{属性:属性值;}
	 <标记 id="名称1   名称2" >标记>
说明:
1) id属性值,在一个html文档中,必须是唯一的,不可重复,不能用关键字(所有的标记和属性都是关键字)
2)一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素对象。
3) 最大的用处:创建网页的外围结构
3. css选择器(.)
语法:.class名{属性:属性值;}
	 <标记 class="名称1   名称2" >标记>
说明:
1)class选择符更适合定义一类样式; 
2) 一个标记可以设置多个class名
3)class名可以重复
4)限定标签类型 
4. 群组选择器(,)
语法:选择器1,选择器2,选择器3{属性:属性值;}

说明:当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组
5. 后代选择器/包含选择器
语法:选择器1 选择器2{属性:属性值;}

说明:
包含选择器选择器1和选择器2用空格隔开,含义就是选择符1中包含的所有选择器2;
6. 子选择器(>)
语法: 选择器1>选择器2{属性:属性值;}

说明:
选择符1和选择符2用>链接,选择符2必须是选择符1的子类
7. 伪类选择器(:hover)
语法 :
       :link{属性:属性值;} //超链接的初始状态;
       :visited{属性:属性值;} //超链接被访问后的状态;   ['vɪzɪtɪd] 
       :hover{属性:属性值;} //鼠标悬停,即鼠标划过超链接时的状态;
       :active{属性:属性值;} //超链接被激活时的状态,即鼠标按下时超链接的状态; ['æktɪv]
       :focus //元素获得焦点的样式   ['fəʊkəs] 
说明:
1)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效; 
2)使用与超链接相关的伪类选择符时,应为a元素定义href属性;
8. 通配符(*)
语法:*{属性:属性值;}

说明:通配选择符的写法是“*”,其含义就是所有元素。
用法:常用来重置样式
全局样式
*{margin:0;padding:0;}
margin:0 auto; 让子元素相对父元素水平居中显示

3. 选择器的权重

内联  id  class 标签
 1    0   0     0
# css中用四位数字表示权重,权重的表达方式如:0,0,0,0
# id 0100
# class选择器  (伪类选择符 :focus,:hover以及:link) 0010 
# 属性选择符的权重为     0010
# 元素a 伪元素 :before、:after  0001
# 后代选择符:1 2 =  1 + 2 
# 子选择器 1 > 2 = 1 + 2
# 群组看选择符类型
# *{}(通配符) 0 
# 继承 0
# 权重相同时,根据书写顺序而定,后书写的会把县书写的覆盖掉,会显示后书写的代码效果

4. CSS特性:(层叠性继承性)

**层叠性:**一个元素可能同时被多个css选择器选中,每个选择器都有一些css规则,这就是层叠。

CSS的处理原则是:

1)如果多个选择器定义的规则不发生冲突,则元素将应用所有选择器定义的样式。

2)如果多个选择器定义的规则发生了冲突,则CSS按选择器的特殊性(权重)让元素应用特殊性(权重)高的选择器定义的样式。

继承:所谓继承,就是父元素的规则也会适用于子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置,也都会变成红色。继承得来的规则没有特殊性。

多数边框类属性,比如Padding(补白),Margin(边界),背景和边框的属性都是不能继承的。(border属性是用来设置元素的边框的,它没有继承性)

块状、内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text-decoration、text-transform.

块状元素可继承:text-indent和text-align。

列表元素可继承: list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承:border-collapse。

css层叠性:
​ 使用不同的选择符作用于同一个对象,每个选择符都有一些css声明/规则
​ 如果规则没有发生冲突,这些样式都可以被执行
​ 如果规则发生了冲突,根据选择符的权重/特殊性而定,执行权重高的选择符设置的样式
​ 权重:
​ 内联:1000
​ id:100
​ class 伪类:10
​ 类型:1
​ 群组:根据具体对象而定
​ 包含:将使用的选择符相加=和
​ 子:子结合符> = 0 其他选择符相加=和
​ 通配父,继承的样式 子结合符:权重为0

css继承性: 子类可以继承父类的css样式
​ 可以利用css继承,节省代码量,提高代码的可读性

5. 颜色(color)

可以用以下方法来规定 CSS 中的颜色:

  • 十六进制色 :十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。举例说,#0000ff 值显示为蓝色,这是因为蓝色成分被设置为最高值(ff),而其他成分被设置为 0。

  • RGB 颜色:RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。举例说,rgb(0,0,255) 值显示为蓝色,这是因为 blue 参数被设置为最高值(255),而其他被设置为 0。

  • RGBA 颜色:颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

    RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

  • HSL 颜色:颜色值是这样规定的:hsl(hue, saturation, lightness)。

    Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。

  • HSLA 颜色 :颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

  • 预定义/跨浏览器颜色名

6. 浮动(float)

margin:0 auto/margin:auto;放置在一个标签上,可以使此标签在父元素中水平居中
float:left/right/none
   A. 给元素添加浮动之后,会脱离正常文档流
   B. 子元素浮动了,父元素在没有设置高度的情况下,会高度塌陷
   C. 给元素添加浮动之后,元素会产生块级框,而不论本身是什么元素类型
块状元素:
         默认:
             width:auto  -  与父元素同宽
             height:auto -  与内容的高度相同
         加浮动之后:
             width:auto  -  与内容同宽
             height:auto -  与内容的高度相同  
         设置具体的宽度和高度,设置的属性为多少,显示的大小就是多少
             width:300px;height:300px    
    行内元素:
         默认:不能设置宽度和高度,设置了显示无效
               所以行内元素的显示大小,根据内容多少而定
         加浮动之后:变成块状元素;    
width:auto; =不设宽度
		  A. 对于块状元素而言,浏览器自动计算,,会与父元素同宽,
		  B.  对于块状元素而言,如果盒子浮动了,宽度与内容同宽
		  C. 如果给盒子设置具体的width:value,设置的多少,显示多宽
2. 浮动对盒子宽度的影响:     
          
          标签的宽度为:width:auto; 
		  A. 对于块状元素而言,浏览器自动计算,,会与父元素同宽,
		  B.  对于块状元素而言,如果盒子浮动了,宽度与内容同宽
		   
          盒子的宽度为:width:value;
          如果给盒子设置具体的width:value,设置的多少,显示多宽           
         3. 浮动对盒子文档流的影响
          添加了浮动的盒子,会脱离正常文档流;
        
         4. 父元素的高度塌陷
         父元素在没有设置具体高度的情况下,子元素全部浮动了,父元素的高度为0;
         
        5. 浮动的图片应用:以往这个属性总应用于图像,使文本围绕在图像周围
        
        6. 浮动元素会生成一个块级框,而不论它本身是何种元素。
   width:height固定宽度时,除了padding 不管里面有多少内容 width height不变 
   解决flaot父元素高度塌陷
   1.overflow:

块状元素,当width的属性值为auto/没写时,浏览器自动计算宽度,宽度是与父元素同宽

​ 宽度:width:auto;

​ 高度:400px

​ 行内元素:不能设置宽度和高度,设置无效

7. background

background-image:url(…/img/mao.gif);
background-repeat:no-repeat;
background-position:100px 100px; 起始点时左上角 [pəˈzɪʃn]

background-position:100% 100% 起始点时中心
background-position:center;
background-position:227px 99px;

背景颜色:background-color
​ 背景图片:background-image
​ 背景重复:background-repeat [rɪ’piːt] 重复
​ 背景定位:background-position [pəˈzɪʃən] 位置
​ 背景状态:background-attachment [ə’tætʃm(ə)nt] e ta xu ment
​ background:color url repeat position attachment; ['kʌlə®]

单位

绝对长度单位、相对长度单位
   绝对:cm mm in 等等
   相对:
        ex - 字符x的高度   1ex=x的高度 
        em - 当前元素/父元素的文本大小  1em=font-size 
        px - 设备上能显示的最小单位 css相对长度单位

8. 文本(font)[fɒnt]

font-size: {      none:[nʌn]  norm:[nɔːm] 
    px:设定固定值 
    %:基于父元素的一个百分比值
}

font-family: {//规定元素的字体系列
    (1)此属性设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,将尝试下一种字体。
    (2) 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体""Times New Roman"。
    (3) 多个字体系列是用一个逗号分隔指明;
}
font-weight:设置显示元素的文本中所用的字体加粗 {  [weɪt]
    1-500=normal ,600-900=bold [bəʊld] 
    bolder 更粗
}
font-style: //设置文本倾斜{
	italic [ɪ'tælɪk] 
	oblique  [ə'bliːk]
}
text-indent{
	%
}

text-align:设置文本水平对齐{  [ə'laɪn] 
    left right center [ˈsentə(r)] justify 
    行内元素和文本是一样的   文本和行内元素都有作用对 块元素水平居中(0 auto)
}
text-decoration: 文本修饰 [dekə'reɪʃ(ə)n]{ // [dekə'reɪʃ(ə)n] 
	underline:文本下一条线 [ʌndə'laɪn] 
	overline: 文本上一条线
	line-through: 穿过文本一条线 [θruː]
}
text-transform:{  //设置文本大小写  [træns'fɔrm] 
	 capitalize: ['kæpɪtəlaɪz] 文本单词开头大写
     uppercase: ['ʌpə'keɪs]  文本定义大小
     lowercase: [ləʊə'keɪs] 文本定义小写
}
letter-spacing: { //定义字符之间的间隔
	+ -  
	对汉字起作用
}
word-spacing: { //定义单词与单词之间的间隔z
	只对单词有作用(字母和汉字无效)
}
顺序: font-style | font-variant(小体大写字母) | font-weight | font-size / line-height | font-family 
font:[italic] [bold] 20px/{100px] '楷体';

9. 行高(line-hight)

文本行的基线间的距离

默认字体16px => lin-hight=21px;
line-lenght:number 此数字会与当前字体尺寸相乘来设置行间距(2=2em,1em=元素文本大小	)
%:基于当前字体尺寸的百分比(100%=当前尺寸)
10px
16px
10px

10px
16px
10px
文本在行高内垂直居中
应用户单行文本 控制文本的垂直居中 应用于多行文本控制多行文本的间距

10. 边框(border)

border-color:设置边框颜色 red green blue;上  左右 下
border-weight: 
bordrer-style: 设置边框类型 dotted(点状) dashed(虚线) solid(实线) double(双线)
border- : 元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
  outline****:(轮廓)**是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用,轮廓线不会占据空间,也不一定是矩形。
  
  outline-width
  
  outline-style
  
  outline-color
  
  outline:简写
  
  border跟outline的区别:
  
  1. border可应用于几乎所有有形的html元素,而outline是针对链接、表单控件和ImageMap等元素设计
  2. border占据空间,outline不占据空间

11. 列表(list)

list-style:none;去掉列表符号
//定义列表符号的位置 [pəˈzɪʃən]
list-style-position:inside(列表项目放置在文本以内,且环绕文本根据标记对齐) outside(默认)
list-style-image: 设置图片作为列表符号
list-type: 设置列表项标记的类型
disc(实心圆)square(实心方块)decimal(数字)
[dɪsk]    [skweə]          ['desɪm(ə)l]

12.盒模型

 占据的宽度:width+左右padding+左右border+左右margin
 占据的高度:height+上下padding+上下border+上下margin
 1.     盒模型的四个组成部分:
   content[kən'tent] padding border margin

padding: 调整内容在盒子中的位置关系
1. 需要添加到父元素上
2. 不允许是负边距值
3. 可以把内容撑大 
4. 行内可以设置padding,但是显示有问题(上下显示有问题,左右没问题)
1). 将图片放在超链接中,在ie的低版本浏览器中,会自动解释出边框;
    解决方法:img{border:0/none}
2). 将图片放在行内元素中,在行内元素没有设置高度的基础上,会将行内元素在图片自身高度的基础上,撑大3~5px
        A. img{display:block}
        B.  div{font-size:0
        c. overflow:hidden;
        d.float:left;}”。如果要实现图文混排,这种方法是很好的选择
5. display:设置元素的显示类型
        block:将元素设置为块状元素 
        图片将盒子撑大3~5px的原因:、
        因为图片是行内元素,跟匿名文本之间的对齐方式是基线对齐,在文本基线的下行距
        会
        
外边距(margin)

% 属性总结
text-indent:参照父元素的宽度计算
padding margin :基于父元素的宽度计算
width height: 父元素的width,height
line-height:参照元素的font-size
background-size: 参照父元素 你   
absolut:left/right/top/bottom
负值属性
text-indent -负值
background-postion: 负值
margin
absolut:left/right/top/bottom
z-index: 0=auto 
简写属性
background:
border:
font:
list-style: type position
list-style: url position
margin:auto - 浏览器计算  --具体valuepx/em/cm/mm  %
padding:不能为auto ,---具体valuepx/em/cm/mm  %
  1. 给子元素设置margin-top时,会影响到父元素一起向下移动;
      A. 给父元素后者子元素添加浮动
      B. 给父元素加边框
      C. overflow:hidden;
   2. 两个盒子之间的margin区域是可以重叠的(没有浮动的情况下);
   3. 两个浮动盒子之间的margin区域是不重叠的;
   4. margin可以设置负值,显示方向和正值完全相反;
   5. 行内元素可以执行margin,但是上下显示  不正确,左右显示正确(padding一样)

overflow

overflow: //主要应用 设置溢出盒子的显示方式
	visible:默认溢出,正常显示  [ˈvɪzəbl]
	hidden:溢出以后,隐藏 ['hɪdn]
	scroll: 显示滚动条 [skrəʊl] 
	auto: 如果溢出显示滚动条,如果不溢出就不显示滚动条
其他应用:
A,给父元素添加overflow:hidden 可以解决高度塌陷
B. 给父元素添加overflow:hidden  解决给子元素设置maring-top 影响父元素一起向上移动
overflow-x
overflow-y
省略
text-overflow: clip //直接裁剪
			ellipsis //显示省略号
			string  新增的,浏览器不支持
width:设置官渡
overflow: hidden 
white-space:nowrap //强制让文本在一行内显示
块级格式化上下文 BFC
	其实归根结底,这里的浮动没有清除,只是因为overflow属性的值是hidden的时候会形成一个BFC,而BFC就是一个隔离的渲染区域,因此浮动造成的高崩塌会导致对外部布局的影响,为了消除这种不益的表现,计算高度的时候浮动元素也计算进去了。

需要保证满足下面至少一条就会触发BFC:

根元素body;
设置了float值不为none的元素;
设置了overflow属性不为visible的元素;
设置了属性position不为relative和static的元素;
设置了display的值为flex、table-cell、table-caption和inline-block中的任何一个的元素。
可以看出来,就是一个比较独立的块,因为是一个独立的环境,在开发时候适度使用会有效降低开发和维护难度。


大致可以归纳为三个方面:独立性、垂直分布规则和水平分布规则。

独立性:BFC是页面上一个隔离的容器,和外面的关系是不会互相影响,对浮动而言也是,不会和浮动元素发生重叠,高也和上面提到的一样不会崩塌;
垂直分布规则:BFC的内部里面的一个个盒子在垂直方向一个接着一个排放,位置由margin决定,两个相邻的盒子margin会发生重叠;
水平分布规则:BFC里面的盒子的左外边缘和包含块的左边相接触,简单的理解就是水平方向不会发生margin重叠。
要实现溢出时产生省略号的效果还需定义:
 
1)、容器宽度:width:value;
2)、强制文本在一行内显示:white-space:nowrap;
3)、溢出内容为隐藏:overflow:hidden;
4)、溢出文本显示省略号:text-overflow:ellipsis; [ɪ'lɪpsɪs] 

元素类型

  1. 块状元素
 1. display: //设置盒子的显示类型
          none:此标签在浏览器中不显示
          block:此标签显示为块状元素-div p ul ol dl dt dd h1 form h1~h6
          inline:此标签显示为行内元素-a span b strong i em img br sup sub
          inline-block:此标签显示为行内块元素 - input; 行内
          list-item:此标签显示为列表项标签 - li
          table:此标签显示为块级表格标签 - table

        元素类型:
         块状级元素:display:block list-item table
         行内级元素:display:inline inline-block inline-table;

2. 块状元素的特征:  
   (1) 可以设置宽度和高度
   (2) 自占一行
   (3) 作为容器使用,作为盒子使用,可以正确解释4盒模型中的属性;
   (4) 给盒子添加浮动之后,盒子在没有设置宽度和高度的情况下,在没有内容的情况下,宽度,高度为0;

行内设置 a img span i em b strong br sub sup del s
3. 行内元素的特征:
   A。不能设置宽度和高度
   B。可以和其他行内元素在一行内显示
   C。行内元素也符合盒模型的特征,也能执行盒模型中的规则,但是margin,padding,border的上下显示不正确,左右显示正常;
   D。盒子的大小有内容而定,如果给行内元素添加浮动之后,会生成块级框,变成块状元素
1.行内元素
2.行内元素1
ver-align练习
置换元素和飞置换元素
小米商城
行内元素垂直方向的对齐方式:默认基线对齐
1.给元素添加float 摆脱基线对齐 基线(小写字母x ,s,a 的下断沿的先)
2.行内元素在开发工具书写时,如果进行换行和空格
	解决:A. 写在一行,不进行换行
		 B. 给所有的行内元素添加float
		 c. 给行内元素的父元素设置 font-size: 0; 当时行内元素有继承 font-size:0; 影响元素内的文本大小为0; 解决:给行内元素再设置font-size

vertical-align
vertical-align  设置元素的垂直的对齐方式
	baseline: 默认 元素放在父元素的基线上(父元素的基线就是文本内容的基线)
	top
	bottom
	middle 垂直居中对齐
	sub: 垂直对齐文本的下标	
	super:
	在没有边距没区别
	%:当前line-hight(开发不推荐) 允许负值 正值:向上移动当前行高的大小
							       负值:向下移动当前行高的大小

置换元素

定位
postion: 
absolute 绝对定位 相当于static 定位以为的第一个父元素定位
body--position:static div没设就是static
hmlt---是绝对定为诶元素最大的参照物-默认
fixed 
行内元素
1. 行内元素在垂直方向的对其方式:默认是基线对其
   基线:参照css核心属性的笔记-line-height
         小写的英文字母x,s,a的下断沿的线

2. 行内元素在开发工具中书写时,如果进行换行或者空格,在浏览器中,两个标签之间有一个空格;

3. 去掉空格:
  A. 写在一行中,不进行换行;
  B. 给所有的行内元素添加浮动;
  C. 给行内元素的父元素设置font-size:0;可以解决这个问题,但是行内元素会继承font-size:0;造成元素内的文本大小为0;
       解决:给行内元素单独再设置文本大小
  D. 都都转为inline-block

4. vertical-align: 设置元素的垂直对齐方式
   注意:用在行内元素上面才有效

5. 图片将盒子撑大3~5px的原因
   因为图片是行内元素,跟空白字节之间的对其方式是基线对其,在文本基线的下面有下行间距,下行间距会将盒子撑大3~5px; 
   方法:img{display:block}
         div{font-size:0;}
         img{vertical-align:只要不是baseline ,推荐使用top,middle,bottom}  

6. 
    静态定位的特点:
    position:static; 静态定位-没有特殊的定位效果,正常在文档流中显示
  
    绝对定位的使用和特点:
        (1) : position:absolute-绝对定位;
        (2) : 根据参照物进行定位(参照物==包含块:有除了static以外的定位设置,并且是定位元素的父元素)
        (3) : left right top bottom 确定元素坐标的位置
        (4) : left right top bottom:属性值可以是正值也可以是负值,属性值可以为%,px
        (5) 我们可以改变包含块的对象,不一定非是html
              只要是父元素,只要设置了其他的定位设置(除static以为),都可以作为定位元素的参照物
        (6) 绝对定位会使元素脱离正常文档流;            

   body: ----默认是position:static;
   html:----是绝对定位元素最大的参照物,具有除静态定位以外的其他定位设置;

    相对定位的使用和特点:
        (1)相对定位不会使元素脱离正常文档流;   

7. 元素在垂直方向上的层叠顺序
    (1) 如果元素没有设置css表现,按正常的书写,后书写的显示在上面
    (2) 如果元素设置定位(除static之外),层叠顺序比没有设置定位的元素高;
    (3) 如果两个盒子都设置了定位,后书写的比较高
    (4) 可以设置z-index属性,来提高元素的层叠顺序;
      z-index: auto/number;
      值越大,层叠顺序越高
      值越小,层叠顺序越低
      z-index属性必须结合position属性使用才有效(属性值除static以外);




重点:       给盒子添加浮动,会脱离文档流
            给行内元素添加浮动,产生块级框,变成块状元素
            给盒子添加绝对定位,会脱离文档流
            给行内元素添加绝对定位,产生块级框,变成块状元素
            
p 标签不能 嵌套div
a 标签不能嵌套 a标签
h1 标题不能嵌套 标题
  1. 盒模型
content(width,height) + border + padding + margin 
  1. overflow使用-设置溢出容器的内容,如何显示
    visible:表示溢出正常显示 [ˈvɪzəbl]
    hidden:表示溢出容器的内容,被裁剪掉
    scroll:让容器显示滚动条,查看其余的内容 [skrəʊl]
    auto:如果溢出显示滚动条,不溢出就不显示

    省略号的设置:
    text-overflow:clip - 直接裁剪
    ellipsis- 显示省略号
    string - 新增的,浏览器不支持
    width:设置宽度 overflow:hidden-溢出隐藏 white-space:nowrap 强制让文本在一行内显示;

  2. 元素类型
    类型分类: 块状元素 行内(内联)元素
    块状元素:对应的标签:li ul ol dt dd form table h1~h6 div p
    ​ 特征:(1) 能设置宽度和高度(2)自占一行 (3)作为容器使用,能正常解释盒模型的属性 (4)盒子在浏览器中以块的形式显示,宽度默认是auto与父元素同宽,高度根据内容而定,没有内容宽度为0
    行内元素:对应标签: a img i em b strong span br sup sub del s input
    ​ 特征:(1)不能设置宽度和高度 (2)在一行内显示(3)也可以遵循盒模型的规则,但是个别显示不正确,border,padding,margin上下显示不正确,左右显示正常 (4)盒子的大小有内容而定,如果添加了浮动,盒子变成块状元素
    display:设置盒子的显示类型
    ​ none:让盒子消失不可见
    ​ block:快装
    ​ inline:行内
    ​ inline-block:行内块元素
    ​ list-item:显示列表项 -li
    ​ table:显示为块状表格

  3. 定位:
    position:
    absolute:绝对定位
    ​ (1) 会使元素脱离正常文档流
    ​ (2) 根据包含块进行定位
    ​ 包含块:离绝对定位元素最近的并且有定位设置的父元素,定位设置不能是默认值-static
    ​ (3) 根据left right top bottom
    相对定位:relative ['relətɪv]
    ​ (1) 不会使元素脱离正常文档流
    ​ (2) 根据自身在正常文档流中的位置进行坐标的偏移
    ​ (3) 根据left right top bottom ['bɒtəm]
    ​ fixed:固定定位 [fɪkst]
    ​ (1) 会使元素脱离正常文档流
    ​ (2) 根据窗口进行定位
    ​ (3) 根据left right top bottom
    ​ stiky:粘性定位
    ​ (1)在窗口范围内,定位效果像相对定位,当移动浏览器滚动条,盒子距离窗口的位置=设置的像素数时,盒子位置不发生改变,像固定定位
    ​ static:默认的定位效果,没有任务特殊的定位,在正常文档流中显示
    z-index:设置元素的堆叠顺序;
    ​ auto:跟父元素的堆叠顺序相同
    ​ number:数字越大,顺序越高,数字越小,顺序越低
    注意:必须结合position:absolute,relative,fixed,不能是static
    包含块的概念:为绝对定位的元素提供坐标偏移的参照物
    设置元素为包含块:给元素添加position:absolute,relative ,fixed 不能是static(推荐使用相对定位,因为不会使用元素脱离正常文档流)

    锚点:(1)a href = “#锚点名”
    ​ 在同一页面的不同位置进行跳转
    ​ (2) a href =“文件路径#锚点名”
    ​ 跳转到另外一个页面的锚点元素所在的位置
    overflow-x,y:设置某个方向上内容溢出如何显示,属性值跟overflow相同

  4. 宽高自适应:
    概念,优势
    伪元素选择符:5个 after['ɑːftə]
    元素的高度如何自适应窗口的高度
    清除浮动的三种方式:3种 overflow:hidden
    ​ [ə(ʊ)'pæsɪtɪ]
    隐藏元素:display:none opacity:0-1 visibility:visible hidden
    一组属性;min/max-width/height ming max

  5. 属性选择符:权重是10;

  6. 图片整合的概念(精灵图 图片精灵)

  7. 图片整合的优势(1)减少请求次数,提高加载速度 (2)减小图片的体积

  8. 兼容

    五大浏览器采用的都是单内核,而随着浏览器的发展现在也出现了双内核。360浏览器、QQ浏览器都是采用双内核。

    1、IE浏览器内核:Trident内核,也是俗称的IE内核; 
    2、Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核; 
    3、Firefox浏览器内核:Gecko内核,俗称Firefox内核; 
    4、Safari浏览器内核:Webkit内核; 
    5、Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核; 
    6、360浏览器、猎豹浏览器内核:IE+Chrome双内核; 
    7、搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式); 
    8、百度浏览器、世界之窗内核:IE内核; 
    9、2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;

常见的兼容问题:
​ 双倍边界
​ 默认高度
​ 图片间隙
​ cursor属性:设置鼠标指针的形状;
​ png:ie支持png8位图片的背景透明,不支持其他的位数;

H5

特点:
添加 语意标签 canvas画布 多媒体交互标签 (video src ) mack(高亮显示文字)

  • 骨架更简单

header nav section aside(侧边栏) footer figcaption

email
url 检测地址
number 专门用来输入数字
max min
step:默认1
range:
max min step
search: 比文本框多了x
color: 调色板
tel: 和文本框没区别 兼容性很大

date:
month 年月
week 年周
time 小时分钟
datetime 没显示 世界统一时
datetime-local 北京时间
output:输出框

属性
required:内容空白不能提交
placeholder:
pattern:正则表达式
autofocus: 页面刚加载自动获得焦点
list:(datalistId)与datalist标签>option 配合使用 类似select
autocomplete:自动完成功能-name历史记录
min max step
novalidate: 规定在提交表单,取消验证内容
multiple: 输入可以输入多个内容,用 , 分开
form(fomrId值):控件链接idfrom


浏览器模式

标准模式:ie高版本浏览器 chrome safari 

怪异模式:ie6 ie7

什么情况下会在怪异模式下解析:

​	- 文档声明不正确,或者不存在

​		-h5中只有一种文档声明 

​	html4中文不能中

  1. 过渡版本

     标签的使用:不能使用框架标签

		2. 严格版本

      不能使用弃用标签,不能使用表现性标签,不能使用框架标签

盒模型在不同浏览器中的解释



#### css3

渐进增强

优雅降级

![](HTML笔记/css3.png)

基本选选择符

层级选择符



属性选择符:

​	input[type="e"]//e开头

​	input[type="$e"]//以e结尾的input标签

​	input[ytpe="*=e"] //包含e的input标签



伪元素选择器

::first-letter

::firset-line

::before

::after
::selection 



伪类选择器

:target  //目标伪类选择器:某个目标元素被触发的时候

​	锚点

e:not(f) 否定伪类选择器

结构伪类选择器

e:mpty  // :当元素内容为空时

结构

:root  // 给根元素(html)添加有

:nth-child(n)  匹配父元素中的第n个子元素

​	n:表达式:2n+1=odd, 2n=even

​	数字 表达式 关键字  n



:nth-last(n) 

:nth-of-type(n)://先看类型在看个数



:only-child :看个数再看来下

:only-of-type //来类型再看数字



:first-child 

:last-child 



:first-of-type

:last-of-type



UI元素状态伪类选择器

:hover

:active

:focus

E:disabled //设置该元素处于不可用状态的样式

E:enabled //设置元素处于可用状态的样式

E:read-only //元素处于只读状态

E:read-write //

E:checked  //表单中radio or checkbox 处于选中状态

E:default  //页面打开时 默认处于选中状态 (一直执行)

E:selection //指定当元素处于选中状态时的样式

E:indeterminate //当页面打开时,如果一组单选框都没有选中才执行,如果用户选中了一个,则样式取消

valid

invalid





###### 内核前缀

Trident内核    -ms -ms-border-radius

Gecko内核: -moz (火狐)

Presto内核	 -o

Webkit内核:	-webkit



###### 文本属性   

中文默认自动换行,字母

word-break: 

​	norm:默认

​	break-all:允许单词内换行

​	keep-all: - 字符才换行

word-wrap: 允许长单词 or url 内部进行换行

text-shadow: 向文本添加应用

​               3px 3px  模糊 color,-3px -5px 模糊 color

###### 边框

border-radius: 20px 30px;  //对角线角   圆角边框

border-image: //边框图片 



border-top-left-radius:40px 90px 水平半径 垂直半径

border-image-source    

&&  border-image-slice: //裁剪

border-image-repeat: 图片平铺

border-image-width: 图片边框宽度

border-image-outset

brder-colors  //设置边框颜色



box-shadow:  //设置盒子的阴影

​	h-shadow: 0 

​	v-shadow :0

​	blur: 模糊距离

​	[]: 阴影大小 默认和盒子一样大

​	color

​	inset: 内阴影



指定元素的的宽度与高度的计算方法

box-sizing: content-box //width =盒子内容区域大小  =标准模式

​		    border-box // 边框盒子大小 (content+padding+border) =怪异模式

![](HTML笔记/微信图片_20190405175634.png)

##### 背景

background 属性提升

background-size: width height 

​	%:盒子宽度的%  盒子的%

​	number:   会改变比例

​	cover:  等比例改变宽高,能覆盖 可能超出盒子

​	contain: 等比例改变宽高,按最小的放大

默认情况下:

如果盒子有内边距,背景图从内边距的padding开始显示

如果没有padding,背景图从内容盒子的

background-origin  // 规定图片的显示区域

​	border-box //背景图从边框盒子开始显示

​	padding-box //默认效果

​	conente-box //从内容位置开始显示 没有padding

background-clip //背景图片的裁剪区域

​	border-box 背景裁剪到边框盒

​	padding-box  //

​	content-box  背景图裁剪到内容区可见

​	text



-webkit-text-fill-color: //文本填充颜色

​	

颜色

rgba()

hsl(色调,饱和度,亮度) {0,360} {0,100%} {0,100%}

hsal

transparent

##### 字体

.ttf  eot woff otf svg 

定义字体 

font-face规则

字体定义规则
@font-face{
​ 定义字体名称
​ font-family: “myfont”
​ 字体路径
​ src:url(…/font)
}
font-family: “myfont”


作业 名鞋侧边栏

​	淘宝工具栏



##### css3弹性盒

新的布局模式-flexible box布局,即收缩布局盒模型(弹性盒布局)

![](HTML笔记/css3弹性.jpg)

​	![](HTML笔记/css3啊.jpg)

​	3个版本 旧版本 混合版本 新版本

容器上:

display   //设置元素为弹性盒

​	flex/line-flex  //块状弹性盒

​        使内部元素获得弹性布局效果 ,原本垂直

  块级弹性盒:

​      父元素如果是弹性盒子,子元素作为弹性项目,在没有设置width 的情况下,width 与内容铜矿,

​     子元素作为弹性项目,在主轴方向方向从主轴起点上一次排序

  子元素在没有设置height的情况下,height会拉伸与父元素同高 ,如果设置了多高就多高

行内弹性盒:

​	



flex-direction  //规定灵活项目的方向

​	row:默认值,灵活的项目水平显示

​	row-reverse: 与fow相同,但是以相反的顺序排列

​	column: 灵活项目将垂直显示

​        column-reverse: 主轴方向垂直,但是以相反的顺序排列

flex-wrap  // 用于设置

​	nowrap: 默认 不换行不换列 改变width height

​	wrap :  规定灵活项目必要时换行,换列

​	wrap-reverse 



简写:

flex-flow:flex-flow: column-reverse wrap-reverse 



justify-content  //设置子元素在主轴(水平方向的/垂直方向)上的对齐方式

​	flex-start //项目位于主轴的开头、

​	flex-end   //项目位于主轴的结尾

​	enter  //位于主轴的中心

​	space-between // 如果父元素的width大于子元素,留下的空白平均分给两个子元素之间

​	space-around: //平均分别分给每个元素的两边

align-items //设置子元素在侧轴方向的对齐方式
​	stretch : 拉伸到适应容器 父元素没有height 

​	center: 元素位于容器中心

​	flex-start : 侧轴的起点开始

​	flex-end: 

​	baseline 



align-content // 设置多行子元素在侧轴上的对齐方式(多行时,属性才生效)

​	 stretch:   //元素拉伸以适应容器

​	center //元素位于容器的中心

​	 flex-start: //侧轴起点位置

​	flex-end //侧轴重点

​	space-between: //

​	space-around:







##### 视口(viewport)

视口:初始视口980  考虑移动端访问pc端 

css3媒体查询

@media meatype and|not|only ((条件表达式){

	screen
	
}
css3添加媒体属性
only: 限定某种设备执行媒体查询 
ccs2:媒体只能查询设备,没有条件

1555054616210

1555054647288

移动端适配 改变html-font-size
vw
js
@media 不精细,避免

响应式布局

常见布局方案

固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;

**可切换的固定布局:**同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局;

**弹性布局:**以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;

混合布局:同弹性布局类似,可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。

布局响应:对页面进行响应式的设计实现,需要对相同内容进行不同宽度的布局设计,有两种方式:pc优先(从pc端开始向下设计);
​ 移动优先(从移动端向上设计);

无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点)

你可能感兴趣的:(HTMl)