HTML+CSS基础知识01

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

常用的浏览器有哪些?

1: Chrome Webkit —> Blink

2: Firefox Gecko 开源

3: IE Trident

4: Safari Webkit

5: Opera Presto

文本标签

<b>加粗</b>  bold 粗体 
<strong>语义化加粗</strong>

<i>斜体</i>  Italic 斜体
<em>语义化斜体</em>

<u>下划线</u>
<ins>下划线</ins>

<s>删除</s>
<del>删除</del>

<br>  break 换行

<hr width="" align="" color="">
默认属性:
width: 宽度 
color: 颜色 
align: 水平对齐方式  align:left / right / center

常见字符:
>  &gt;  great than 
<  &lt;  less than
人民币  &yen;
版权符号  &copy;
空格   &nbsp;

常用标签

 标题标签
<h1></h1> ~ <h6></h6>  h3以下的尽量少用  在一个界面里有且只能有一个h1 

 段落标签
<p></p>  paragraph  段落 大部分时候是一段文字 

 布局标签
<div></div>  division 区域 大盒子 划分区域的作用
<span></span>  小盒子 装一些小文字和小图标

 插入图片
<img src="图片地址" alt=""  title="" >
 src: 指的是图片的路径  地址
 alt: 图片加载失败时的文字提示
 title: 图片的标题  鼠标悬停时 显示图片的标题
 width: 宽度  一般来说会只设置宽度  让它自动缩放
 height: 高度 
 border: 边框border="1px" 边宽为1px

图片路径:

绝对路径:

• 网上路径
• D:/pic.jpg 不建议这样插入图片

相对路径:

从当前html文档出发 去找那个图片文件夹 要跳过几个文件夹

同级目录: ./

不同级目录: …/ 是跳出跳出一个文件夹 …/…/是跳出两个文件夹 以此类推

超链接标签

1、链接使用

<a href="#">首页</a>
href :  链接地址
target: 控制链接的打开方式 
_self  在本页打开  默认
_blank 在新页面打开
<base target="_blank">  一次性设置超链接的打开方式为新页打开
必须放在head标签里  

2、锚点功能 点击锚点链接跳转到相同界面的不同部分

抛锚 就是在目标跳转点的元素身上写一个属性 id =" id名" id名不要以汉字、数字开头

拽锚绳 设置a链接

<a href="界面路径#id名"></a>

列表

无序列表
<ul>
   <li></li>
</ul>

 有序列表
<ol>
   <li></li>
</ol>

 自定义列表
<dl>
   <dt></dt>
   <dd></dd>
</dl>

属性 type  项目符号的类型 
    disc 小黑点  
    circle 空心圆
    square 实心方块

表格

<table>
        <!-- 表格头部  thead-->
        <thead>
            <!-- tr行 > th字段 -->
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>邮箱</th>
                <th>薪资</th>
            </tr>
        </thead>
        <!-- 表格身体部分  tbody -->
        <tbody>
            <!-- tr >td 列 单元格  -->
            <tr>
                <td>2妮</td>
                <td>78</td>
                <td>女</td>
                <td>无</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>3妮</td>
                <td>78</td>
                <td>女</td>
                <td>无</td>
                <td>8000</td>
            </tr>
           

默认属性:

• border: 边框 border=“1” 边宽 默认是黑色
• cellpadding: 10px ; 单元格内容与边框的距离
• cellspacing:10px; 单元格与单元格的距离
• cellpadding=“0px” cellspacing=“0px” 双线合并成单线 —> 粗的 因为是两条合并 —> 细线边框css 一个属性border-collapse: collapse;
• 宽度属性 width
• 高度属性 height
• backgroundcolor : 背景色
• align: 水平对齐
• background: 背景图片 background=“地址”

CSS属性

细线边框属性:border-collapse: collapse;

文本对齐 text-align: left 居左 /right右对齐 /center居中

合并单元格

跨行合并

1:rowspan =" 合并的行数" 从上到下合并 最初始的那一行身上

2:删除被合并的那几行 删除的行数= 合并的行数-1

跨列合并 column 列

colspan =“合并的列数” 从左到右合并 属性写到最左边的那一列身上

2: 删除的列数= 合并的列数-1

