HTML入门

weixin_44376565

已于 2022-09-10 22:41:23 修改

阅读量75

点赞数

文章标签： html 前端 css

于 2022-09-09 18:59:08 首次发布

本文链接：https://blog.csdn.net/weixin_44376565/article/details/126787842

版权

HTML：超文本标记语言

作用：制作网页基础内容和基本结构

组成：由一系列元素（ELEMENT）组成，元素由标签组成

标签：标签可以用于设置文本样式、图片样式、超链接样式等等。用<>表示

例如：<h1>标签，代表一级标签。我们可以使用开始标签和结束标签包围文字

<h1>内容</h1>

标签中可以添加属性：

<标签名属性名="属性值">

一个完整的HTML文件格式

<!DOCTYPE html><!--文档信息-->
<html lang="en"><!--语言-->
<head>
    <meta charset="UTF-8"><!--编码格式-->
    <title>01-入门案例</title>
</head>
<body>
    <h1 align="center">这是我的第一个html案例</h1>
</body>
</html>

	<style>
        标签名{
            属性名1：属性值1[属性值2 属性值3...];
            
        }    
	</style>

在<head>标签中通过<style>标签来控制所有样式

样式属性：

border边框

solid边框线

width：宽度

height：高度

margin：页边距

注释标签：

<!-- 内容-->

div样式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式演示</title>
    <style>
        div{
            /*显示div边框*/
            border: 1px solid red;
            width: 60%;
            height: 500px;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="left">第一个div</div>
    <div class="center">第一个div</div>
    <div class="right">第一个div</div>
    <!-- <p>我在注释内！</p> -->
</body>
</html>

图片标签

图片标签
img 可以显示一张图片（本地或网络） src属性：这是一个必须的属性，表示图片的地址
title属性，鼠标悬停（hover）时显示文本
alt属性，图形不显示时的替换文本
height属性图像的高度
width属性，图像的宽度

实例展示

<img src="../img/ad1.jpg" title="center" alt="图片丢失" width="400" height="407">

超链接标签

a 表示超链接

href属性，表示超链接指向的URL地址

target属性，页面的打开方式（_self当前页 _blank新标签页）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

超链接嵌套

<a><标签></标签></a>

换行标签

<br>

对超链接标签进行样式控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
    <style>
    a{
        <!--去掉超链接下划线-->
        
        text-decoration：none;

         <!--颜色-->
        color:black;
        
    }
    /*鼠标悬浮的样式*/
    a:hover{
        color:red
}
    
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>