常用标签和样式

最新推荐文章于 2024-08-21 15:28:06 发布
yesteryou
最新推荐文章于 2024-08-21 15:28:06 发布
阅读量765
点赞数
分类专栏： HTML5 文章标签： html5
本文链接：https://blog.csdn.net/yesteryou/article/details/69680935
版权
HTML5 专栏收录该内容
11 篇文章 0 订阅
订阅专栏
图片随意找个代替就行

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>常用标签和样式</title>
    <!-- 
        开始标签的内部书写的内容我们称之为属性
        (任何标签都可以添加自己的属性)
        style标签用来定义css样式
     -->
    <style type="text/css">
        /*
        找到body标签，给body添加样式，样式的代码放在标签元素的{}内，
        并且{}内是样式属性和属性值组成的键值对。
        特别注意：属性后的冒号以及属性值后的分号，都是英文格式并且不能省。
        */
        body{
            height:1000px;
            background-color: red;
            /*
            颜色可以使用16进制的颜色表示法。
            “#”后面，从左到右，分别代表红绿蓝三元素所占的比例。
            每一位的数字最小为0，最大为f
            样式是可以相互覆盖的！
            */
            background-color: #112233;
            /*
            颜色也可以用rgb方法调和一个颜色，r: red,g: green,b: blue,
            每一种颜色的色值是【0~255】
            表示为：
            */
            background-color: rgb(100,200,255);
            /*rgba: red, green, blue, alpha(透明度，取值【0.0~1.0】，即为百分比*/
            background-color: rgba(100,200,255,0.8);
            /*
            设置渐变色，
            linear-gradient:线性渐变色;
            linear:线性的，
            gradient：渐变的
            to xxx：控制方向。
            top：上
            right：右
            bottom：下
            left：左
            */
            /*background: linear-gradient(to bottom,red,#123,green)*/
            /*径向渐变*/
            /*background:radial-gradient(red,blue,green);*/
        }

        /*多个元素可以共享同一个样式代码，只需要用逗号隔开*/
        h1,h2{
            /*设置文本的对齐方式，center：居中对齐*/
            text-align: center;
        }

        strong{
            color:#ff1122;
        }

        a{
            color:blue;
        }


        p{
            /*
            text-indent: 设置文本的首行缩进。2em代表缩进两个字体的宽度。
            em是单位，代表当前字体的宽度
            */
            text-indent: 2em;
            /*
            line-height: 设置行高，即每一行的高度。
            rem指的是当前文档（页面）根标签——html标签元素所设置的字体的大小。
            默认16px。
            */
            line-height: 1.8rem;
        }

        div{
            /*设置宽高。div本身宽度是和屏幕宽度一样，即占满一整行*/
            /*width: 500px;*/
            height: 280px;
            /*
            设置背景图片，url需要的是一张图片的地址。
            背景大，图片小
            */
            background-image: url(11.jpg);
            /*设置背景重复。no-repeat：不重复*/
            background-repeat: no-repeat;
            /*
            设置背景尺寸。contain:刚好包含在内。
            但是这种包含是根据最大的高度或是宽度让其刚好位于背景框内。
            同时为了保证图片不变形，所以不一定宽高都会刚好合适。

            background-size: 100% 100%;
            100%代表宽度和高度都刚好铺满。但是这种设置方式会导致图片被拉伸，进而变形。
            */
            background-size: contain;

            /*设置背景图的位置。position：位置。*/
            background-position: center;

            /*background-color: red;*/

        }

        img{
            width:100%;
        }

        /*对section设置定宽居中。即宽度固定，自动居中。*/
        section{
            width: 60%;
            /*margin设置外边距。
            第一个值是：上下距离。
            第二个值：左右距离。auto代表自动计算。
            另外，margin可以对四个方向的距离单独设置：顺序是上、右、下、左
            */
            /*margin: 0 auto;*/
            margin:0 auto 0 auto;
        }



    </style>

