HTML与CSS零碎知识点归纳

最新推荐文章于 2024-06-16 20:14:52 发布

秋恨雪

最新推荐文章于 2024-06-16 20:14:52 发布

阅读量943

点赞数

分类专栏： HTML5 & CSS3 文章标签： html css 浏览器知识点

本文链接：https://blog.csdn.net/sinat_27706697/article/details/49662385

版权

HTML5 & CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

一、HTML

1、主要浏览器:

IE、FireFox、Chrome、Opera、Safari

Trident引擎，如：IE

WebKit引擎，如:Chrome、Safari

Gecko引擎，如：FireFox

2、相对路径问题--相对路径是指相对于你所运行的那个html文件的路径

图片路径还是用正斜线 /
当前目录中的图片地址: ./图片.jpg (即图片与html文件在同一个文件夹中)子目录中的图片地址: ./子文件夹名称/图片.jpg
父目录中的图片地址: ../图片.jpg

3、a标签(将target=_blank是将链接到的地址在新页面中打开):

1) 设定跳转到哪里
<a href="http://www.baidu.com">百度</a>
2) 作为链接,点击的内容可以是一副图片
<a href="http://www.baidu.com"><img src="1.jpg"/></a>

3) 跳转到本项目中的另一个网页(Transfer)
<a href="First.htm">网站首页</a>
4) 在本网页中跳转
<a href = "#mark">跳转</a>
<a name = "mark">跳转到的对象</a>
5) 发送邮件
<a href="mailto:517440874@qq.com?subject=Be Quick & body=Matter">发送邮件</a>

4、img标签

<img src="图片" alt="提示信息" title="提示信息"/>alt表示图片不能显示的时候,在图片旁边的提示title表示图片正常显示时,鼠标移动到图片上的提示信息

5、table

cellspacing指的是格与格之间的距离

cellpadding指的是格内字与格的边框的距离

rowspan、colspan用来合并单元格,是td的属性。

Example One:

<table border="1" cellspacing="10" cellpadding="10">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

效果图如：

Example Two:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<title></title>
<style type="text/css">
    td{border:1px solid blue;}
</style>
</head>
<body>
    <table cellspacing="0">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>

效果图如：

Example Three:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<title></title>
<style type="text/css">
    td{border:1px solid blue;}
</style>
</head>
<body>
    <table cellspacing="0" style="border-collapse:collapse;">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>

效果图如：

二、CSS

1. 基本概念

CSS(Cascading Style Sheet)

CSS主要有元素内联(行内样式表),页面嵌入(内嵌样式表),外部引用(外部样式表)

元素内联:直接将样式写在元素的style属性中

页面内嵌:在head中写入<style type="text/css"></style>

外部引用:将css内容写入.css后缀的文件,然后在页面中引用 <link type="text/css"rel="stylesheet" href="s1.css">
将css文件集合起来: @import url(文件名.css);然后导入这一个css文件即可

样式选择器:主要有:标签选择器、id选择器、class选择器

2、a标签的伪选择器

//默认情况下显示黑色a:link{color:black;}

//当鼠标移动到上面的时候显示红色a:hover{color:red;}

//当鼠标点击它,但没有离开的时候显示绿色a:active{color:green;}

//当鼠标点击完成,离开后,显示黄色a:visited{color:yellow;}

3、定位:

position:absolute;width="";height="" left="" top="" 绝对定位

position:fixed;width="";height="" left="" top="" 固定定位

两者区别:absolute:当页面滚动时,跟着一起滚动

fixed:当页面滚动时,固定不动,相对于可视区域位置不变

position:relative;width="";height=""left="10px";top="10px" 相对定位表示相对于定位前原本应该显示的位置向右、向下都偏移了10像素。
z-index 表示当有div有重叠的时候,在纵轴方向上的距离,谁的数值大,谁就显示!

秋恨雪

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML与CSS零碎知识点归纳

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。一、HTML1、主要浏览器:IE、FireFox、Chrome、Opera、SafariTrident引擎，如：IEWebKit引擎，如:Chrome、Safari Gecko引擎，如：FireFox2、相对路径问题--相对路径是指相对于你所运行的那个html文件的路径图片路径还是用正斜线 /当...
复制链接

扫一扫