html、css学习总结

最新推荐文章于 2024-05-18 12:54:30 发布

webmasterJ

最新推荐文章于 2024-05-18 12:54:30 发布

阅读量701

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/webmasterJ/article/details/77970180

版权

html：

1.html主要包括 <!DOCTYPE>文档类型声明、<head>头部标记、<body>主体标记。带有<>的元素称为html标记

2.标记就是放在“<>”中表示某个功能的编码命令，称为HTML标签或HTML元素。

3.<head></head>标记中可以插入<title>描述文档标题的标记,<meta>提供有关页面的元信息,<link>定义文档与外部资源的关系,<style>用于为HTML文档定义样式信息,等。

4.<body></body>中放入所要显示在网页里的所有内容，包含文本、图像、音频、视频。注：一个HTML文档中只能有一对<body></body>。位于头部标记之后，与<head>是并列关系。

5.编写过程中使用了中文，但在浏览器中出现乱码时，可以加<meta charset="utf-8">，可以解决乱码问题。

6.可以用来布局的标签有<div>（主要的布局标签，最常使用）,<table>标签（可以用来布局，但是现在不推荐使用）。<div>中可以加入其他标签

7.图像标记<img>,使用方法：<img src=" " />,用该标签可以添加图片，不是做为背景。

8.清单标签：<OL><LI>为有序清单。<UL><LI>为无序清单。

<ul>

</ul>

9.表单标记

<input>:输入框标记，类型有text,radio,checkbox,submit等。例：

<form>:表单，用于数据提交

<textarea>:文本输入域例：<textarea rows="3" cols="3"> (定义文本域长宽)

10.超链接标签：<A>

例：<a href="链接地址">需要超链接的内容</a>

11.<h1>~<h6>为标题层次标签，从大到小。

12.html文件可以 “行内” 使用css样式和script内容,方法是在标签内直接修饰.

如：<div style="width::500px;height:100px;background:black;border:1px solid black;"></div>

13.html文件也可以通过 “内联” 的方式添加样式

<html>

<head>

<style>

.a{width:500px;height:500px;background-color:black}

< !-- 定义长宽500px，背景色黑 -->

</style>

</head>

<body>

< !-- 调用样式 -- >

</body>

</html>

14.html也可以通过 “外联” 关联css,script文件（后缀名分别为.css .js），样式可以写在这两种文件中

举例css文件：

在css文件中添加内容如下：

.foot_area1{
width: 70%;
height: 20px;
margin: 0 auto;

}

在html文件的<body>标签中，添加内容如下：

则该<div>可以调整为全屏宽度的70%，高20px,自动居中

CSS:

css中很重要的一个是使用选择器，如上方的14条内容，使用的是类选择器。

1. 先介绍标签选择器，在css文件中添加

li{
list-style: none;
float: left;
color: #666;
line-height: 5px;
margin-right: 10px;
margin-top: 10px;
}

这段内容会对li标签进行样式添加，所有包含该标签的都会变成这种样式

2.类选择器

格式为 .类名{样式} 如：

.foot_area1{
width: 70%;
height: 20px;
margin: 0 auto;

}

通过定义类名，设置样式，然后在需要的标签中，用class="设置的类名"，即可调用样式

可以<div class="foot_area1"></div> 也可以<li class="foot_area1"></li>

3.ID选择器

格式 #名{内容}

css内：

#a{

width:500px;

height:500px;

background-color:#999;

}

html内：

<div id="a"></div>

使用id选择器，然后让div区域变成500*500，颜色为#999；

4.复合选择器

1)并集选择器：用逗号隔开

格式：.名1,.名2{内容}

.center_button1,.center_button2,.center_button3{
width: 158px;
height: 44px;
float: left;
margin-left: 30px;
margin-top: 10px;
line-height: 44px;

text-align: center;
}

2)后代选择器：用空格隔开，先父后子

格式：名1 名2{内容}

.input li{
float: left;
margin-right: 10px;
white-space: nowrap;
color: #999;
line-height: 20px;
list-style: none;
font-size: 12px;
}

3）超链接选择器：

a:link{}

a:visited{}

a:hover{}

a:active{}

超链接选择器4个的顺序不能变

注：选择器很重要

5.<span>标签：可以用来修饰文字，一行内用多个<span>，可以在一行内划分出多个区域

如：<ul>

<li><span>内容1</span><span>内容2</span> </li>

</ul>

6.样式属性：

a) 字体样式

i. 对页面中的字体进行设置样式

ii. Font-size font-family font-weight

b) 背景设置

i. 背景颜色设置：background-color

ii. 背景图片设置：background-image background-size background-repeat

c) 文本属性

行高：line-height

d) 盒子属性

i. 在前端页面设计中，记住所有的元素都是一个盒子（每一个div就是一个盒子）

ii. 盒子包含属性：宽度、高度、颜色、内边距、外边距

iii. 宽度：width，高度：height

iv. 边框：border、border-top、border-left、border-right、border-bottom

v. 内边距：padding、padding-top、padding-left、padding-right、padding-bottom

vi. 外边距：margin、margin-top、margin-left、margin-right、margin-bottom

a) 定位

i. 绝对定位：absolute

ii. 相对定位：relative

iii. 浮动：float

在父亲盒子里面进行浮动的

注意点：

1、如果设置了盒子的边框或者padding区域，一定要相应的减小盒子的宽高值

2、宽度高度值取值方式：像素取值法、百分数取值

webmasterJ

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html、css学习总结

html： 1.html主要包括文档类型声明、头部标记、主体标记。带有 2.标记就是放在“ 3.标记中可以插入描述文档标题的标记,提供有关页面的元信息,定义文档与外部资源的关系,用于为HTML文档定义样式信息,等。 4.中放入所要显示在网页里的所有内容，包含文本、图像、音频、视频。注：一个HTML文档中只能有一对
复制链接

扫一扫