html+css第二篇
<img src="图片地址" alt="图片名"/> 图片（单标签）alt属性 是图片名字，是给百度搜索引擎抓取使用； a标签： 链接/下载/锚点
target 链接打开方式
blank 新窗口
self 当前窗口
<base target="_blank"/> 定义页面链接默认打开方式 常见标签
div 块
img 图片（单标签）
a 链接、下载、锚点
h1-h6 标题
p 段落
strong 强调（粗体）
em 强调（斜体）
span 区分样式
ul 无序列表
ol 有序列表
li 列表项
dl 定义列表
dt 定义列表标题
dd 定义列表项
SEO ：搜索引擎优化； 部分方法：
a、页面标签语义化；
b、使用对SEO有利的标签：h1/h2/h3/strong/em……
c、提高页面关键词密度；
d、……等等； SEM：搜索引擎营销；（包含SEO） 选择符号：
id选择符（#） 群组选择符（，） class选择符（.） 类型选择符(div……) 包含选择符（div p） 通配符（*） 基础选择符的优先级
类型 < class < id < style(行间) < js 测试：
A、#header #div1 .box1 div .section p .link{………………}
B、#some .base #font #call a{………………} A的四个伪类
伪类：伪类用于向被选中元素添加特殊的效果。（元素在特定情况下才具备的。） link 未访问（默认）
hover 鼠标悬停（鼠标划过）
active 链接激活（鼠标按下）
visited 访问过后（点击过后） A四个伪类的顺序：
link visited hover active
（love hate 记忆方法！）
a伪类的应用： a、四个伪类全用(搜索引擎、新闻门户、小说网站) b、一般网站只用（ a{} a:hover{} ） IE6不支持a以外其它任何标签的伪类； IE6以上的浏览器支持所有标签的hover伪类；
day01-常见标签
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body> <div>块</div>
<img src="1.png" alt="美女"/><!-- 单标签 -->
<a href="#">a标签（链接，下载，锚点）</a>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6> <p>段落</p>
<strong>强调（页面展示为粗体）</strong>
<em>强调（页面展示为斜体）</em>
<span>区分样式</span> <ol><!-- 有序列表 -->
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol> <ul><!-- 无序列表 -->
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul> <dl><!-- 定义列表 -->
<dt>定义列表标题</dt>
<dd>定义列表项</dd>
<dd>定义列表项</dd>
<dd>定义列表项</dd>
</dl> </body>
</html>
day02-2-常见标签a(链接)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<base target="_blank"/>
<!--
定义页面中所有链接打开方式
-->
</head>
<body> <a href="http://www.baidu.com/">a标签（链接）</a>
<a href="http://www.baidu.com/" target="_self">a标签（打开新链接）last</a> </body>
</html>
day03-2-常见标签a(锚点)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<a href="#box1">百步飞剑(锚点)</a>
<a href="#box2">夜尽天明</a>
<a href="#box3">诸子百家</a>
<a href="#box4">万里长城</a>
<a href="#box5">君临天下</a>
<div style="height:1000px;" id="box1">
百步飞剑<br/><!-- 折行符 -->
………………………………
</div>
<div style="height:1000px;" id="box2">
夜尽天明<br/><!-- 折行符 -->
………………………………
</div>
<div style="height:1000px;" id="box3">
诸子百家<br/><!-- 折行符 -->
………………………………
</div>
<div style="height:1000px;" id="box4">
君临天下<br/><!-- 折行符 -->
………………………………
</div>
<div style="height:1000px;" id="box5">
万里长城<br/><!-- 折行符 -->
………………………………
</div> </body>
</html>
初始页面：
当点击诸子百家的时候-->>>
day04-常见a标签下载
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title> </head>
<body> <a href="css2—常见标签（上）.ppt">a标签（下载）</a> </body>
</html>
day05-选择符
--------包含-----------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div span p{width:100px; height:100px; background:blue;} /*
包含 选择符
*/
</style>
</head>
<body> <div>
<p>p2</p>
</div>
<div>
<p>p2</p>
<span>
<p>p3</p>
</span>
</div>
<div>块</div> <p>p1</p>
<p>p1</p>
<p>p1</p> </body>
</html> ------------------------
-------id选择器--------------- <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box{width:100px; height:100px; background:blue;}
/*
id 选择符
*/
</style>
</head>
<body> <div id="box">块</div> </body>
</html>
-------id选择器---------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#box2,#box1,#box3{width:100px; height:100px; background:blue;}
/*
群组 选择符
*/
</style>
</head>
<body>
<div id="box1">块</div>
<div id="box2">块</div>
<div id="box3">块</div>
</body>
</html>
---.class选择器-------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{width:100px; height:100px; background:blue;}
.box2{border:5px solid red;}
/*
class(类) 选择符[可以重复使用的id]
*/
</style>
</head>
<body> <div class="box">块</div>
<div class="box box2">块</div>
<div class="box">块</div> </body>
</html>
---.class选择器-------
-----------------标签选择--------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{width:100px; height:100px; background:blue;} /*
类型 选择符
*/
</style>
</head>
<body> <div>块</div>
<div>块</div>
<div>块</div> <p>p1</p>
<p>p1</p>
<p>p1</p> </body>
</html>
-----------------标签选择--------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{border:1px solid red;}
/*
* 通配符
*/
</style>
</head>
<body> <div>
<p>p2</p>
</div>
<div>
<p>p2</p>
<span>
<p>p3</p>
</span>
</div>
<div>块</div> <p>p1</p>
<p>p1</p>
<p>p1</p> </body>
</html>
选择器的优先级：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li{height:40px;}
ol li{background:blue;}/* 1+1 */
li{background:green;}/* 1 */
.list{background:red;}/* 10 */
.list1{background:yellow;}/* 10 */
#box{background:pink;}/* 100 */
/*
同级样式默认后者覆盖前者； 样式优先级
类型(1) < class(10) < id(100) < style行间样式(1000) < js 测试：
A、#header #div1 .box1 div .section p .link{………………}
B、#some .base #font #call a{………………} 答案:B */ </style>
</head>
<body> <ol>
<li class="list list1" id="box" style="background:purple;"></li>
<li class="list1 list"></li>
<li class="list"></li>
<li></li>
<li></li>
<li></li>
</ol>
<script>
document.getElementById('box').style.background='#000';
</script> </body>
</html>
伪类：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
/*
link 未访问（默认）
hover 鼠标悬停（鼠标划过）
active 链接激活（鼠标按下）
visited 访问过后（点击过后） IE6不支持a以外其它任何标签的伪类；
IE6以上的浏览器支持所有标签的hover伪类； */
a:link{ font-size:60px; text-decoration:none; color:green;}
a:visited{color:black;}
a:hover{color:red; text-decoration:underline;}
a:active{color:yellow;} div{height:100px; background:blue;}
div:hover{background:red;} </style>
</head>
<body> <a href="#">a标签（链接，下载，锚点）</a> <div></div> </body>
</html>
html+css第二篇的更多相关文章
- CSS第二篇
给导航设置圆角的代码: c3 里面的属性:border-radius:7px: 1补充盒子问题 (盒子边框紧邻变粗问题)将两个盒子边框重叠并且设置定位提高层级避免盒子重叠,鼠标放上去只显示一个盒子的边 ...
- css第二篇：样式的特殊性、重要性、继承和层叠
特殊性: 假设有几个不同的规则改变的都是同一个元素的值,那么哪一个规则将会胜出呢?这就得靠特殊值啦,什么是特殊值呢?特殊值的大小呢?如下图: 值越大代表越牛,如1,0,0,0永远大于0,X,X,X ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- [转]Android开源项目第二篇——工具库篇
本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多 ...
- 第二篇.Bootstrap起步
第二篇Bootstrap起步 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,j ...
- Android开源项目第二篇——工具库篇
本文为那些不错的Android开源项目第二篇——开发工具库篇,**主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容 ...
- “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇（数据库结构、登录窗口、以及主界面）
“MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...
- webIDE 第二篇博文
这是我做webIDE过程中的第二篇博文,之所以隔了这么长时间没更,因为确实是没有啥进度啊,没什么可写的,现在虽然依然没啥进度,但中途遇到很多坑,这些坑还是有记录下来的必要的. 因个人水平问题,可能有的 ...
- 深入css布局篇(3)完结 — margin问题与格式化上下文
深入css布局(3) - margin问题与格式化上下文 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...
随机推荐
- Probius+Prometheus通过API集成POD监控
上一篇文章Probius+Kubernetes任务系统如虎添翼讲了我们把Kubernetes集成进了任务系统Probius,上线后小伙伴反馈虽然摆脱了Kubernetes-Dashboard,但还是得 ...
- Markdown数学公式
1. 显示位置与大小 正文(inline)中的LaTeX公式用$...$定义, 显示在当前行内. $\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t$ \(\sum_{i ...
- gridlayout在kv中的引用
from kivy.app import App from kivy.uix.gridlayout import GridLayout class GridLayoutWidget(GridLayou ...
- [Beta]the Agiles Scrum Meeting 4
会议时间:2020.5.15 21:00 1.每个人的工作 今天已完成的工作 成员 已完成的工作 yjy 增加教学计划面板,修复bug tq 实现查看.删除测试点功能 wjx 实现批量创建结对项目功能 ...
- [软工作业]-软件案例分析-CSDN
[软工作业]-软件案例分析-CSDN(app) 项目 内容 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 个人博客作业-软件案例分析 我在这个课程的目标是 ...
- spring session实现session统一管理(jdbc实现)
最近在看一些关于spring session 的知识,特做一个笔记记录一下. 在项目中经常会遇到这么一种情况,同一个web项目有时需要部署多份,然后使用nginx实现负载均衡,那么遇到的问题就是,部署 ...
- Noip模拟6 2021.6.10
T1 辣鸡 首先吐嘈一下,这题的测试点就离谱,不说了,附上我65分代码: 1 #include<bits/stdc++.h> 2 #define int long long 3 using ...
- 网络摄像机中的IR-CUT详解
自然界存在着各种波长的光线,通过折射人眼能看到不同颜色的光线,这就是光线的波长不同所导致的.其实还有许多光线是人眼看不到的,人眼识别光线的波长范围在320nm-760nm之间,超过760nm的光线人眼 ...
- Asp.Net mvc4 +Spring
添加相应的引用对象.(以下全部) 修改mvc的Global.asax文件内容 需要将控制器中原来需要new出来的对象改成属性成员 添加这个属性的注入对象 再去修改spring对web.config的一 ...
- threading python2 和python3
from __future__ import division from __future__ import print_function import threading balance = 0 d ...