HTML&CSS学习总结

最新推荐文章于 2022-07-09 17:06:38 发布

飞越13

最新推荐文章于 2022-07-09 17:06:38 发布

阅读量311

点赞数

分类专栏：笔记文章标签： web design

本文链接：https://blog.csdn.net/weixin_51041744/article/details/114848673

版权

笔记专栏收录该内容

18 篇文章 1 订阅

订阅专栏

导语

HTML是超文本标记语言（HyperText Markup Language）的缩写，是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。而学习HTML，需要掌握标签的使用，如常见的 body、head、title、p、img、a、div、span、ol、table等。层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。而CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

一.学习HTML

1.HTML的文档的基本结构

< head >
< title >网页标题< /title >
< /head >
< body >
网页内容
< /body >
< /html >

2.HTML标签元素

HTML元素由开始标签和结束标签组成。
如< html >< /html >。

3.常用元素

1、段落 <p></p>

< p >
UTF-8。UTF-8就是在互联网上使用最广的一种unicode的实现方式。
< /p >
< p >
编码，包括了GB2312中的编码，同时扩充了许多，通行于大陆。
< /p >

2、标题
标题有六种大小h后的数字越大，说明标题越大。
分别为:

< h1 >标题1< /h1 >
< h2 >标题2< /h2 >
< h3 >标题3< /h3 >
< h4 >标题4< /h4 >
< h5 >标题5< /h5 >
< h6 >标题6< /h6 >

4、文本格式化

一些常用于设置文本字体的元素：

 <b>定义粗体文本</b><br />
 <i> 定义斜体文本 </i><br />
 <del>定义删除文本</del><br />
 <sup>定义上标字</sup><br />
 <sub>定义下标字</sub><br />

5、锚点

有时我们在浏览网页时会发现，有些网页比较人性化，会有点击返回顶部的按键。这样的效果其实用锚点标签就能做到。锚点就是点击使用户跳到文档的某个部分。
< a href="#位置名" > < /a >
< a name=“位置名” > < /a >
如代码例子：

<a href="#map">跳转</a>
 <p id="map">代码代码</p>

6、图像

属性	属性值	说明
src	url	图像资源的地址
width	像素（px）	图像宽度
height	像素（px）	图像高度
alt	替代文字	图片的替代文字

如代码例子：

<img src="img/ta.jpg" width="100" height="100" alt="ta" />

7、地址相关说明

./ 当前目录
. ./ 回到上一层目录 images/ 进入一层目录
. ./images/ 回到上一层目录，然后再进入images目录

情形	html文件位置	图片位置
同一个目录	D:/html/demo.html	D:/html/01.jpg
下一层目录	D:/html/demo.html	D:/html/img/01.jpg
上一层目录	D:/html/demo.html	D:/01.jpg
同一层不同目录	D:/html/demo.html	D:/img/01.jpg

8、列表

无序列表 Html中列表也是常用的元素。
无序列表用< ul >< li >< /li ></ ul >表示。

苹果
香蕉
雪梨

说明：属性：type 属性值：列表前的符号 disc 　　实心原点 circle　　　　符号为空心圆 square　　　　符号为方形

有序列表有序列表使用数字或字母系统来组织列表里包含的信息。有序列表可以使用数字(默认)、大写字母、小写字母、大写罗马数字和小写罗马数字排列项目。

苹果
香蕉
雪梨

说明：属性属性值说明 type 1、 a 、 A、i、I 用来设置项目前面的标记 start 数值排序的起点数值

9、 form 表单

html中表单的作用是很强大的。我们生活中经常要用到表单，如一些基本信息的填写。在网页中也是如此，我们免不了注册一些账号，此时用到的表单就比较多了。表单主要负责获取用户填写的数据，并通过浏览器向服务器传送数据。

表单的基本结构：

< form name=“form1” action=“URL” method=“get|post” target=“文档显示方式”
用户名：< input type=“text” name=“uname” />
密码：< input type=“password” name=“passwd” />
< /form >

