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比较核心和重要的点.今天我们来深入学习一下 ...
随机推荐
- 搭建Mac+Java+appium+IOS真机自动化环境
一.安装前环境准备 1.确保电脑已经有homebrew(包管理器) 下载链接[https://brew.sh/] 2.通过 brew 安装node.js brew install node 安装 ...
- PTA实验4-2-3 验证“哥德巴赫猜想” (20分)
实验4-2-3 验证"哥德巴赫猜想" (20分) 数学领域著名的"哥德巴赫猜想"的大致意思是:任何一个大于2的偶数总能表示为两个素数之和.比如:24=5+19, ...
- Javascript深入之作用域与闭包
相信绝大多数同学都听过闭包这个概念,但闭包具体是什么估计很少有人能够说的很详细.说实话闭包在我们平时开发中应该是很常见的,并且在前端面试中闭包也是常见的重要考点,在学习闭包之前我们先来看看作用域与作用 ...
- Java中的函数式编程（二）函数式接口Functional Interface
写在前面 前面说过,判断一门语言是否支持函数式编程,一个重要的判断标准就是:它是否将函数看做是"第一等公民(first-class citizens)".函数是"第一等公 ...
- 经典论文系列 | 缩小Anchor-based和Anchor-free检测之间差距的方法：自适应训练样本选择
前言 本文介绍一篇CVPR2020的论文,它在paperswithcode上获得了16887星,谷歌学术上有261的引用次数. 论文主要介绍了目标检测现有的研究进展.anchor-based和 ...
- .net Xml加密解密操作
生成密钥的方法: /// <summary>生成RSA加密 解密的 密钥 /// 生成的key就是 方法EncryptByRSA与DecryptByRSA用的key了 /// </s ...
- FastAPI 学习之路（五十四）startup 和 shutdown
我们在实际的开发中呢,总会遇到这样的场景,我们想在启动或者终止的时候,做一些事情,那么应该如何实现呢,其实也是很简单.fastapi提供了这样的操作. 那么我们看下具体是怎么实现的呢 app = Fa ...
- OO第四单元UML作业总结暨OO课程总结
目录 目录一.第四单元UML两次作业架构设计第一次作业第二次作业二.架构设计总结与OO方法理解演进三.测试理解与实践演进四.课程收获总结五.课程改进建议六.尾声 一.第四单元UML两次作业架构设计 第 ...
- BUAA_2020_软件工程_结对项目作业
项目 内容 这个作业属于哪个课程 班级博客 这个作业的要求在哪里 作业要求 我在这个课程的目标是 掌握软件工程的思路方法 这个作业在哪个具体方面帮助我实现目标 学习结对编程 教学班级 006 项目地址 ...
- 2021.9.18考试总结[NOIP模拟56]
T1 爆零 贪心地想,肯定要先走完整个子树再走下一个,且要尽量晚地走深度大的叶子.所以对每个点的儿子以子树树高为关键字排序$DFS$即可. 也可$DP$. $code:$ T1 #include< ...