Web前端——HTML基础及常用标签

枕鸿

已于 2022-09-25 18:32:21 修改

阅读量1.3k

点赞数 2

分类专栏： Web前端设计与开发文章标签：前端 html

于 2022-09-21 16:22:27 首次发布

本文链接：https://blog.youkuaiyun.com/qq_25592087/article/details/126968598

版权

Web前端设计与开发专栏收录该内容

20 篇文章

订阅专栏

HTML网页文件基本结构

名称	作用
!DOCTYPE html	文档声明位于文档中的最前面的位置
html	是HTML页面的根元素
head	头文件可以放置css
meta	定义元数据，告诉浏览器配置
title	放置网页标题
body	身体文件可以放置html页面内容

具体代码：

<!DOCTYPE html>   <!--文档声明必须写-->
<html lang="en">  <!--语言lang="en"等于英文，zh等于中文-->
<head>			  <!--头文件可以放置css-->
	<meta charset="UTF-8">  <!--中文翻译官，相当于可以写入中文-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--网页适配ie浏览器（兼容低版本浏览器）-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--做移动端开发会用到，适配移动端-->
	<title></title><!--放置网页标题-->
</head>
<body>			  <!--身体文件可以放置html页面内容-->
</body>
</html>           <!--HTML页面的根元素-->

常用标签

标签类型	代表标签名称
块属性标签	div、p、h1-h6、ul>li、ol>li等块属性标签
行属性标签	span、a标签等行属性标签
行块属性标签	img标签

一、块属性标签

特点：

上下排列独占一行
支持设置宽高，如果不设置宽高，宽度自动撑满，高度由内容决定

常见快属性标签：

div标签（区隔标签）：没有任何意义，一半用来划分区域
p标签（段落标签）
h1-h6标题标签：h1字体最大，h6最小，h1标签一般一个网页中有一个多了不利于搜索引擎优化
ul>li 无序列表：一般配合起来使用
ol>li 有序列表：一般配合起来使用

二、行属性标签

特点：

左右排列
不支持设置宽高
不支持上下margin外边距和padding内边距

常见行属性标签：

span标签：用来放置左右排列的文字
a标签：“超链接用来跳转网页
href功能：
1、用来放置网页地址
分为相对路径（自己的其他页面）网络路径绝对路径(基本不用,从c盘引用)
相对路径规则：平级直接写文件名，不同级写路径 /下一级 …/返回上一级
2、可以为空
3、#号为返回顶部
4、###代表无效链接
target 跳转方式
_self(默认) _blank（打开新的页面）
text-decoration文本样式

三、行块属性标签

特点：

左右排列
支持设置宽高

常见行块属性标签：
img图片标签：单标签

src放置图片地址分为相对路径、绝对路径和网络路径
alt=图片加载失败提示信息
title=鼠标移入提示信息

四、三种属性标签互相转换

给对应标签添加如下样式：

display: inline-block; 			将标签转换为行块属性标签
display: inline;				将标签转换为行属性标签
display: block;					将标签转换为块属性标签

五、居中问题

块属性居中：
    1、水平居中：给块元素自己设置 margin:0 auto 第一个值代表上下，第二个值代表左右
    2、垂直居中：没有快捷方式（目前）计算公式：父元素高度-子元素高度/2
非块属性居中
    1、水平居中给父元素设置 text-align: center;
    2、单行文本垂直居中给父元素设置line-height：父元素的高度

六、雪碧图（图片精灵）

优点：减少项目中加载图片的个数优化性能
使用方式：
1、给所需要的内容设置背景图片（background-image）
2、使用background-position设置背景图像的起始位置

<!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>雪碧图（图片精灵）</title>
    <style>
        
        .div1{
            width:100px;
            height:100px;
            background-image: url('img/雪碧图.jpg');
            background-position: -200px 0px ;
            display: inline-block;
        }
        .div2{
            width:100px;
            height: 100px;
            background-image: url('img/雪碧图.jpg');
            background-position: 300px 210px ;
            display: inline-block;
        }
        .div3{
            width:100px;
            height: 100px;
            background-image: url('img/雪碧图.jpg');
            background-position: 200px 0px ;
            display: inline-block;
        }
        .div4{
            width:100px;
            height: 100px;
            background-image: url('img/雪碧图.jpg');
            background-position: 300px -240px ;
            display: inline-block;
        }

    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</body>
</html>

雪碧图效果
初始雪碧图