默认属性设置宽高，合并过后会丢失样式 ,要新添加样式

表单

功能:用于收集用户数据

 <form action="">
        <!-- 表单控件  input type="类型" 
        type: 
           text: 文本框
           password 密码框  文字隐藏 变成小圆圈
           radio   单选框 
           checkbox  多选框
           file 文件上传域
           button   普通按钮
           submit   提交按钮  作为表单提交的按钮 form 必须包含一个提交按钮
           reset    重置按钮
           image    图片按钮
       
        textarea 文本域
        
           name: 作用:指明当前用户输入的是什么数据
        -->
        姓名: <input type="text"  name="username"><br>
        密码: <input type="password" name="userpasswd"><br>
        <!-- 要想实现单选框成为一道单选题 必须保证这两个表单元素身上的name属性值相同 -->
        性别: 男: <input type="radio"  name="sex"  value="1" > 
              女: <input type="radio"  name="sex" value="0"><br>

        爱好:   <br>
        游泳  <input type="checkbox"  name="hobby"  value="swimming">
        唱歌   <input type="checkbox" name="hobby" value="sing">
        跑步  <input type="checkbox" name="hobby" value="running">
        阅读 <input type="checkbox" name="hobby" value="reading"><br>

        <!-- 下拉列表  select > option 选项  -->
        工作地:
        <select name="city" id="">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">深圳</option>
        </select><br>
        
        上传文件:
        <input type="file" name="photo"><br>
        
        评价自己:
        <textarea name="desc" id="" cols=""  rows=" " style="width:316px;height:273px" ></textarea><br>
        <!-- <input type="button"  value="普通按钮"><br> -->
        <!-- <input type="submit">  -->
        <!-- <input type="reset"> --> 

        <!-- 弥补默认提交按钮样式上的缺陷   css不是万能的  -->
        <!-- <input type="image" src="./image/图片提交按钮.png"> -->

    </form>

css引入

1:行内引入

<div style="属性名1：属性值;属性名2:属性值;"></div>  

缺点：

1：结构不清晰 后期代码维护困难

2：繁杂 体积大

3：在web标准中，结构html、样式css、行为js相分离，而行内样式样式和结构没有相分离

用处: 有时候js获取不到文本内部以及外部样式 ,只能获取行内样式 写元素计算属性

用处:用行内样式去覆盖文本内或文本外样式（建议一个或两个单独样式可以写在行内）

2:文本内部引入

<head>
    <style>
         ...
    </style>
</head>

不足: 结构与样式分离不彻底

用处： 属于自己结构里的样式，作用范围只在当前结构文件内 单独私自修改自己的文件 覆盖公共样式

3:文本外部引入

（彻底分离，后期代码好维护）

1:新建一个对应的样式文件.css
2:通过link标签在head头部引入这个样式文件
<link rel="stylesheet" href="01-外部样式.css">
rel: 说明当前链接资源的类型 stylesheet 样式表
href: 路径 地址 相对和绝对  同级./  跳出一个 ../  跳出两个 ../../

三种引入方式的优先级别

优先级： 行内样式>文本内部样式>外部样式

* 全局选择器  选择所有标签 包含body在内
* {
   属性名:属性值;
   ......
}

标签选择器（将结构里的某一类所有标签都挑选中）

标签名 {
   属性名:属性值;
   ......
}
span {
    color:red ; //选中结构里所有span标签 加上颜色为红色
}

/* 类选择器(多个)   标签起个类名 class="a"  其次通过.类名去使用*/
 .a {
     background-color: yellow
}

/* id选择器  唯一性(身份证号)   起一个id名字  #id名调用 */

#p1 {
    font-size: 30px;
}

*全局选择器	标签选择器	类选择器	id选择器
1	10	100	1000

优先级相同时 代码越靠后的越会覆盖之前的样式

进阶

基础选择器组合起来就形成了几种进阶选择器

1：群组选择器 选择器1 , 选择器2，选择器3

div01,div02,div03 {

}

2：交集选择器 选择器1选择器2 { }

EF {  }  匹配的既是E类型又是F类型
div.a {
    
}

<div class="a"><div>  选中
<div class="b"></div>

