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比较核心和重要的点.今天我们来深入学习一下 ...
随机推荐
- HttpServletResponse 入门
继承体系 功能: 设置响应消息 1. 设置响应行 格式:HTTP/1.1 200 ok 设置状态码:setStatus(int sc) 2. 设置响应头:setHeader(String name, ...
- Visual Studio Debug only user code with Just My Code
Debug only user code with Just My Code By default, the debugger skips over non-user code (if you wan ...
- Node.js CMS——基于 NestJS/NuxtJS 的完整开源项目
这是一款轻量级的基于 Node.js 的开源 CMS,采用前后端分离开发模式,集成了 API.后台管理.WEB 展示三个完整项目.开箱即是一套完整的企业网站,适合企业.个人直接使用或二次开发. API ...
- Go语言核心36讲（Go语言进阶技术六）--学习笔记
12 | 使用函数的正确姿势 在前几期文章中,我们分了几次,把 Go 语言自身提供的,所有集合类的数据类型都讲了一遍,额外还讲了标准库的container包中的几个类型. 在几乎所有主流的编程语言中, ...
- [对对子队]Scrum Meeting 博客汇总
对对子队 博客目录 一.Scrum Meeting 1. Alpha Scrum Meeting 1(会议记录4.10) Scrum Meeting 2(会议记录4.11) Scrum Meeting ...
- 设计的MOS管三极管简单开关电路驱动能力不够1
您需要 登录 才可以下载或查看,没有帐号?注册 x . ?& P' U5 r/ ~& `: B 用AOD409设计的开关电路为什么驱动能力不够,请大家帮忙分析一下原因啊.这个电路作用就 ...
- notepad++ 替换回车换行
以" | "为分隔符,换行 结果如下图:
- centos7 使用iptables
关闭selinux,不关闭时,iptables不读取配置文件 重启生效 centos7 中默认的防火墙是firewalld,使用iptables需要先关闭firewalld防火墙,安装iptables ...
- CSS学习（三）特指度和层叠
一.特指度 特制度的一般形式是0,0,0,0 行内样式,第一位的特指度加一 id选择符,第二位的特指度加一 类选择符.属性选择符.伪类,第三位的特指度加一 元素选择符.伪元素,第四位的特指度加一 特指 ...
- JavaScript事件捕获冒泡与捕获
事件流 JavaScript中,事件流指的是DOM事件流. 概念 事件的传播过程即DOM事件流.事件对象在 DOM 中的传播过程,被称为"事件流".举个例子:开电脑这个事,首先你是 ...