qq60754347077be的博客_HTML+CSS

初识CSS样式-浮动样式float

我们都知道div标签是独占一行的，那么如何让独占一行的DIV元素并排显示呢？这一个时候就需要使用到float样式了也就是浮动样式。浮动样式的特点：1.浮动样式可以让 HTML元素在父级元素内进行一排码放但宽度不够使，元素会自动到第二行码放。语法：float:left float:right<style type="text/css"> .box {

父级元素

css

html

原创 2021-12-22 22:07:52 248 阅读

初识CSS样式-常用的基本选择器4-子选择器

子选择器与后代原则器类似但有一个非常重要的区别，后代选择会越级选择，就是根据选择器的名称一直往下找，而子选择器只会向下选择一层，不会越级选择。举个栗子：<style type="text/css"> /*后代选择器开始*/ .parent .children { background:red; } /*后代选择器结束*/</style><div

选择器

css

子级选择器

子选择器

原创 2021-12-21 22:46:09 187 阅读

初识CSS样式-常用的基本选择器3-群组选择器

群组选择器顾名思义就是将选择器进行分组。例如：我们现在有两个 HTML元素需要给予同样的样式。<div></div><a></a>在我们不会群组选择器的情况下应该如何给予这两个元素同样的CSS样式呢？例如下面这样：div { background:green;}a { background:green;}通

群组选择器

css样式

html

原创 2021-12-21 22:19:33 968 阅读

初识CSS样式-常用的基本选择器2-后代选择器

什么是后代选择器呢？在理解这个概念之前，我们首先需要了解，什么是祖先元素？什么是父元素？什么是子元素？什么是后代元素。大家可以直接看我这篇文章：初识CSS样式-常用的基本选择器2-父元素子元素后代祖先元素的概念大家理解了祖先元素父元素子元素后代元素的概念之后之后我们就可以来聊聊什么时候后代选择器了。CSS后代选择器顾名思义就

选择器

类名

html

原创 2021-12-20 21:55:04 382 阅读

初识CSS样式-常用的基本选择器2-父元素子元素后代祖先元素的概念

在理解这个概念之前，我们首先需要了解，什么是祖先元素？什么是父元素？什么是子元素？什么是后代元素。看下面的代码<div class="chlade"> <div class="children"></div></div>上面的HTML代码中有两个div元素 class类名为parent的div元素中包含了 class类名childr

类名

html

原创 2021-12-20 21:23:40 1274 阅读 1点赞

初识CSS样式-常用的基本选择器

CSS 常用的选择器可以分为三种分别是：标签选择器类选择器[class选择器] id选择器以上三种选择有优先级之分从高到低分别是： id选择器→类选择器→标签选择器我们根据优先级从低至高分别介绍这几种选择器的写法与用法及特点：一.标签选择：特点：优先级最低主要是通过HTML的标签名对HTML进行选择写法：&l

选择器

优先级

html

原创 2021-12-18 21:39:19 190 阅读

初识CSS样式-几种常用的引入方式

HTML 引入CSS样式的方法可分为三种，分别是：行间式内嵌式外链式。以上三种方式有优先级之分，从高到低分别是：行间式→内嵌式→外链式下面我们就按照优先级来依次看一下这三种引入CSS样式的方法的写法1.行间式的特点：行间式写法优先级最高缺点：影响阅读修改麻烦<div style="width:200px;height:200px;bac

优先级

外链

css

原创 2021-12-18 21:15:31 341 阅读

初识CSS样式-基本语法结构

CSS是什么？CSS简单的来说，就是对HTML样式的描述。举个简单的小栗子：我的手中有一个西瓜【例如 div标签】，CSS可以定义这个西瓜【div元素】的颜色、大小等等。概念理解了，我们先来看一下引入CSS样式最常用的方法，并实际的操作一下CSS如何控制HTML<style type="tex

选择器

css

html

原创 2021-12-18 20:36:15 135 阅读

HTML初探之span标签

span标签属于内联元素，不是独占一行的标签。类似于 a标签可以使用href属性添加链接，而span元素不能，因此span没有任何的样式。那么span元素是用来做什么呢？span元素可以用来处理信息段，或者说是对同一行内的文本进行“组合”举个栗子：<div>这里是一个div标签</div>此时，我们只想对这个div标签中的“div”这个三个字母添加样式，而其他文

css

a标签

内联元素

原创 2021-12-16 21:28:38 1189 阅读

HTML初探之P标签

P标签是英文单词Paragraph的缩写就是段落的意思。P标签常用于 HTML内文本的书写。因为P标签自带margin-top和margin-bottom 16px的边距（大家可以自行测试，在F12审查元素，可以看P标签的盒模型），因此多行文本使用P标签阅读起来更加舒适，更加适合文本类型的内容展示。下面写一下P标签的写法<p>专业的文本标签

盒模型

html

文本标签

原创 2021-12-16 21:13:13 4704 阅读

HTML初探之button元素

HTML中的button元素可以用来定义一个按钮可以用于表单的提交或者重置下面我们来看看button的常见使用方式：<button>button按钮 <img src="1.png"/></button>button标签与input标签中的button的却别：是button标签中可以放入内容比如文本和图像等，当然也可以放入input，因为but

重置

html

表单

原创 2021-12-16 20:58:58 548 阅读

HTML初探之input元素

HTML中的input元素是允许用户输入数据的元素input元素通常在form标签中使用，常被应用于搜索框，输入框等。input元素可以通过type属性改变其类型（功能）。我们一起来尝试使用一下input元素用户名:<input type="text"/>我们尝试改变一下input的功能，将input改变为按钮，（value）用于设置input的值<input type="but

用户名

搜索

html

数据

输入框

原创 2021-12-04 13:18:04 146 阅读

HTML初探之ul无序列表 ol有序列表 dl定义描述列表

HTML中的 ul列表是无序列表 ol是有序列表 dl是自定义描述列表这三种列表使用起来都非常的简单。并且使用方法都没有太大却别。下面我们来一个一个介绍首先是ul无序列表的写法与使用<ul> <li>内容</li> <li>内容</li> <li>内容</li> <!--这样一个无序

嵌套

自定义

html

原创 2021-12-03 15:24:12 1771 阅读

HTML初探之a标签

HTML的<a></a>标签是用来定义HTML页面中的超链接的，可以使一个页面跳转到另外一个页面。<a></a>标签中最常用的属性时 href属性，这个属性用来指定<a></a>标签链接的目标。下面我们就一起来看看<a></a>标签的具体使用方法。<!DOCTYPE HTML><htm

html

页面跳转

a标签

html页面

文件路径

原创 2021-12-03 14:49:16 470 阅读

HTML初探之img标签

<img>标签是imge的缩写，并且是一个单标签，主要用于定义HTML页面中的图片。下面来看一看<img>标签的使用方法<!DOCTYPE HTML><html><head> <meta charset="utf-8" /> <title>HTML初探之img标签</title></head&

html

文件名

html页面

内联元素

3d

原创 2021-12-02 20:42:57 713 阅读

初步认识HTML的基本格式

最简易的HTML基本格式声明不属于HTML标签且必须在文件页面的第一行位于<html>标签的前面(上方)<!DOCTYPE HTML> <hmtl> <!--<html>标签用于告知浏览器这是一个HTML文档，并且此标签是HTM

html

css

javascript

css样式

文件路径

原创 2021-12-02 17:19:44 494 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

qq60754347077be的博客