普歌-前端复习总结HTML+CSS-超详细，超全面（内容较多，建议收藏）

最新推荐文章于 2023-04-10 17:25:53 发布

置顶

Cx330.宇

最新推荐文章于 2023-04-10 17:25:53 发布

阅读量1.5w

点赞数 126

CC 4.0 BY-SA版权

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_52791256/article/details/115405104

普歌-HTML5+CSS3复习总结

一.HTML基础
二.CSS

一.HTML基础

1.网页开发工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

（1）<！DOCTYPE >标签

它是文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。

声明位于文档中的最前面的位置，处于< html> 标签之前。

它不是一个HTML 标签，是文档类型声明标签。

（2）lang语言

用来定义当前文档显示的语言。

en定义语言为英语 , zh-CN定义语言为中文

对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文

（3）charset 字符集

字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。

上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码。

2.常用基本标签

（1）文本标签

标题

<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

在这里插入图片描述

<h1 align="对齐方式">文本内容</h1>

三种对齐方式：left，center，right

文本

在这里插入图片描述

上标与下标：

<sup>上标标记内容</sup>
<sub>下标标记内容</sub>
例：
    x<sup>3</sup></br>
    2x<sub>2</sub>

在这里插入图片描述

段落，水平线

<p>段落标签</p>  //有较大空白缝隙
<br>换行标签    //强制换行，单标签
<hr>           //水平线标记

div和span标签

<div> </div>     // 用来布局，但是现在一行只能放一个div。大盒子
<span> </span>  //用来布局，一行上可以多个span。小盒子

图像标签和路径

<img src="图片的位置" >

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片不能显示的文字
title	文本	提示文本鼠标放到图像上，显示文字
width	像素	设置图片的宽度
height	像素	设置图像的高度
border	像素	设置图片的边框粗细

相对路径：以引用文件所在位置为参考基础，图片相对于HTML页面的位置
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

在这里插入图片描述

超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

在这里插入图片描述
链接分类：

1.外部链接
2.内部链接
3.空链接:如果当时没有确定链接目标时，< a href="#"> 首页< /a > 。
4.下载链接
5.网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
6.锚点链接: 点击链接,可以快速定位到页面中的某个位置。

（2）表格标签

 <table>                             //是用于定义表格的标签
        <tr>                         //定义表格中的行，必须嵌套在<table> </table>标签中。
        <th>  </th>                  // 表格的表头部分,加粗显示
            <td>单元格内的文字</td>   // 定义表格中的单元格，必须嵌套在<tr></tr>标签中。
            ...
        </tr>
        ...
    </table>

表格结构标签

<thead></thead>：     //用于定义表格的头部。
<tbody></tbody>：     //用于定义表格的主体。

合并单元格

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

表格相关属性：
在这里插入图片描述

（3）列表标签

无序列表

   <ul>
       <li></li>
   </ul>
//最常用，没有固定的顺序，默认有小圆点

有序列表

   <ol>
       <li></li>
   </ol>
 //有先后顺序，默认有数字

自定义列表

        <dl>
            <dt>名词1</

最低0.47元/天解锁文章

200万优质内容无限畅学