美文网首页
Html/CSS02(基本标签,Css选择器,盒子模型)

Html/CSS02(基本标签,Css选择器,盒子模型)

作者: 鱼翅大魔王 | 来源:发表于2018-07-10 16:50 被阅读0次

今天是2018年7月10日

1.标签

1.1<h1>-<h6>标签

使用<h1>~<h5>标签设置标题,按升序标题从大到小。

1.2<p>

<p>是段落标签

1.3<img>

img标签用于插入图片,它有两个属性作用如下
//src:将要插入的图片路径
//alt:当图片无法显示时,替代显示的文本内容
<img src="xxx" alt="xxx">

1.4<input>

通过设置input标签的type属性可以用input标签生产文本框,按钮,提交/重置等按钮。
input标签的type属性

1.5<button>

button标签用于生成按钮,等效于
<input type="button">

1.6<a>

a标签用于生成超链接,如下
<a href="url....">value</a>

1.7<div>

div标签可以把HTML中的元素分成块级别的元素

1.8<ul>

ul-li用于生成无序列表,修改CSS样式可以生成有序列表。

2.选择器

2.1元素选择器

元素选择器以页面元素(标签)为单位进行CSS样式的设置,其弊端在于一旦对某种页面元素进行了设置,所有的相同页面元素样式都会改变,因此要慎用。
<style>
   div{
          ...
        }
</style>

<body>
     <div>...</div>
</body>

2.2类名选择器

类名选择器是依据元素的Class属性来对元素进行Css样式设置的,一个元素可以使用多个Class样式。
<style>
      .class1{
          ...
}
      .class2{
          ...
}
</style>

<body>
      <div class="class1 class2">//可以使用多个类样式
            ...
      </div>
</body>

2.3ID选择器

ID选择器跟类选择器类似,其依据是元素的ID属性,但因为元素的ID属性都是唯一的,因此ID样式也不能重复使用,故慎用
<style>
   #xxx{
          ...
        }
</style>

<body>
     <div id="xxx">...</div>
</body>

2.4伪类选择器

伪类选择器用来对某些元素添加特殊的效果,语法相对灵活。
<style>
      a:hover{
          ...
      }
</style>

<body>
      <a></a>
</body>

3.盒子模型

盒子模型可以明确网页中元素的定并方便开发者进行排版
盒子模型图示
常用的属性如下,通过他们我们可以方便的进行网页的布局。
  • margin

  • border

  • padding

利用网页F12调试工具调试布局

相关文章

  • day01

    A今日所学 一、常用HTML标签 CSS常用选择器 CSS常用样式 盒子模型 B今日已掌握 一、常用HTML标签 ...

  • Html/CSS02(基本标签,Css选择器,盒子模型)

    今天是2018年7月10日 1.标签 1.1

    -

    标签 使用 ~ 标签设置标题,按升序标题从大到小。 ...

  • CSS

    CSS选择器 标签选择器、类选择器、ID选择器 CSS 盒子模型(Box Model) 所有HTML元素可以看作盒...

  • 基础知识--css

    基础知识--css 目录 选择器 在html引入css的方式 css盒子模型 选择器Selectors 基本选择器...

  • 知识点一

    1、了解html标签 2、常用的html标签 3、常用的css样式 4、css常用选择器 5、盒子模型 6.3ma...

  • day02

    HTML--CSS 1常用html标签 2css标签 3css常用选择器 4盒子模型 5水平居中 6样式重置

  • day1

    A今天学习内容 1.html常用标签 2.常用的css样式 3.CSS常用选择器 4.盒子模型盒子模型.jpg 5...

  • CSS层叠样式表--选择器

    CSS的作用:用来设置网页结构样式。通过css给html标签设置属性来达到改变标签样式。 选择器、盒子模型、浮动、...

  • CSS基础-1

    CSS简介 基本使用 CSS的样式选择器 表格样式 CSS盒子模型 margin的问题 布局的三大标签 块标签 内...

  • 标签

    基础知识 1.什么是html什么是css 2.常用的html标签 3.盒子模型 4.css常用选择器

网友评论

      本文标题:Html/CSS02(基本标签,Css选择器,盒子模型)

      本文链接:https://www.haomeiwen.com/subject/bwkfpftx.html