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,学习php2.哑铃一对,100,锻炼身体3.ps4一台,2000,休闲娱乐笔记本电脑一台,5000,学习php哑铃一对,100,锻炼身体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:20px30px40px50px;
/*如果左右相等30,而上下不相等20,40,可以这样简写*/
padding:20px30px40px;
/*如果上下也相等40*/
padding:40px30px;
/*第二个总表示左右内边距*/
/*如果四个方向全部相等,例如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:10pxsolidred;
border-right:10pxdashedgreen;
border-bottom:10pxdottedblue;
border-left:10pxdoubleblack;
/*如何每个方向的边框宽度,样式与颜色是一样的,还可以进一步简写*/
border:10pxsolidred;
}
.box2{
height:inherit;
background-color:wheat;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
今天学习了HTML的基本标签以及CSS选择器的优先级和盒子模型。