前端HTTML&CSS

最新推荐文章于 2021-01-17 21:18:05 发布

易择365

最新推荐文章于 2021-01-17 21:18:05 发布

阅读量366

点赞数

分类专栏： 08前端知识文章标签： HTML CSS

本文链接：https://blog.csdn.net/u013638465/article/details/103589489

版权

08前端知识专栏收录该内容

3 篇文章 1 订阅

订阅专栏

HTML&CSS基础认识:

<!DOCTYPE html>
<html lang="en">
<head>
    <!--这是网页字符编码 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>这是网页的标题</title>
<style>
    /* 标签选择器 */
        /* p{
            color: red;
        } */
     /* 类选择器 */
    .p1{
        color: red;
    }    
    .div3{
         /* 内容的宽和高 */
        width: 200px;
        height: 200px;
        /* 背景颜色 */
        background-color: gold;

        /* border: 1px solid black; */
        /* 边框 */
        border-top: 5px solid green;
        border-right: 15px solid black;
        border-bottom: 2px solid red;
        border-left: 10px solid blue; 
        padding-left: 20px;
        padding-right: 50px;
        padding-top: 100px;
        padding-bottom: 100px;

    }


    /* 层级/后代选择器 */
    div p{
            color: blue;
            
        }
    .p2{
        /* 字体大小 */
        font-size: 20px;
        /* 字体 */
        font-family: "Microsoft YaHei";
        /* 文字颜色 */
        color: green;
        /* 行高 */
        line-height: 400px;
        
    }

    .div2{
        width: 400px;
        height: 400px;

        border: 1px solid black;
        line-height: 400px;
        background-color: gold;

        /* margin-top: 100px;
        margin-left: 200px;
        margin-right: 100px;
        margin-bottom: 300px; */

        margin: 10px;
        }

</style>
</head>
<body>
    <h1>这是h1</h1>
    <h2>这是h2</h2>
    <h3>这是h3</h3>
    <h4>这是h4</h4>
    <h5>这是h5</h5>
    <h6>这是h6</h6>

    <img src="http://img.redocn.com/sheji/20170731/xiaoqingxinbayuenihaohaibao_8503071.jpg" alt="这是一张月份图片" title="你好月份">

    <a href="http://www.baidu.com" target="_blank">这是一个网页链接</a>

    <a href="http://www.baidu.com" target="_blank">
        <img src="http://img.redocn.com/sheji/20170731/xiaoqingxinbayuenihaohaibao_8503071.jpg" alt="这是一张月份图片" title="你好月份">
    </a>

    <p>
        这是一个段落标签<br>换行了<br>换行了
    </p>

    <div>大盒子,用来布局</div>
    <span>一段&nbsp;&nbsp;文字设置&lt;&gt;&amp;特殊格式</span>
    <br>
    <!-- &nbsp;   空格
    &lt;  <  小于号
    &gt;  >  大于号
    &amp;  &字符实体-->>
    <br>
    <br>
    <br>
    <h2>头条案例</h2>
    <div>
        <div>
            <h1>今日头条</h1>
            <a href="http://www.baidu.com">更多&gt;&gt;</a>
        </div>
        <img src="http://img.redocn.com/sheji/20170731/xiaoqingxinbayuenihaohaibao_8503071.jpg" alt="人工智能图片">
        <p>人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、
            延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。 人工智能是
            计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的
            方式做出反应的智能机器，该领域的研究包括机器人、
            语言识别、图像识别、自然语言处理和专家系统等.</p>
    </div>
    <br>
    <br>
    <br>
    <!--css行内写法-->
    <p style="color:red; background-color:gold">我是一个段落标签</p>

    <p class="p1">我是一个段落标签</p>
    <p class="p2">延伸和扩展人的智能的理论</p>     
    <div class="div2">
        哈哈哈               
    </div>
    <div class="div3">

        heheh
    </div>

</body>
</html>

易择365

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端HTTML&CSS

HTML&CSS基础认识:<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
复制链接

扫一扫

专栏目录