3：子代 选择器1>选择器2 { }

div > ul {

}

4：后代选择器 父子关系(不仅仅选择儿子 是儿子+孙子 只要满足条件即可) 父元素选择器 子元素选择器 { }

div  ul  li {
    
}

5：兄弟关系

相邻选择器 ( 毗邻选择器)

E + F {
    匹配的是E元素紧紧相邻的那个F元素
}

兄弟选择器

E ~ F {
    匹配的是E元素的所有名字为F的兄弟元素
}

6：伪类链接选择器(用于a链接)

(1)未被访问时  :link
a:link {
    color:red;
}
(2)鼠标访问后 :visited
div a:visited {
   color:blue;
}
(3)鼠标移入时  :hover  
div a:hover {
   color:green;
}
(4)鼠标点击激活  :active 
div a:active {
   color:yellow;
}

颜色表示

1：red,green,blue…

2：rgb表示法 color:rgb(0-255 ,0-255 ,0-255)；color:rgba(0-255 ,0-255 ,0-255, 0~1)；透明度

3：#6位16进制去表示颜色

文本属性

1: 文本修饰属性

text-decoration: underline /overline /line-through / none;

a {
    text-decoration:none;取消a链接的下划线
}

字体的属性

字体大小 font-size: 16px ;

字体形态 font-style: italic 倾斜/normal 正常

字体粗细 font-weight:100-900 (100 400正常 600粗 900最粗)

字体家族font-family: ‘楷体’，‘宋体’，‘微软雅黑’

行高 line-height:盒子高度

font: font-style font-weight font-size font-family;

(1)字体的形态的属性  font-style: Italic 斜体  / normal 正常
em,i {
    font-style:normal ; 取消斜体样式 
}

(2)字体的粗细 font-weight: lighter 细 / normal 正常体 / bold 粗 / bolder 更粗
                          100-900 整数值 100,200,300,400
                        100最细 400正常   600 bold  bolder 800  900

(3)字体大小  font-size/ line-height 行高  
font-size: 16px; 20px
line-height: 21px; 间距2.5px 
默认设置  14px/1.5  行高的是字体大小的1.5倍  14*1.5  

(4)字体家族 ,字体类型  
font-family: '微软雅黑' ,'楷体','Gill Sans', 'Gill Sans MT',Arial;
      注意点: 如果字体名字英文但是中间包含空格必须加""或''
             如果是中文字体则必须加""或'' 
             每一个字体家族以,隔开,越靠前的越优先执行

大小表示法

px 100px

em 相对于父元素的字体大小

rem 相对于html标签的字体大小

字体缩进属性

text-indent: 20px/2em/2rem;
em:相对于父元素字体大小的参考单位
rem:相对于html根标签的参考单位

text-indent:-999px;  隐藏文本的另外做法

css三大特性

层叠性

优先级

继承性 ： text- ,line-,color,font- 大部分具有继承性 （父元素拥有遗传给孩子）

元素的分类以及展示属性(大致三大类)

块级元素：div,p,hi,ul,li,ol,li ,dl dd,form

1: 默认宽度100% 取决于内容的高度

2: 我们可以设置宽高 ,独成一行 霸道

3: 内外边距设置起作用

行内元素：span，a，strong ，b，em，i

1: 宽高完全取决于内容 人为设置不起作用，左右内外边距设置起作用

2: 并排 超出父元素宽度时自动折行

3: 具有文本特性

行内块元素: img ,input，td

1: 宽高设置起作用

2: 并排放置

3: 文本特性

布局的第一大块 核心 -->盒模型

盒模型的宽 = width+padding-left+padding-right +border-left+border-right + margin-left+margin-right

盒模型的高度 = height+padding-top +padding-bottom +border-border-top+bottom+margin-top+margin-bottom

边框

border:
(1)边宽 border-width: 1px 2em 3rem 
(2)边型 border-style: solid 实线 / dashed虚线 /dotted小圆点 / double双实线
(3)边色 border-color: red #345678 rgb(0-255,0-255,0-255)

