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>

</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比较核心和重要的点.今天我们来深入学习一下 ...

随机推荐

dubbo服务架构介绍
Provider: 暴露服务的服务提供方. Consumer: 调用远程服务的服务消费方. Registry: 服务注册与发现的注册中心. Monitor: 统计服务的调用次数和调用时间的监控中心. ...
如何在另一台设备上搭建python接口自动化项目所需要的第三方库
1.如何将当前项目引用的第三方库导出,在新建项目时,选择New environment using>Virtualenv 2.然后右键选择open in terminal:输入命令:pip fr ...
iostream 操作符
iostream 操作符 Input/output manipulators - cppreference.com
beta事后分析
设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 软件要解决的问题是是开发一个简易方便,为用户带来便捷且功能齐全的表情包管理小程序: 预期的典型用户 ...
[对对子队]Alpha阶段项目展示博客
Alpha阶段项目展示博客 1 团队成员的简介和个人博客地址成员头像岗位博客个人介绍黄贤昊 PM 17373253 喜欢玩游戏和做游戏,项目经验基本都和游戏相关,擅长摸鱼,偶尔敬业. 刘子 ...
2019OO第四单元作业总结&OO课程整体总结
第四单元作业总结第四单元的作业主题是UML图的解析,通过对UML图代码的解析,我对UML图的结构以及各种元素之间的关系的理解更加深入了. ------------------------------ ...
链表中倒数第K个结点牛客网程序员面试金典 C++ Python
链表中倒数第K个结点牛客网程序员面试金典 C++ Python 题目描述输入一个链表,输出该链表中倒数第k个结点. C++ /* struct ListNode { int val; struc ...
triangle leetcode C++
Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...
pvcreate vgcreate lvcreate 扩容
centos6 服务器磁盘扩容 1.创建物理卷 /dev/sdb #pvcreate /dev/sdb 参数:/dev/sdb 设备名 2.创建卷组 vg_02 #vgcreate vg_02 / ...
java随手记面向对象
// 可以把两个类放在同一个文件中,但文件中只能有一个类是公共类,且公共类必须与文件同名,即xxx.java,源代码中的每个类编译成class文件 // java库中的类 // java.util.* ...

html+css第二篇

html+css第二篇的更多相关文章

随机推荐

热门专题