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

随机推荐

bzoj1407,洛谷2421 NOI2002荒岛野人
题目大意: 克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些山洞顺时针编号为1,2,-,M.岛上住着N个野人,一开始依次住在山洞C1,C2,-,CN中,以后每年,第i个野人会沿顺时针向前走P ...
分布式/微服务必配APM系统，SkyWalking让你不迷路
前言如今分布式.微服务盛行,面对拆分服务比较多的系统,如果线上出现异常,需要快速定位到异常服务节点,假如还用传统的方式排查肯定效率是极低的,因为服务之间的各种通信会让定位更加繁琐:所以就急需一个分布 ...
初探JavaScript PDF blob转换为Word docx方法
PDF转WORD为什么是历史难题 PDF 转Word 是一个非常非常普遍的需求,可谓人人忌危,为什么如此普遍的需求,却如此难行呢,还得看为什么会有这样的一个需求: PDF文档遵循iOS32000的规范 ...
初学python-day3 元组
day2 列表已更新!
使用Google Fonts注意事项
Google Fonts是一个字体嵌入服务库. 这包括免费和开源字体系列.用于浏览库的交互式 Web 目录以及用于通过 CSS 和 Android 使用字体的 API. Google 字体库中的流行字 ...
Java Filter型内存马的学习与实践
完全参考:https://www.cnblogs.com/nice0e3/p/14622879.html 这篇笔记,来源逗神的指点,让我去了解了内存马,这篇笔记记录的是filter类型的内存马内存马 ...
MarkDown之Typora使用
Typora:所见即所得常用快捷键加粗:ctrl + B 标题:ctrl + 16,对于与16级标题插入公式:ctrl + Shift + m 插入代码:ctrl + Shift + K 插入图 ...
【技术博客】在Unity3d中实现烟花效果
在游戏开发中,我们经常需要用到类似烟花的效果.在Unity3d中,实现烟花效果的方法不止一种,我选用了Unity3d中新添加的粒子特效工具--visual effect graph来进行实现. 实现过 ...
利用Ambari平台安装与部署Hadoop
* 本篇是利用Ambari平台安装与部署Hadoop,如果需要原生部署Hadoop,请点击以下地址: https://www.cnblogs.com/live41/p/15467263.html 一. ...
SVN查看项目修改记录及修改内容
工具/原料 svn 一,查看修改记录 1 选择要查看的文件夹,打开之后在空白的地方右键. 2 选择svn里面的"查看日志".show_Log 3 在弹出的日志框里,可以看到,你可以 ...

html+css第二篇

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

随机推荐

热门专题