- 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> 标签最常见的用途是链接样式表。
- 基本选择器:标签选择器、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 可以是数字、关键词或公式。