6月实训-h5

• 目录

  • 前言

    一、html的常用标签

    二、css

    三、文本

    四、css三大特性

    五、盒子模型

    六、标签显示模式转换

 

---

前言

华清远见-实训第一天

---

一、html的常用标签

注释快捷键:ctrl+?

标签:<标签名 属性名="属性值">页面中要显示的内容</标签名>

绝对路径:

相对路径:   ./根目录

                   /根目录

                   ../回上层目录

链接标签a

<a href="点击链接后要显示的页面" target="在不同的窗口打开页面"></a>

单/多选框

       要实现单/多选框的功能要求name一致,也就是在同一个组中

二、css

为什么style要写在head中?

    因为html是从上往下开始解析的

    读完css再读body中的,就可以知道标签要的样式

    不用再次加载,提升用户体验

   所以要把设置的样式写在前面

---

选择器{属性名:属性值;属性名:属性值;属性名:属性值;} 

        css三大引入方式:

            内嵌

            外部

            行内

        标签选择器:直接拿标签名作为选择器的名称

            id选择器:#id名  

                两个标签不可以重复使用一个id,因为是官方规定的

            class类选择器:.类名  

                一个标签可以有多个类名,并且类名可以重复

            通配符选择器:  *

            后代选择器:由两个或者多个基本选择器构成,每个之间以空格隔开

三、文本

border:边框粗细 边框样式 边框颜色

四、css三大特性

div.box:可以直接生成class名为box的div标签

div和a标签可以嵌套其他任何标签,但是在a标签中不能嵌套其他标签

五、盒子模型

普通盒模型:div的宽高是内容的宽高 盒子的宽高是加了内边距和边框线的

padding-top: 50px;

padding-left: 50px;

上 右 下 左

padding: 10px 20px 30px 40px;

没有左  左会去对边找

padding: 10px 20px 30px;

指的是 上下  左右

---

 高度一般不设置百分比

 宽高设置百分比是相对于父元素的百分比

但是body默认的高度是0,默认的宽度是浏览器的宽度 

---

IE盒模型:

转换命令   box-sizing:border-box;

---

盒子模型由四个部分组成: 内容 边框 内边距

标准盒模型: 实际宽度 = 我们设置的宽度+左右的内边距+左右的边框

IE盒模型: 实际宽度 = 我们设置的宽度

六、标签显示模式转换

转块级标签 */

display：block */

转换为行内块 */

display: inline-block;

转换为行内标签

display: inline;

---

        块级标签：独占一行并且可以设置宽高的标签 div

        行内标签：不独占一行不可以设置宽高的标签 a span

        行内块级标签：不独占一行可以设置宽高 img input

        高度：

            没有内容的情况下：所有标签的默认高度都为0

            有内容时的高度：高度为内容撑出来的高度

        宽度：

            没有内容：块级标签的宽度为父标签的宽度，行内标签和行内块级标签都为0

            有内容：块级标签的宽度为父标签的宽度，行内标签和行内块级标签的宽度为内容撑出来的宽度