11月15日笔记

1. table标签用来定义表格，整个表格包含在<table>和</table>标签中；

 <table border="1px" width="300px" height=“100px” cellspacing="0" bgcolor="pink">

border只控制最外层边框   cellspacing 属性规定单元格之间的空间。

tr标签用来定义表格中一个行，它是单元格的容器，每行可以包含有多个单元格，由<tr>和</tr>标签表示；

td标签和th标签用来定义单元格，所有单元格都在tr标签内，每个单元格由一对<td>和</td>标签或一对<th>和</th>标签表示，具体的表格内容放置在这一对td标签或th标签之中，其中th标签中的内容默认以粗体、居中的方式显示。

<table>

    <tr>

        <th>1行1列的内容</th>

        <th>1行2列的内容</th>

        …

    </tr>

    <tr>

        <td>2行1列的内容</td>

        <td>2行2列的内容</td>

        …

    </tr>

    …

</table>

<table是<tr的上层标签

<tr必须在一个<table</table里面,它不能单独使用,相当于<table的属性标签.

<table标示一个表格,<tr标示这个表格中间的一个行，<td、<th标示行中的一个列,需要嵌套在<tr</tr中间。

<caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，（但是，它同样可以被 CSS 样式化，所以，它同样可以出现在任何一个一个相对于表格的做任意位置。）

实例

<thead> 标签定义表格的表头。

 thead 元素应该与 tbody 和 tfoot 元素结合起来使用。 tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

 <thead height="100px" align="center" valign="top">

1.align属性趋向于左右对齐(水平对齐)，其值包含：left、right、center

2.valign属性趋向于垂直对齐，其值包含：top（对内容进行上对齐）、bottom（对内容进行下对齐）、middle（对内容进行居中对齐）、baseline（与基线对齐）

colspan 属性规定单元格可横跨的列数。

rowspan 属性规定单元格可横跨的行数。

（2）<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

（3）multiple 属性规定输入字段可选择多个值。

如果使用该属性，则字段可接受多个值。

<select name="city" id="" multiple>

            <option value="西安">西安</option>

            <option value="南京">南京</option>

        </select>

（4）<dialog> 元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。

open: 指示这个对话框是激活的和能互动的。当没有设置 open 属性时，对话框不应该显示给用户。推荐使用 .show() 或 .showModal() 方法来渲染对话框，而不是使用 open 属性。

<dialog open>

    <form action="#">

        <input type="text" placeholder="请输入用户名">

        <button>提交</button>

    </form>

 <details> 元素可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。<summary> 元素可为该部件提供概要或者标签。

展现组件通常在屏幕上使用一个小三角形，旋转（或扭转）以表示打开/关闭的状态，三角形旁边有一个标签。<summary> 元素的内容被用来作为展示小部件的标签。

<details>

    <summary>自我介绍</summary>

    祖国的花朵

</details>

（5）<div> 可定义文档中的分区或节（division/section）。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

用法

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）

以下元素支持 tabindex 属性：<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。

contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。

<link> 标签定义文档与外部资源的关系。

<link> 标签最常见的用途是链接样式表。

1. 基本选择器：标签选择器、id选择器、类选择器（.类名{ }）、通配选择器

标签选择器，是所有带有某种标签的都生效。这里以p为例，也就是所有的带有p标记的都会这样的样式

CSS代码:

  p{color:red;}

HTML代码:

<p>我是标签小红</p>

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

类别选择器：如：#main #sidebar #footer #header

注意id选择器是唯一的，因为只有id="yy"的才有这种样式，而一个页面里元素的Id必须是唯一的，id选择器以#开头用法是：id=""

CSS代码:

  #testid{color:red;}

HTML代码:

<div id="testid">我是ID小红</div>

1.后代选择器

  格式： E F { css样式 } （E和F都是选择器）

  作用：访问到E下的所有的F元素（无论嵌套多少层）。

  符号： 空格。

2.子代选择器

  格式： E>F {css样式 } （E和F都是选择器）

  作用：访问到E下的所有的F元素（只访问下一级，只有一层）。

  符号： >。

复合选择器

·复合选择器可以更准确、更高效的选择目标元素（标签）

·复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

·常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器

伪类选择器共有四种：:link，:vistied，:hover和:active。
:link
作用：向未被访问的链接添加样式。

:vistied
作用：向已被访问的链接添加样式。

:hover
作用：当鼠标悬浮在元素上方时，向元素添加样式。

:active
作用：向被激活的元素添加样式。

（9）::before 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

下面的例子在每个 <h1> 元素的内容之前插入一幅图像：

::after 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

下面的例子在每个 <h1> 元素的内容之后插入一幅图像：

:nth-child(n)

选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。