html .3

最新推荐文章于 2024-10-05 17:10:47 发布

excuse12_

最新推荐文章于 2024-10-05 17:10:47 发布

阅读量80

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/excuse12_/article/details/126942816

版权

表格介绍

表格由table标签来定义。每个表格均有若干个行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。

表格的作用 web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难，现在已经被DIV+CSS布局所取代。

现在，用于显示、展示数据。(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系)

注意：现在HTML表格应该用于展现表格数据，而不是用来实现网页布局！

表格基本标签

table 格式<table></table> 作用定义表格

tr 语法<tr></tr> 作用定义表格中的行

td 语法<td></td> 作用：定义表格数据单元格可以包含文本、图片、列表、段落、表单、

水平线、表格等等。默认样式：内容水平居左，垂直居中

th 语法<th></th> 作用：表示表头单元格，通常在行或列的开始处，定义行或列包含的数据类型

默认样式：字体加粗，内容水平居中，垂直居中

表格基本结构： <table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

表格常用属性

宽高的单位是px 给宽高设值的可以不加px

border 作用：使用表格的边框属性可以显示一个带有边框的表格。

cellpadding 定义单元格中的内容和边框之间的间距

cellspacing 定义单元格和单元格之间的间距

td、th属性宽高、水平对齐方式、垂直对齐方式

水平对齐方式取值：left左对齐 center居中对齐 right右对齐

垂直对齐方式取值：top顶对齐 center居中对齐 bottom底对齐

表格结构标签

caption 语法<caption></caption> 作用定义表格的标题默认样式：居中于表格之上

注意：caption标签必须紧随table标签之后

thead 语法<thead></thead> 作用用于组合HTML表格的表头内容

tbody 语法<tbody></tbody> 用于组合 HTML 表格的主体内容。提示：一个表格允许包含多个<tbody> tfoot语法：<tfoot></tfoot> 作用：用于组合 HTML 表格的页脚内容

总结

每个表格只能定义一个标题<caption>

thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载，或通过改变结构顺序，优先加载tbody

合并单元格

rowspan 作用：跨行合并

colspan 作用：跨列合并

表格总结

未定宽度的表格、单元格适应内容

同一行只识别一个高，取最大值

同一列只识别一个宽，取最大值

表格可以包含其他HTML标签以及表格

什么是CSS?

全称：

Cascading Style Sheets，通常称为CSS样式表或层叠样式表（级联样式表）。

作用：

为HTML标记语言提供了一种样式描述，即【设置HTML页面中的元素的位置、排版、样式外观等】如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）。

CSS语法规范

CSS 规则由两个主要的部分构成：选择器、一条或多条声明。

选择器:通常是需要改变样式的 HTML 标签。

声明组：以大括号{}括起来。

每条声明由一个属性和一个值组成，属性与属性值之间以【冒号】分隔，用【分号】将每个声明分开。

CSS引入方法

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档，插入样式表的方法有三种：行间样式表、内部样式表、外部样式

行间样式 <div style="width:100px；">div</div> 任何HTML元素都可以设置行间样式

内部样式 <head> <style>css样式</style>

外部样式表是指将CSS编写在扩展名为.css 的单独文件中，使用link标签引用

href="" 资源链接的地址

rel表示引入文件与当前文档的关系

stylesheet为样式表

总结

行间样式适用于某个元素拥有特殊样式时使用，结构表现【不分离】

内部样式适用于单个页面拥有特殊样式时使用，结构表现【半分离】

外部样式适用于多个页面拥有相同样式时使用，结构表现【相分离】

css注释

与html注释不一样 html注释是 <-- 注释内容 --> css注释是 /* 注释内容 */

注释即对代码的解释和说明，不会被浏览器解析执行。注释的快捷键： ctrl + /

什么是选择器

CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始

CSS选择器即用于“查找”（或选取）要设置样式的 HTML 元素的模式

选择器可以分为基础选择器、复合选择器

通配（通用）选择器 *{ } 作用：匹配任意类型的HTML元素页面上所有元素都被选择

标签选择器标签名{} 作用：选择所有同一元素名称的所有元素

类选择器 <div class="box"></div> 在style里写 .类名{}

id选择器 具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。

类与id的命名规则

见词知义，尽量用英文

始终建议以字母开头，可以包含数字、字母、下划线等

不要以数字开头

多个单词可以以驼峰式（newsCont）、中划线连接（news_cont）、下划线连接（news-cont）等

总结

总结使用频率

基础选择器中最常用是类选择器

id用于页面中唯一模块

*号通常用于重置样式【最不常用】

元素名称选择器定义的全局样式，单独使用要慎重

总结id与类的区别

基础选择器的优先级

选择范围越精确，优先级越高

对比
渗透调试工具的使用
- F12/右键-检查
  - 左边是 HTML 元素结构，右边是 CSS 样式
  - Ctrl+滚轮可以放大、缩小开发者工具代码大小
  - Ctrl + 0 复原浏览器大小
  - 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色
  - 如果点击元素，发现右侧没有样式引入，极有可能是类名者样式引入错误
  - 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
  - 如果有样式，但是样式被中划线贯穿，说明可能存在书写顺序或优先级问题
- 结论
  
  最终排序：id（身份证号是XX的学生）> 类（名叫王小帅的学生） >元素名称（所有男生） > *(所有学生)