</head>
<body>
    <!-- 
        h1用来定义一个大标题，会呈现粗体的文字
        h1到h6依次定义字号越来越小的粗体标题
        h标签都有一些默认样式（其实绝大部分标签元素都有一些默认样式）：
        margin（外边距）font（字体）等。
     -->
    <h1>叙利亚毒气袭击致100死400伤 安理会或介入调查</h1>
    <h2>叙利亚毒气袭击致100死400伤 安理会或介入调查</h2>
    <!-- 
        p标签用来定义一个段落
        strong用来起到强调作用，会形成加粗的效果。
        a标签是一个超链接标签。anchor：锚点，定位点。
        超链接标签有一个href属性：Hyper Reference，用来指定超链接到的页面地址URL。
        target:目标，用来设置在哪个位置打开新的网页。
        _self:代表在本页面打开。
        _blank:代表在新的空白页面打开。

        手动地键入空格，多个空格会被合并成为一个。可以使用特定字符。
         
        nbsp:non-breaking-space 即非换行空格。使用该换行符可能会造成文本两端不能对齐的情况。
        　是中文格式的空格。
     -->
    <p> 　　<strong>海外网4月5日电  </strong>据外媒消息，<a href="http://country.huanqiu.com/syria" target="_blank">叙利亚</a>西北部反对派控制的城镇疑似毒气袭击事件，造成至少100人死亡，约400人受伤，死者包括了11名儿童。叙利亚人权观察组织相信，此次袭击是叙利亚政府军的战机投掷毒气弹所为。但叙利亚军方消息人士否认曾经使用化武。<a href="http://country.huanqiu.com/russia" target="_blank">俄罗斯</a>军方也否认在当地发动空袭。<a href="http://country.huanqiu.com/un" target="_blank">联合国</a>表示，周三将举行紧急会议，商讨该次化武袭击事件。</p>

    <p>综合英国天空新闻、美国福克斯新闻等消息，叙利亚西北部一个反对派控制的城镇，当地时间周二疑遭多架战机投掷毒气弹。总部设在伦敦的叙利亚人权观察及医疗和救济联盟（UOSSM）将死亡人数调升至100人，11名儿童证实遇害，另有400人受伤。数小时后，当地一间小型战地医院亦都遇袭，整幢被摧毁。事件扰乱叙利亚国内和平进程，反对派指控空袭是由政府军发动，要求联合国调查。</p>

<!-- div：division：区域 -->
<div></div>

    <p>救援组织白头盔（White Helmets）在现场协助，用水喉向沾到毒气的民众洒水。该组织称，暂未能确定战机是否来自叙利亚政府还是其盟友俄罗斯，亦未能确认毒气的性质。叙利亚反对派则指此次空袭是内战6年来最严重的毒气攻击，要求联合国安理会召开紧急会议调查事件。欧盟外交与安全政策高级代表莫盖里尼（Moghelini）则率先表示，叙利亚总统阿萨德（Assad）需负上最大责任。</p>

<!-- img标签用来在页面中插入一张图片
    src属性:source，用来设置图片的资源路径。
    alt属性用来设置图片加载失败后，显示的文字说明内容，
    该内容一般是图片的描述信息，而不应该是图片加载失败的提示信息，
    因为这样不利于被搜索引擎识别和检索到。

    title属性：用来设置鼠标悬停时弹出的文字说明信息。

    img标签是一个单标签，没有结束标签。
    单标签在页面中的作用一般是用来插入、应用或是设置一些内容。

    img插入图片之后，图片的大小就是原图大小。另外大小也可以自定义调节。
    一般调节大小的时候，宽高只用设置其中一个即可，另外一个会随着宽度或者高度等比例拉伸，防止图片变形。
-->

<!-- section：标签的作用和div一样，只是语义上的区别。
    section：小节。用来定义一小节内容。
 -->
<section>
    <img src="10.jpg" alt="叙利亚" title="叙利亚毒气袭击致100死400伤">
</section>


</body>
</html>