HTML 基础知识01
2016-05-06 12:41
316 查看
一般 一个网页由三部分组成 HTML(网页的具体内容) CSS(网页的样式调整布局) JavaScript(网页的交互)
一 . HTML标签类型:
HTML 可以分为三大类
块级标签: 独占一行的标签, 能随时设置高度和宽度(如: div , p h1 h2 , ul, li)
行内标签(内联标签): 多个行内标签能同时显示在同一行, 宽度和高度取决于内容的大小(如: span , a , label)
行内-块级标签(内联-块级标签): 多个行内块级标签能同时显示在同一行. 能设置宽度和高度(如: input 和 button)
display 属性能修改标签的类
none: 影藏标签 (与visibility 不同的是 display影藏标签不保留标签的占位, visibility 保留标签的占位)
block: 让标签变为块级标签
inline: 让标签变为行内标签
inline-block: 让标签变为行内块级标签;
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
1.结构性标签
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件
header 标记头部区域内容
footer 标记脚部区域内容
section 区域章节表述
nav 菜单导航,链接导航
2.块级性标签
aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure 对多个元素组合并展示的元素,常与figcaption联合使用
code 表示一段代码块
dialog 人与人之间对话,包含dt和dd两个组合元素(dt用于表示说话者、dd用于表示说话者的内容
3.行内语义性标签
meter 特定范围内的数值,如工资、数量、百分比
time 时间值
progress 进度条,可用max、min、step进行控制,完成对进度的表示和监听
video 视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式
audio 音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式
4.交互性标签
功能性内容的表达,有一定的内容和数据的关联,是各种事件的基础,包括:
details 表示一段具体的内容,默认不显示,通过某种方式(单击)与legend交互才会显示
datagrid 控制客户端数据与显示,可用于动态脚本及时更新
menu 用于交互菜单
command 用来处理命令按钮
二. CSS
选择器 :
1. 标签选择器
a标签
a{
}
2. 类选择器
.content{
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
3. id选择器
#more-product{
background:#398bfb;
color: white;
/*行内块, 设置后才能调整行内标签的大小*/
display: inline-block;
width: 86px;
height: 32px;
/*这两句配合才能实现垂直水平居中*/
text-align: center;
line-height: 32px;
/*取消下滑线*/
text-decoration: none;
}
4. 并列选择器 (几个选择器或的关系)
div , .content , #more-product{
}
5复合选择器 (几个选择器与的关系)
div .content #more-producr{
}
(并列选择器和复合选择器写法上 并列选择器中间用逗号隔开, 复合选择器中间用空格隔开)
6后代选择器
div p{
<!--在div内部的p标签 -->
}
7 直接后代选择器
div > p{
<!--仅在div内部的且只在div 直接子类中. 不包含div 子类的子类中包含的 p 标签-->
}
8 相邻兄弟选择器
div + p{
<!--与div 同级, 且是p标签-->
}
9属性选择器
HTML:
<div "name" = ""aaa">111<div>
CSS
div[name] {
<!---->
}
HTML :
<div "name" = "aaa" "age" = "111">111<div>
CSS
div[name][age]{
}
div[name = "aaa"]{
}
CSS 伪类
:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时, 向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:first-child 向元素的第一个元素添加样式
:lang 向带有指定lang属性的元素添加样式
伪元素
: first-letter 向文本的第一个字母添加特殊样式
: first-line 向文本的首行添加特殊样式
: before 在元素添加之前添加内容
:after 在元素之后添加内容
优先级: 本着谁描述的更具体, 一样具体比距离的原则
盒子模型
img 的一些常用属性
1. img.onmousemove = function (){
在图片上移动调用
}
2. img.onmouseover 鼠标进入图片
3. img,onmouseout 鼠标移除图片
input :
input。onselect = function(){
// input.value 获取到 input内部的值。
}
btn :
btn。innerHTML = 'baiduyixia' ; // 获取按钮的title
一 . HTML标签类型:
HTML 可以分为三大类
块级标签: 独占一行的标签, 能随时设置高度和宽度(如: div , p h1 h2 , ul, li)
行内标签(内联标签): 多个行内标签能同时显示在同一行, 宽度和高度取决于内容的大小(如: span , a , label)
行内-块级标签(内联-块级标签): 多个行内块级标签能同时显示在同一行. 能设置宽度和高度(如: input 和 button)
display 属性能修改标签的类
none: 影藏标签 (与visibility 不同的是 display影藏标签不保留标签的占位, visibility 保留标签的占位)
block: 让标签变为块级标签
inline: 让标签变为行内标签
inline-block: 让标签变为行内块级标签;
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
1.结构性标签
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件
header 标记头部区域内容
footer 标记脚部区域内容
section 区域章节表述
nav 菜单导航,链接导航
2.块级性标签
aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure 对多个元素组合并展示的元素,常与figcaption联合使用
code 表示一段代码块
dialog 人与人之间对话,包含dt和dd两个组合元素(dt用于表示说话者、dd用于表示说话者的内容
3.行内语义性标签
meter 特定范围内的数值,如工资、数量、百分比
time 时间值
progress 进度条,可用max、min、step进行控制,完成对进度的表示和监听
video 视频元素,用于视频播放,支持缓冲预载和多种视频媒体格式
audio 音频元素,用于音频播放,支持缓冲预载和多种音频媒体格式
4.交互性标签
功能性内容的表达,有一定的内容和数据的关联,是各种事件的基础,包括:
details 表示一段具体的内容,默认不显示,通过某种方式(单击)与legend交互才会显示
datagrid 控制客户端数据与显示,可用于动态脚本及时更新
menu 用于交互菜单
command 用来处理命令按钮
二. CSS
选择器 :
1. 标签选择器
a标签
a{
}
2. 类选择器
.content{
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
3. id选择器
#more-product{
background:#398bfb;
color: white;
/*行内块, 设置后才能调整行内标签的大小*/
display: inline-block;
width: 86px;
height: 32px;
/*这两句配合才能实现垂直水平居中*/
text-align: center;
line-height: 32px;
/*取消下滑线*/
text-decoration: none;
}
4. 并列选择器 (几个选择器或的关系)
div , .content , #more-product{
}
5复合选择器 (几个选择器与的关系)
div .content #more-producr{
}
(并列选择器和复合选择器写法上 并列选择器中间用逗号隔开, 复合选择器中间用空格隔开)
6后代选择器
div p{
<!--在div内部的p标签 -->
}
7 直接后代选择器
div > p{
<!--仅在div内部的且只在div 直接子类中. 不包含div 子类的子类中包含的 p 标签-->
}
8 相邻兄弟选择器
div + p{
<!--与div 同级, 且是p标签-->
}
9属性选择器
HTML:
<div "name" = ""aaa">111<div>
CSS
div[name] {
<!---->
}
HTML :
<div "name" = "aaa" "age" = "111">111<div>
CSS
div[name][age]{
}
div[name = "aaa"]{
}
CSS 伪类
:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时, 向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:first-child 向元素的第一个元素添加样式
:lang 向带有指定lang属性的元素添加样式
伪元素
: first-letter 向文本的第一个字母添加特殊样式
: first-line 向文本的首行添加特殊样式
: before 在元素添加之前添加内容
:after 在元素之后添加内容
优先级: 本着谁描述的更具体, 一样具体比距离的原则
盒子模型
img 的一些常用属性
1. img.onmousemove = function (){
在图片上移动调用
}
2. img.onmouseover 鼠标进入图片
3. img,onmouseout 鼠标移除图片
input :
input。onselect = function(){
// input.value 获取到 input内部的值。
}
btn :
btn。innerHTML = 'baiduyixia' ; // 获取按钮的title
相关文章推荐
- HTML中使背景图片自适应浏览器大小
- 解决FF下不能使用outerHTML的2种方法
- Html基础知识点
- text() or html() 获取 td 内容
- HTML常用标签整理
- HTML 文本框 TextBox 内容改变事件
- HTML基础规范
- html 表单笔记
- 技术博客HTML
- html
- htmlentities 函数结构与htmlspecialchars 函数类似
- HTML link标签新属性
- poi转excel,word文档为html
- HTML 命名规范
- html video api控件总结
- HTML表格布局实例讲解
- HTML换行符和水平线
- 静态html请求session丢失
- XML与HTML的设计区别
- HTML网页制作:[12]使用框架结构之frameset