边框增加后盒模型宽度要增大,如果要保证盒模型宽度不变,只能内减width

 .box {
        width: 0px;
        height: 0px;
        border-width: 100px 100px 100px 100px;
        border-style: solid;
        /* background: #000; */
        /* transparent 取底色  */
        border-color: transparent transparent palegreen transparent;
    }

内边距 padding

调整内容与边框的距离===> 内边距可以撑大盒子 —>内减width - 新增的内边距部分

外边距margin

1: 设置盒子与盒子之间的距离

2: 调整的自己位置 margin-left ,margin-top 可以为负值 水平居中: margin:0 auto;

现象: 子元素设置上外边距父盒子一起向下移动???

正常排版下 ,父盒子和子元素在垂直方向上的外间距会互相干扰 ,一起移动,====>

外边距塌陷现象只发生在垂直方向

1: 父子嵌套时

现象:当子元素设置上外边距时,父盒子会和子元素一并向下移动

解决方案:

1: 给父元素设置1px上外边框或者1px上内边距(分割公共区域)

2: 既然默认渲染导致外边距塌陷 就要使用浏览器的一个规则去改变默认渲染.

规则:BFC (块级格式化上下文) 私人领域

BFC规则不是浏览器的默认规则,所以我们得触发BFC规则

==overflow:hidden------>可以触发BFC规则

2：兄弟元素margin合并问题

当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。

兄弟元素margin合并问题解决方法

使兄弟元素不在同一个BFC区域下，具体做法如：将兄弟元素分别触发BFC或将兄弟元素包在不同的div下，这些不同的div再分别触发BFC。

背景属性

background: 背景的颜色  背景图片路径  背景是否平铺  背景的位置   背景是否附着;
background-color:rgb ,#123456,red
background-image: url(./image/beijing.png)
background-repeat: no-repeat/repeat默认/repeat-x/repeat-y;
background-position: xpx ypx      70%   60%  px/% ;
backgeound-position: 10%  20%  10%是父元素宽度--图片的宽度的10%

background-attachment: fixed固定 不动/scroll卷曲  随着滚动条动

scroll : 位置参考点是父元素左上角
fixed : 位置参考点变成body左上角

定位

1:定位类型:

静态定位 static 标准流下的默认值 一动不动

相对定位 relative

绝对定位 absolute

固定定位 fixed

2:定位方位值:

left:当前定位元素距离父元素左侧边界的值

top:当前定位元素距离父元素上侧边界的值

bottom:当前定位元素距离父元素下侧边界的值

right: 当前定位元素距离父元素右侧边界的值

绝对定位的元素如果父级元素没有定位属性 那它是以body左上角作为参考定位

如果父元素有定位属性(相对,绝对,固定)就会以父级元素左上角作为参考定位,所以如果你想要父元素管控子元素,你就必须给父元素身上添加相对定位属性 子绝父相

父级: 绝对定位元素会以离自己最近的拥有定位属性的父级元素左上角作为参考

定位类型	是否脱标	参考位置值	用处	坐标位置值
static	否(默认值)	无	无	无
relative	否(保留原来位置)	自身左上角	微调元素(外边距),子绝父相	left,right,bottom,top
absolute	是	以距离自己最近的拥有定位属性的父级元素左上角定位,直到找到body	anywhere	left,right,bottom,top
fixed	是	body左上角	滚动条动它不动	left,right,bottom,top

z-index: n n为正负整数 n为负数的时候会被压到标准流盒子下面

盒子居中:

盒子水平居中: margin:0 auto;

定位实现盒子水平居中以及垂直居中:

.box {
        position: absolute;
        /* left:50% 向右走父盒子宽度的一半 */
        left: 50%;
        top:50%;
        margin-top:-150px;
        margin-left: -200px;
        width: 400px;
        height: 300px;
        background-color: red;
 }

圆角边框属性

border-radius: 边框的弧度 px / % /em/rem

 <style>
    .box {
        width: 200px;
        height: 200px;background-color: red;
        /* border-radius: 20px; */
        /* 10px 左上和右下  30px 右上 左下 */
        /* border-radius: 10px 30px; */
        /* 30px 右上和左下 10px 左上  50px 右下 */
        /* border-radius: 10px 30px 50px; */
        /* 顺时针 */
        border-radius: 10px 20px 30px 40px;
    }
    
 </style>