HTML学习第二天总结

最新推荐文章于 2024-07-25 10:18:55 发布

棪小木

最新推荐文章于 2024-07-25 10:18:55 发布

阅读量66

点赞数 1

文章标签： css html html5

本文链接：https://blog.csdn.net/qq_55931044/article/details/120472827

版权

1.锚点

锚点：就是在网页中定义一个位置（给网页中某一个制定位置做标记），让使用者可以快速的精确的到达本网页中的某一个位置。

<!--
   锚点是需要在a标签中完成的，属于超链接。
-->
<a href="#p1">标记点1</a>
...
...
<a name="p1"></a><!--name的作用是定义锚点-->

2.内联框架（窗口）

在一个窗口内嵌入一个子窗口，从而可以在子窗口显示一个网页内容。

<!--
    iframe标签是引入窗口的标签，可以设置宽，高，边框线等。
-->
<iframe src="自己添加一个html文件" widht="500" height="500" name="test"></iframe>
<!--此时一个名为test的窗口搭建好了-->
<a href="http:/www.baidu.com" target="test">百度</a>
<!--
    当点击百度这个超链接时将会在test窗口打开百度网页，target的属性就是打开文件的位置。
target属性的属性值有：
_blank：在新的一个窗口打开链接；
_parent：在上一级窗口打开链接；
_search：在新的一个窗口打开链接；  
_self：（系统默认的）在当前窗口打开链接；
_top：表示在最顶层打开链接。
-->

3.css

CSS：是Cascading Style Sheets的缩写，名称为级联样式表；

级联：

样式表：

CSS是一种样式表语言，用于为HTML控制外观，定义布局。

可以将页面内容与形式分离，进行统一修饰。

简单来说html是为网页提供内容的，而css是将网页中的内容修饰和排版的更加美观。

4.css基本语法

行级（行内）样式表：写在标签中，使用较少。

<a style="color:red;font-size:30px;">链接</a>
<!--
style="其中的属性可以有多个"这就是行级样式表。
-->

内嵌样式表:样式表与内容分离，通过选择器将内容与样式关联。一般在练习中使用较多，内容过多时不采取。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <!--
           在style标签（写在head标签里）中写css样式表 书写的形式是 .类名{}，一个{}就是一个样式表。
        -->
		<style type="text/css">
			.aa{
				font-size: 20px;color: chocolate;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" class="aa">百度</a>
		<a href="http://www.baidu.com" class="aa">百度</a>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

外部样式表：在实际开发中，用到的css多，可以把css代码提取到css文件中。实际开发使用的多。

当我们把css代码放入css文件后我们需要做的是将css文件引入html文件中，就需要在head标签中添加如下代码：

<link href="cssd的地址" rel="stylesheet"/>

5.选择器

常用的选择器：
标签选择器：通过标签选择器可以选择页面中的所有指定标签

类选择器：通过标签的class属性值选中一组标签

id 选择器：通过标签的id属性值选中唯一的一个标签

通配选择器:可以用来选中页面中的所有的标签

选择器组合：通过选择器分组可以同时选中多个选择器对应的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
            /*标签选择器：以标签为参照*/
			a{
				font-size: 20px;color: chocolate;
			}
            /*类选择器：以类名为参照*/
            .cc{
                font-size: 30px;color: red;
            }
             /*id择器：id属性不能重复*/
            #aid{
                font-size: 40px;color: aqua;
            {
             /*通配选择器:所有的标签*/   
            *{
                color: blue;
             }
            /*选择器组合：将多个有共同属性的选择器组合在一起,对应同一个样式表*/
            a,.cc{
                   font-size:60px; 
                }
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" class="cc" id="aid">百度</a>
		<a href="http://www.baidu.com"class="cc">百度</a>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

注：选择器优先级问题

行级样式表>id选择器>类选择器>标签选择器>通配选择器。

棪小木

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习第二天总结

1.锚点锚点：就是在网页中定义一个位置（给网页中某一个制定位置做标记），让使用者可以快速的精确的到达本网页中的某一个位置。<a href="#p1">标记点1</a>......<a name="p1"></a>2.内联框架（窗口）在一个窗口内嵌入一个子窗口，从而可以在子窗口显示一个网页内容
复制链接

扫一扫