云计算笔记-03

表格标签的基本格式

    <table>

        <thead></thead>

        <tbody></tbody>

        <tfoot></tfoot>

    </table>

独立标签

<caption></caption>

表格标题标签

table

thead里的属性

align="center"	align水平位置    center居中    right向右   left向左
valign="top"	valign垂直距离   top向上   middle居中     bottom向下
tr里的属性	bgcolor="red"   单元格颜色

td

td里的属性

rowspan="2"	rowspan跨行
colspan="3"	colspan跨列
colspan="4" ="center"	跨列后居中

iframe嵌入广告页面

<iframe src="" frameborder="0"></iframe>

frameborder改为1会有边框

其余标签

<dialog></dialog>	dialog默认是关闭的
<details></details>	<summary>关于文章</summary>     关于文章的具体信息123

表单补充

<label></label>例如性别男这个字体也可以选中

特殊字符

 	空格
<	小于
>	大于

css的引入

css的引入方式

1	<div style=""></div>直接在后面加上style不常用
2	内嵌
3	外链新建一个.css与该产生联系 <link rel="stylesheet" href=".css">

基本选择器

标签选择器	div{         width: 200px;         height: 100px;         background-color: aqua;     }
类选择器	.box1{         background-color: aquamarine;     }
id选择器	#box1{         background-color: blue;     }
通配符选择器	*{         font-size: 30px;     }

    <div class="box1">盒子1</div>

    <p id="box1">我是一段文字</p>

    <div>盒子2</div>

包含选择器

包含选择器

子代选择器	.ul1>li{             background-color: aqua;         }
后代选择器	.ul1 li{         background-color: blueviolet;     }

<ul class="ul1">

        <li>101</li>

        <li>102</li>

        <li>103</li>

        <ul>

            <li>我是内层</li>

        </ul>

        <li>104</li>

        <li>105</li>

        <li>106</li>

        <li>107</li>

        <li>108</li>

        <li>109</li>

    </ul>

复合选择器

复合选择器

p, .box1{     color: aquamarine; }

<p>我是一段文字</p>

    <div class="box1">我是一个帅哥</div>

属性选择器

属性选择器

input[type="ur1"]{     background-color: aquamarine; } input[name]{     background-color: blue; }   以什么开头 input[type$="1"]{     background-color: cadetblue; } 以什么结尾 input[type$="1"]{     background-color: cadetblue; } 包含 input[type*="a"]{     background-color: chartreuse; }

    <form action="#">

        <input type="password" name="pwd" id="">

        <input type="text" id="">

        <input type="ur1" id="">

    </form>

伪类选择器

伪类选择器

鼠标划到时显示	a:hover+div{     width: 100px;     height: 100px;     background-color: aqua;     color: aqua; }（+代表下一个元素）
点击后变色	a:focus{     color: brown; }

    <a href="#">去百度</a>

    <div></div>

伪元素选择器

伪元素选择器

前面加上666	ul li::before {             content: "666";         }
前面加上666	ul li::after {             content: "666";         }
选中后变色	p::selection{             background-color: darkorange;         }

    <ul>

        <li>111</li>

        <li>222</li>

        <li>333</li>

    </ul>

    <p>qmwjdnjiwdq</p>