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

随机推荐

Spring 框架学习
转载自前辈:我没有三个新脏 Spring学习(1)--快速入门认识 Spring 框架 Spring 框架是 Java 应用最广的框架,它的成功来源于理念,而不是技术本身,它的理念包括 IoC (I ...
试题历届试题翻硬币 java题解
问题描述小明正在玩一个"翻硬币"的游戏. 桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可能情形是:**oo***oooo 如 ...
双系统升win11（grub启动问题修复与讲解）？！？
起最近win11不是出来了吗.(着急修复的可以直接跳到最后一步) 于是我就突发奇想给我半年没进去的windows升个级........ 于是我找到了我win11的升级包(从我一个同学哪儿) 工具都集 ...
网络协议之:加密传输中的NPN和ALPN
目录简介 SSL/TLS协议 NPN和ALPN 交互的例子总结简介自从HTTP从1.1升级到了2,一切都变得不同了.虽然HTTP2没有强制说必须使用加密协议进行传输,但是业界的标准包括各大流行 ...
django 1.11.16之环境搭建
django版本:django1.11.16 windows环境 python 3.6.3 !!!可先安装虚拟环境在进行环境搭建 1.安装django:pip install django= ...
SpringCloud 2020.0.4 系列之Eureka
1. 概述老话说的好:遇见困难,首先要做的是积极的想解决办法,而不是先去泄气.抱怨或生气. 言归正传,微服务是当今非常流行的一种架构方式,其中 SpringCloud 是我们常用的一种微服务框架. ...
win10安装git fatal: open /dev/null or dup failed: No such file or directory错误解决方法
原因看大家意思应该是非即插即用驱动文件null.sys问题. 网上有很多方案.最后试了一个可行的. 替换 windows/system32/drivers/null.sys为网盘中的文件即可. 链 ...
[技术博客] K-Means算法
遇到的问题在对微软\(OCR\)的\(api\)进行测试的过程中,我发现有时候它并不能分析出一个表格的形态,也就是说不知道每个文本对应在表格中的第几行第几列.但是它可以较为准确的给出这些文本的坐标. ...
WebGL着色器渲染小游戏实战
项目起因经过对 GLSL 的了解,以及 shadertoy 上各种项目的洗礼,现在开发简单交互图形应该不是一个怎么困难的问题了.下面开始来对一些已有业务逻辑的项目做GLSL渲染器替换开发. 起因是看 ...
Python课程笔记（十一）
一.线程与多线程 1.线程与进程线程指的是进程(运行中的程序)中单一顺序的执行流. 多个独立执行的线程相加 = 一个进程多线程程序是指一个程序中包含有多个执行流,多线程是实现并发机制的一种有效手 ...

html+css第二篇

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

随机推荐

热门专题