常用标签和样式

来源：互联网发布：win10怎么连接usb网络编辑：程序博客网时间：2024/06/11 22:24
图片随意找个代替就行

<!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>
0 0