HTML&CSS学习总结

导语

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、图像
属性属性值说明
srcurl图像资源的地址
width像素(px)图像宽度
height像素(px)图像高度
alt替代文字图片的替代文字

如代码例子:

<img src="img/ta.jpg" width="100" height="100" alt="ta" />
ta
7、地址 相关说明

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

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

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

  • 苹果
  • 香蕉
  • 雪梨
说明: 属性:type 属性值: 列表前的符号 disc    实心原点 circle     符号为空心圆 square     符号为方形

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

  1. 苹果
  2. 香蕉
  3. 雪梨

说明: 属性 属性值 说明 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简化了网页的格式代码,减少了需要上传的代码数量能够设计整个站点的风格特色,在修改页面数量庞大的站点时,显得格外有用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值