H5~标签、选择器

来源：互联网发布：ubuntu on windows 编辑：程序博客网时间：2024/06/04 20:39

*标签***********************************************

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Document</title></head><body><!-- 块属性标签  支持设置宽高 上下排列 （独占一行）--><div>用来划分区域</div><!-- 段落 用来放置文字 --><p>啦啦啦，啦啦啦，我是卖报的小行家</p><!-- 标题 h1~h6  h1标签只能写一个--><h1>大牡丹婚庆网</h1><h2>大牡丹婚庆网</h2><h3>大牡丹婚庆网</h3><!-- 列表标签 --><!-- 无序列表 --><ul><li>金陵十二钗</li><li>插图版金瓶梅</li><li>精装版金瓶梅</li><li>水浒传</li></ul><!-- 有序列表 --><ol><li>我的女神刘亦菲 </li><li>歌声天籁人又靓</li><li>小拳长锤我胸口</li><li>吹完就把我带走</li></ol><!-- 行属性标签  不可以设置宽高 自动排成一行（左右排列）--><!-- 超链接  href中写要连接到的地址--><a href="http://www.baidu.com">未满十八周岁禁止点击</a><!-- 放置文字 --><span style="100px;height: 100px;background-color: green;">宝强</span><span style="100px;height: 100px;background-color: green;">陈羽凡</span><!-- 行块属性标签  既支持宽高 又可以排成一行--><!-- ../ 返回上一级目录 img标签中的scr中写图片的绝对路径或者图片的服务器路径（网络地址） --><img style="width: 450px;height: 600px;" src="img/timg.jpg"><img style="width: 450px;height: 600px;" src="img/2.jpg" alt="图片飞走了"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1548448769,1982815204&fm=26&gp=0.jpg"></body></html>

************选择器****************************************************************************

<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">/*标签选择器语法：标签名{样式}*/div{width: 200px;height: 400px;background-color: yellow;}/*class选择器语法： "."+class名{样式}1.class选择器优先级比标签选择器高2.不同标签可以使用相同的class名、3.一个标签可以使用多个class名 ， 设置时用空格隔开*/.blue_div{background-color: blue;}.big_div{width: 500px;height: 500px;}.father{width: 200px;height: 200px;background-color: gray;}/*后代选择器语法：父选择器 子选择器{样式}class 选择器权重10标签选择器权重1后代选择器权重由父选择器和子选择器的权重相加*/.father div{background-color: yellow;}.father .son{width: 100px;height: 100px;background-color: black;}/*10个div 135是黄色，其他都是绿色，2 3 4宽高200px其他都是100px；*/</style></head><body><!-- <div>我是一个特别随便的div</div><div class="blue_div big_div">我是小二</div><div class="blue_div">我手机哦</div> --><div class="father"> <div class="son"></div></div></body></html>

补充：

<!-- 声明下面所有代码的规范 使用的是HTML5 --><!DOCTYPE html><html><head><!-- 设置编码格式 --><meta charset="utf-8"><!-- 标题 --><title>不可描述的网站</title></head><body><!-- div 标签 最常用的标签 无语义 ，常用来划分区域 -->    <div></div>    <div style="width: 300px;height: 400px;">    <div style="width: 300px;height: 30px;background-color: yellow;">    我是导航条</div>    <div style="width: 300px;height: 370px;background-color: pink;">我是内容</div>    </div></body></html>

标签补充：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>补充</title><style type="text/css">p{/*字体颜色*/color: red;/*字体的大小 默认是16px*/font-size:20px; }div{width: 500px;height: 700px;/*背景图片*/background-image: url(img/2.jpg);/*背景图片尺寸*/background-size: 100% 100%;}</style></head><body><div><p>英雄总是悲迟暮</p><p>自古红颜多薄命</p><p>那一抹风情</p><p>时光后，撩拨人心</p></div><!-- br 标签：换行 --><p>久旱逢甘霖（一滴）<br>他乡遇故知（前女友）<br>同房花烛夜 （人妖）<br>金榜题名时（重名）</p></body></html>

今天的分享到这，里面如有错误、等请大家积极留言，我会在第一时间与大家交流改错。

阅读全文

1 0

H5~标签、选择器

*******************************标签*****************************************************************************

补充：

标签补充：

*标签***********************************************