html的基本框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">//执行当前浏览器的编码格式
<title>这里写标题</title>
</head>
<body>
这里写文章主体内容
</body>
</html>
html中常用标记语法
标题标签:h1~h6
水平线标签:< hr/>
段落标签:< p>< /p>
换行标签:< br/>
滚动标签:< marquee decration =”left/right/up/down” behivour=”scoll”>< /marquee>
段落缩进:blockquote
原样输出:pre
斜体标签:em
粗体标签:strong
上下标:sup和sub
居中标签:center
块标签:div div+css
行内标签:span
有序列表:ol li
无效列表:ul li
架构组织列表:dl dd dt
超链接
超链接标签< a href=”需要链接的地址”>超链接< /a>
< a>< /a>标签的作用
1: 创建跳转标记 :<a 锚点名称=”x01”>< /a>
2:最终要从某个位置跳转到跳转标记这个位置:< a href=”#锚点名称”>开始跳转< /a>
链接图片资源
< img />
开发中使用:在项目下创建image包:里面放入图片的素材
src:链接到的资源图片 “../01.jpg”
alt:图片的替代文本, 当图片失效的时候,替代起作用
title:当鼠标悬浮在图片上的时候,显示图片的名称
width:设置图片的宽度 (px)
height:设置图片的高度
转义字符 ##
<:<
>:>
空格:
注册商品:® ®
版权所有:© ©
表格标签
在html语言里面,它是没有列的概念,只有行和单元格
table标签:表格标签
tr:行标签
td:单元格标签
th:在一行中显示表格中的表头(居中,适当加粗)
如果一个表格要想显示效果,必须加上table一些属性,边框:border
行合并:rowspan
列合并:colspan
<table border=”1px” align=”center” width=”xxpx” height =”xxpx” bgColor=”表格背景色”>
css样式
1.行内样式
<a href="" style="font-size:24px;color:#F00">超链接</a><br/>
使用style属性,设置css样式
2.内部样式
在head标签体中一个标签style标签,
<style type="text/css">
a{
/*所有a标签的属性值*/
font-size:24px;
color:#F00;
}
</style>
3.外部样式
在head标签体中< link href=”连接外部的css文件” rel=”stylesheet” />
导入外部css文件,要使用该标签导入
如果在实际开发中,肯定使用的是第三种方式,
css样式和html标签分离开来,有利于维护
<!--使用link标签导入外部 css文件-->
<link href="07.css" rel="stylesheet" />
css选择器
标签选择器:
直接在里面使用html标签名称来设置样式选中所有同名的标签:使用标签选择器
/*css标签选择器*/
div{
font-size:24px;
color:#F00;
}
类选择器
1) 给标签设置class属性 class=”c”
2) 使用类选择器的语法,在样式 .c{样式}
书写结构:
/*类选择器*/
.c1{
font-size:36px;
color:#0F0;
}
类选择器的优先级高于标签选择器
特点:在同一个html页面中,多个html标签是可以指定多个同名的class属性!
id选择器
1) 必须给该标签设置id属性 举例 id = “dl”
2) 使用id选择器的语法,在样式中#id属性值 : #dl{ 书写样式}
书写结构:
/*id选择器*/
#dl{
font-size:24px;
color:#00F;
}
id选择器它的优先级要高于类选择器
id选择器优先级>类选择器>标签选择器
注意:在同一个html页面中,不要去给多个标签指定同名的id属性,防止Javascript中有一个方法:
document.getElementById(“id属性值”) 获取标签对象,可能获取不到!
并集选择器
将选中的标签需要的样式
/*并集选择器*/
.c1,#dl{
font-size:24px;
color:#F00;
}
交集选择器 :选中的选择器名称1中子标签的内容
选择器名称1 选择器名称2{
书写样式
}
/*交集选择器*/ -选中的就是div中的子标签span标签
div span{
font-size:36px;
color:#0F0;
}
通用选择器
* :通配符,代表所有标签,给整体设置
*{
样式;
}
伪类选择器
比如:超链接标签,代表选中一种状态:
link:没有访问过的状态
hover:鼠标悬浮的时候一种状态
active:鼠标激活(点击了,但是没有松开)的一种状态
visited:已经被访问过的状态(点了,并且松开了)的一种状态
超链接:
状态:-没有访问-鼠标悬浮-激活-访问过, 这些状态:实际场景,不停循环使用的!