<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第二篇的更多相关文章

  1. CSS第二篇

    给导航设置圆角的代码: c3 里面的属性:border-radius:7px: 1补充盒子问题 (盒子边框紧邻变粗问题)将两个盒子边框重叠并且设置定位提高层级避免盒子重叠,鼠标放上去只显示一个盒子的边 ...

  2. css第二篇:样式的特殊性、重要性、继承和层叠

    特殊性:   假设有几个不同的规则改变的都是同一个元素的值,那么哪一个规则将会胜出呢?这就得靠特殊值啦,什么是特殊值呢?特殊值的大小呢?如下图: 值越大代表越牛,如1,0,0,0永远大于0,X,X,X ...

  3. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  4. [转]Android开源项目第二篇——工具库篇

    本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多 ...

  5. 第二篇.Bootstrap起步

    第二篇Bootstrap起步 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,j ...

  6. Android开源项目第二篇——工具库篇

    本文为那些不错的Android开源项目第二篇——开发工具库篇,**主要介绍常用的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容 ...

  7. “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构、登录窗口、以及主界面)

    “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...

  8. webIDE 第二篇博文

    这是我做webIDE过程中的第二篇博文,之所以隔了这么长时间没更,因为确实是没有啥进度啊,没什么可写的,现在虽然依然没啥进度,但中途遇到很多坑,这些坑还是有记录下来的必要的. 因个人水平问题,可能有的 ...

  9. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

随机推荐

  1. Probius+Prometheus通过API集成POD监控

    上一篇文章Probius+Kubernetes任务系统如虎添翼讲了我们把Kubernetes集成进了任务系统Probius,上线后小伙伴反馈虽然摆脱了Kubernetes-Dashboard,但还是得 ...

  2. Markdown数学公式

    1. 显示位置与大小 正文(inline)中的LaTeX公式用$...$定义, 显示在当前行内. $\sum_{i=0}^N\int_{a}^{b}g(t,i)\text{d}t$ \(\sum_{i ...

  3. gridlayout在kv中的引用

    from kivy.app import App from kivy.uix.gridlayout import GridLayout class GridLayoutWidget(GridLayou ...

  4. [Beta]the Agiles Scrum Meeting 4

    会议时间:2020.5.15 21:00 1.每个人的工作 今天已完成的工作 成员 已完成的工作 yjy 增加教学计划面板,修复bug tq 实现查看.删除测试点功能 wjx 实现批量创建结对项目功能 ...

  5. [软工作业]-软件案例分析-CSDN

    [软工作业]-软件案例分析-CSDN(app) 项目 内容 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 个人博客作业-软件案例分析 我在这个课程的目标是 ...

  6. spring session实现session统一管理(jdbc实现)

    最近在看一些关于spring session 的知识,特做一个笔记记录一下. 在项目中经常会遇到这么一种情况,同一个web项目有时需要部署多份,然后使用nginx实现负载均衡,那么遇到的问题就是,部署 ...

  7. Noip模拟6 2021.6.10

    T1 辣鸡 首先吐嘈一下,这题的测试点就离谱,不说了,附上我65分代码: 1 #include<bits/stdc++.h> 2 #define int long long 3 using ...

  8. 网络摄像机中的IR-CUT详解

    自然界存在着各种波长的光线,通过折射人眼能看到不同颜色的光线,这就是光线的波长不同所导致的.其实还有许多光线是人眼看不到的,人眼识别光线的波长范围在320nm-760nm之间,超过760nm的光线人眼 ...

  9. Asp.Net mvc4 +Spring

    添加相应的引用对象.(以下全部) 修改mvc的Global.asax文件内容 需要将控制器中原来需要new出来的对象改成属性成员 添加这个属性的注入对象 再去修改spring对web.config的一 ...

  10. threading python2 和python3

    from __future__ import division from __future__ import print_function import threading balance = 0 d ...