web前端开发技术学习打卡：DAY01

最新推荐文章于 2024-07-22 14:10:07 发布

茶不予

最新推荐文章于 2024-07-22 14:10:07 发布

阅读量98

点赞数

分类专栏： web前端开发技术文章标签：学习 html

本文链接：https://blog.csdn.net/m0_67294756/article/details/133931545

版权

web前端开发技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML基础

html文档由头部 head和主体body两个部分组成，

代码与页面效果展示：

<!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>
    <p>疯狂星期四</p>
    <h3>惊爆价</h3>
    <hr size=3 color="red">
    <a href="http://www.kfc.com.cn/kfccda/index.aspx">肯德基订餐</a>
    <script>
        document.write("请点击左侧");//向页面输入信息
    </script>
</body>
</html>

头部head

标题tltle

基本语法：

<title>标题信息显示在浏览器的标题栏</title>

tiitle标记应用

<!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>
</head>
<body>
    页面标题在浏览器的标题栏上
</body>
</html>

元信息META标记

meta标记用来描述一个html网页文档的属性

主体body

body标记

基本语法

<body>内容</body>

运用实例

<!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 type="text/css">
        p{text-indent: 2em;/*首行缩进两个字符*/}
    </style>
</head>
<body text="blue">
    <h3 align="center">学习秘诀</h3>
    <hr color="green">
    <p>每一个裂缝都是为透出光而努力</p>
</body>
</html>

body标记属性

设置bodys标记属性可以改变页面的显示效果

基本语法

<body text="#123" color="red">

应用实例

<!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>
        div{background: #99cccc;width: 500px;height: 150px;}
    </style>
</head>
<body background="red" bgcolor="green">
    <div id="" class="" >
        <p>欢迎访问网站，我们为您提供服务</p>
    </div>  
</body>
</html>

综合实例

以欢度中秋为题设计一个网页

<!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 type="text/css">
        div{text-align: center;/*文本居中*/}
    </style>
</head>
<body bgcolor="skyblue">
    <h2 align="center">欢度中秋</h2>
    <hr size="12" color="blue" width="100%">
    <p align="left" >&nbsp;&nbsp;&nbsp;&nbsp;当月光倒入河心，星辰与思念对语，团圆有了深意。</p>
    <div id="" class="">
        <img src="tupian1.jpg" width="300" height="200">
        <img src="tupian2.jpg" width="300" height="200">
    </div>
    <hr size="10" color="green"width=100%>
    <p align="center">中秋快乐</p>  
</body>
</html>

希望这篇文章给大家能够带来帮助！

作者：茶不予

欢迎大家点赞与关注!

如有错误，请多多指正