第三次笔记

chen_zhi_yu

已于 2023-11-17 20:40:42 修改

阅读量82

点赞数

文章标签：笔记

于 2023-11-17 20:37:38 首次发布

本文链接：https://blog.csdn.net/chen_zhi_yu/article/details/134470508

版权

表格标签：
用<table border="表格边框粗细px" width="表格总宽" height=“表格总高” cellspacing=“表格空隙”>表格</table>

单元格会有跨越多行或多列的情况，这要通过colspan属性和rowspan属性设置，前者表示单元格跨越的栏数，后者表示单元格跨越的行数。它们的值都是一个非负整数，默认为1。

<table border="1px" width="400px" height="200px" cellspacing="0">
<caption><strong>学员信息表格</strong></caption> #表格标题
<thead>
<tr>
<th>年级</th> #th的字体比td的字体粗
<th colspan="2">姓名</th> #跨两列
<th>学号</th>
<th colspan="2">班级</th> #跨两列
</tr>
</thead>
<tr>
<td rowspan="2">高三</td>
<td colspan="2">迪丽热巴</td>
<td>110</td>
<td colspan="2">三年级二班</td>
</tr>
<tr>
<td colspan="2">古力娜扎</td>
<td>120</td>
<td colspan="2">三年级三班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="5">你们很优秀</td>
</tr>

<th>学号</th>
<th colspan="2">班级</th>
</tr>
</thead>
<tr>
<td rowspan="2">高三</td> #跨两列
<td colspan="2">迪丽热巴</td>
<td>110</td>
<td colspan="2">三年级二班</td>
</tr>
<tr>
<td colspan="2">古力娜扎</td>
<td>120</td>
<td colspan="2">三年级三班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="5">你们很优秀</td>
</tr>

<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

表单补充：
<label><input type="radio" name="sex" id="">label能扩大光标选中范围，点文字也能选中此选项</label>

iframe标签：
能嵌套页面
<iframe src="网址" frameborder=“1” width=“规定页面宽度”></iframe>

用来选择上传的文件。代码如下：
<input type="file" name="myfile">

<input type="color"> 是HTML5中提供的一种用于选择颜色的表单控件。它会在浏览器中呈现一个颜色选择器，允许用户通过拖动滑块或输入颜色代码来选择颜色。
示例代码：
<label for="colorPicker">选择颜色：</label>
<input type="color" id="colorPicker" name="colorPicker">

其余：加下拉框在select后面加属性multiple

加提示文字：
<input type="text" name="邮箱" placeholder="请输入您的邮箱">

css的三种引入方式：
1、行内式引入，使用style属性在特定的HTML标记内插入CSS代码
2、嵌入式引入，在文档head部分的style标签对中放入CSS代码
3、外联引入，将CSS代码放入外部CSS文件中，使用link标签或“@import”规则引入html文档中。
引入css，一般用外联的方式引入css
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

1.1 基础选择器

通配符（*）选择器

语法：*{属性：属性值；}

说明：*表示页面中所有的元素（标签），我们常用来重置样式。

实例：

margin: 0;

padding: 0;

}

id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id 选择器和派生选择器
在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar p {
   font-style: italic;
   text-align: right;
   margin-top: 0.5em;
   }
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，
尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，
比如 <em></em> 或者 <span></span>，不过这样的用法是非法的，因为不可以在内联元素 <span> 中嵌入 <p>

一个选择器，多种用法
即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：
#sidebar p {
   font-style: italic;
   text-align: right;
   margin-top: 0.5em;
   }

#sidebar h2 {
   font-size: 1em;
   font-weight: normal;
   font-style: italic;
   margin: 0;
   line-height: 1.5;
   text-align: right;
   }
在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，
同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

和 id 一样，class 也可被用作派生选择器：
.fancy td {
   color: #f60;
   background: #666;
   }
在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

元素也可以基于它们的类而被选择：
td.fancy {
   color: #f60;
   background: #666;
   }
在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
<td class="fancy">你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。
那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意，class 为 fancy 的段落也不会是带有灰色背景的橙色，
当然，任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，
这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。