只能修饰唯一一个html元素的选择器是,HTML常用标签和CSS选择器的使用及演示——2019.1.14...

HTML语言叫做超文本标记语言， html是与浏览器交流的语言，html文档必须遵守一定的结构,才可以用于编写与交流，这种文档结构,就是html文档的编写的规范。

下面介绍HTML中的常用标签

--html是根标签,有且仅有一个,代表整个文档。

-- title设置页面标题文本内容,显示在游览器窗口的标签页。

双标签：

可以能标签设置属性进行描述,类似于自我介绍,必须以名值对的形式写到起始标签中,值必须用双引号包装。

例如：

单标签：

它的内容通常是引用的外部资源,例如图片,文件等。

例如：

html文档中常用的标签

1. 标题与段落(div ，h1~6, p)

实例

html>

标题与段落

php

第二行div

大标题

大标题

大标题

跟老师一起学习HTML

跟老师一起学习php

运行实例 »

点击 "运行实例" 按钮查看在线实例

2. 文本修饰(strong,em等)

实例

html>

文本修饰

说好一起到白头, 你却偷偷焗了油

说好一起当学渣,你却偷偷当学霸

运行实例 »

点击 "运行实例" 按钮查看在线实例

3. 列表(ul ol dl)

实例

html>

列表

购物清单

• 1.笔记本电脑一台，5000，学习php
• 2.哑铃一对，100，锻炼身体
• 3.ps4一台，2000，休闲娱乐

1. 笔记本电脑一台，5000，学习php
2. 哑铃一对，100，锻炼身体
3. ps4一台，2000，休闲娱乐

可乐

肥宅快乐水

朱老师

php中网讲师

运行实例 »

点击 "运行实例" 按钮查看在线实例

4. 表格(table,caption, thead,tbody,tfoot,tr,th,td)

实例

html>

表格

序号名称价格用途

1笔记本5000学习php2哑铃100锻炼身体3ps42000休闲娱乐

运行实例 »

点击 "运行实例" 按钮查看在线实例

5. 表单(form,label,input,select,textarea,button)

实例

html>

Document

用户注册

用户名：

密码：

确认密码：

男

女

打游戏

读书

游泳

学习php

您的学历

小学

初中

高中

大学

博士后

留言：

提交

运行实例 »

点击 "运行实例" 按钮查看在线实例

6. 图片与媒体(img video)

实例

html>

图片与媒体

            

---

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS：CSS是用来修饰html中的元素的

基本语法: 选择器 {样式声明}

1. 选择器: 最基本的有标签,类class, id

2. 样式声明: 包括属性和值二部分

3. 样式规则 = 选择器 + 样式声明

CSS属性优先级

标签选择器 < class类选择器 < ID选择器

实例

html>

常用选择器的优先级(selector)

/* 标签选择器 */

h3 {

/* 设置背景色  */

background-color: aqua;

/* 字体颜色 */

color: brown;

}

/* 类class选择器 */

.bg-blue {

background-color: lightblue;

}

/* id选择器 */

#bg-yellow {

background-color: yellow;

}

样式规则=选择器+申明

样式规则=选择器+申明

样式规则=选择器+申明

样式规则=选择器+申明

// 用js代码将id为bg-yellow的元素的背景色设置为浅灰色

document.getElementById('bg-yellow').style.backgroundColor = 'lightgrey';

运行实例 »

点击 "运行实例" 按钮查看在线实例

盒子模型

1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子

2. 盒子默认都是块级元素: 独占一行,支持宽度设置

(根据盒子模型示意图分析)

3. 盒子模型分为三个层级:

1. 内容级: 宽高和背景三个属性

(1): width

(2): height

(3): background-color (默认透明)

2. 元素级(可视范围)

(1): 包括内容级(width + height + background)

(2): 内边距: padding

(3): 边框: border

3. 位置级:margin, 决定当前盒子与其它盒子之间的位置与关系

实例

.box1 {

width: 200px;

height: 200px;

background-color: lightblue;

padding-top: 20px;

padding-right: 30px;

padding-bottom: 40px;

padding-left: 50px;

/* 可以简写:按顺时针 */

padding: 20px 30px 40px 50px;

/* 如果左右相等30,而上下不相等20,40,可以这样简写 */

padding: 20px 30px 40px;

/* 如果上下也相等40 */

padding: 40px 30px;

/* 第二个总表示左右内边距 */

/* 如果四个方向全部相等,例如20 */

padding: 20px;

/* 边框与内边距相比, 不是透明的是可见的,除了宽度,还可设置线条样式和颜色 */

/* 上边框 */

border-top-width: 10px;

border-top-style: solid;

border-top-color: red;

/* 右边框 */

border-right-width: 10px;

border-right-style: dashed;

border-right-color: green;

/* 下边框 */

border-bottom-width: 10px;

border-bottom-style: dotted;

border-bottom-color: blue;

/* 左边框 */

border-left-width: 10px;

border-left-style: double;

border-left-color: black;

/* 以上样式与可以简写 */

border-top: 10px solid red;

border-right: 10px dashed green;

border-bottom: 10px dotted blue;

border-left: 10px double black;

/* 如何每个方向的边框宽度,样式与颜色是一样的,还可以进一步简写 */

border: 10px solid red;

}

.box2 {

height: inherit;

background-color: wheat;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

今天学习了HTML的基本标签以及CSS选择器的优先级和盒子模型。