说明：属性说明 name: 表单的名称;
action :表单提交地址 ;
method: 表单数据提交的方式 (get:在url地址上面传送参数到服务器,post：在后台传送参数到服务器） enctype MIME类型
target :打开方式（_blank:在一个新的窗口打开 _self:在相同的框架中调入文档 _top:把文档调入原来的最顶部的浏览器窗口中）

二.学习CSS

1.CSS语法结构

CSS的语法结构由三部分组成：选择符、属性、值。
说明:
选择符：通常是需要改变样式的 HTML 元素。
属性：是您希望设置的样式属性
值：每个属性有一个值。

例：

<style type="text/css">
 p { background-color:#cccccc;}
 </style>

2.CSS选择符

1、通配选择符*
*表示所有的对象。凡是在html文件中的元素，都会被选中。

例子：

<html>
<head>
    <style>
        *{
            background-color:blueviolet ;
        }
    </style>    
</head>
<body>    
    <h2 >标题2</h2>
    <h3 >标题3</h3>
    <a>这是个链接</a>    
</body>
</html>

2、id选择器及class选择器
id和class的名称是由用户自定义的。id号可以唯一地标识html元素，为元素指定样式。id选择符以#来定义。

id选择符在网页中，每个id名只能是唯一不重复的。

例子：

<style type="text/css">
    #title2{   /*#后的是id名称*/
        background-color: red;
    }
</style>

<body>
<h2 id="title2">我也是标题2</h2>
</body>

class选择符 class与id不同，class可以重复使用，定义一类的元素。class选择符以.来定义。

例子：

<style type="text/css">
    .pp{   background-color: blue; }
</style>

<body>
<p class="pp">这是个段落</p>
</body>

3.CSS的生效

1、内联样式

所谓内联样式，就是直接把样式规则直接写到要应用的元素中,将CSS样式编码直接写在HTML 标签中的style属性里。注意这种方式的引入CSS，是不需要写选择器的。

例子：

<h3 style="color: red;">标题3</h3>

2、内部样式表
将样式作为页面中的一个单独部分，由标签定位在之中。
例子：

<head>
    <style type="text/css">
   h1{ background-color:blue;
    }
a {color:red;}
</style>
</head>

3、外部样式表

在html文件同一目录新建一个样式表文件mycss.css（注意后缀名为css）再由网页进行调用。

例子：

 <head>
  <link rel="stylesheet" type="text/css" href="demo.css" />
  </head>

/demo.css文件内容/

div
{
width:50px;
height:100px;
background-color:red;
}

三种样式的优先级从高到低注：三种引入CSS的方式是有优先级之分的。其排序是就近原则，即内联>内部>外部。也就是说用三种方式来对某元素进行设置时，最先引用的将会是离元素最近的那种方式。

4、颜色，尺寸，对齐

灵活的运用颜色可以美化我们的网页，颜色是一个网站的重要组成部分
（1）、英文单词，比如 red , yellow ,green …
（2）、十六进制表示方式，#开头，6个十六进制的字符或数字组合。比如：#FFFFFF，#000000，#CCCAAA，#22BCAD。十六进制： 0-9 和 a-f RGB模式，红 0-255，绿 0-255，蓝 0-255。比如： RGB(120,33,234)。 RGBA(255,0,0,.5) RGBA模式，最后的A表示透明度50%小数点前的0可以省略不写

<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="color:Tomato;">Hello World</h3>

用 height 和 width 设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比 %等。

<body>
<div class="example-1">
  这个元素高 200 pixels，占据全部宽度
</div>
<div class="example-2">
  这个元素宽200像素,高300像素
</div>
  </body>

.example-1 {
 width: 100%;
  height: 200px;
  background-color: powderblue;
 text-align: center;
}

元素中的文本，可以简单的设置text-align属性为left, center, right即可（缺省的是左对齐）

5、边距

1.内边距

取值： padding-top: 设置上边的内边距 padding-right: 设置右边的内边距 padding-bottom: 设置下边的内边距 padding-left: 设置左边的内边距

例子：

<style type="text/css">            
        #div3{
            width: 100px;
            height: 100px;
            padding-top: 20px;
            padding-right: 30px;
            padding-bottom: 30px;
            padding-left: 10px;
        }
    </style>
<body>
    <div id="div3"> 我是里面的内容
    </div>
</body>

2、外边距

取值： margin-top: 设置上边的外边距 margin-right: 设置右边的外边距 margin-bottom: 设置下边的外边距 margin-left: 设置左边的外边距

例子：

#div2{
            width: 110px;
            height: 80px;
            margin-top:20px;
            margin-right: 20px;
        }    
       <div id ="div2">
            我是里边的内容。
        </div>

6、伪类选择符

常见的伪类选择link、hover、visited
语法：选择器后使用 : 号，再跟上某个伪类/伪元素

例子：

#div1 a:link{
        background-color: red;    /*设置链接a在未访问前的样式为红色背景色*/ }        
    }
   #div1 a:visited{
        background-color: blue;/*设置链接a在访问后的样式的背景色为蓝色*/
    }
   #div1 a:hover{
        text-decoration: none; /*当鼠标悬停在链接上时，链接的下划线消失*/
    }

7、组合选择器

对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。这样一来，我们可以快速地对相关的元素进行整体调节。

子选择符：直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接元素包含选择符（EF）：选择所有被E元素包含的F元素

例子：

<style>        
        ul li>a{
            font-family: "微软雅黑";
            font-size: 20px;
            background-color: indianred;
           div h3{ 
            font-family: "微软雅黑";    
            background-color: blue;
        }
        }            
    </style>
   <body>    
    <ul>
        <li><a href=#>我是链接</a></li>
    </ul>
    <div>
        <h3>标题3</h3>  /*div包含h3*/*
    </div
</body>

8、浮动

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

例子：

  .example-overflow-scroll-y {
width: 200px;
height: 100px;
background-color: #eee;
overflow-y: scroll;
}

总结：
网页的本质就是HTML，通过结合使用其他的Web技术可以创造出功能强大的网页。CSS简化了网页的格式代码，减少了需要上传的代码数量能够设计整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。