HTML表格及css基础
1、表格简介
表格由 table
标签来定义。每个表格均有若干行(由tr
标签定义),每行被分割为若干单元格(由td
标签定义)。 类比:excel表格&网页中的表格
2、表格的作用
之前,web开发人员过去也常常使用表格来完成整个网页布局,结构嵌套复杂修改维护困难,现在已经被DIV+CSS布局所取代。
现在,用于显示、展示数据。(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系)
注意:现在HTML表格应该用于展现表格数据,而不是用来实现网页布局!
3、表格基本标签
table
语法: <table></table>
作用:定义表格
tr
语法: <tr></tr>
作用:定义表格中的行
td
语法: <td></td>
作用:定义表格数据(table data) 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
默认样式:内容水平居左,垂直居中
th
语法:<th></th>
作用:表示表头单元格,通常在行或列的开始处,定义行或列包含的数据类型
默认样式:字体加粗,内容水平居中,垂直居中
表格基本结构如下:
<table><tr><td>姓名</td><td>年龄</td></tr><tr><td>张三</td><td>18岁</td></tr><tr><td>王五</td><td>12岁</td></tr></table>
4、表格常用属性
4.1 table属性
语法:
<table width="1000" height="500" border="1" cellpadding="0" cellspacing="0">
width\height
作用:定义表格的宽或高
注:省略单位 默认px
border
作用:使用表格的边框属性可以显示一个带有边框的表格。
注意:如果不定义边框属性,表格将不显示边框。
cellpadding
作用:定义单元格中内容和边框之间的间距
cellspacing
作用:单元格和单元格之间的间距
4.2 td,th属性
语法:
<td width="100" height="100" align="center" valign="middle">
width\height
作用:定义单元格宽度、高度
注意:省略单位 默认px
align
作用:单元格水平方向的对齐方式
取值
left左对齐
center 居中对齐
right 右对齐
valign
作用:单元格垂直方向的对齐方式
取值
top顶对齐
middle居中对齐
bottom底部对齐
5. 表格结构标签
caption
语法:<caption></caption>
作用:定义表格的标题
默认样式:居中于表格之上
注意: caption 标签必须紧随 table 标签之后
thead
语法:<thead></thead>
作用:用于组合 HTML 表格的表头内容
tbody
语法:<thead></thead>
作用:用于组合 HTML 表格的主体内容
提示:一个表格允许包含多个<tbody>
tfoot
语法:<tfoot></tfoot>
作用:用于组合 HTML 表格的页脚内容
总结
每个表格只能定义一个标题<caption>
thead,tbody,tfoot通常配合适用,用于划分表格语义,实现长表格分步加载,或通过改变结构顺序,优先加载tbody
6. 合并单元格
rowspan
作用:跨行合并 语法:
<td rowspan="2"> 电话 </td>
colspan
作用:跨列合并 语法:
<td rowspan="2"> 电话 </td>
操作步骤
确定是合并行还是合并列
找到目标单元格,添加合并属性如:<td rowspan="2"> 电话 </td>
删除多余单元格
7. 表格总结
未定宽度的表格、单元格适应内容
同一行只识别一个高,取最大值
同一列只识别一个宽,取最大值
表格可以包含其他HTML标签以及表格
初识CSS
1、什么是CSS?
全称:
Cascading Style Sheets,通常称为CSS样式表或层叠样式表(级联样式表)。
作用:
为HTML标记语言提供了一种样式描述,即【设置HTML页面中的元素的位置、排版、样式外观等】 如文本内容(字体、大小、对齐方式等)、图片的外形(宽、高、边框等)。
2、CSS语法规范
CSS 规则由两个主要的部分构成:选择器、一条或多条声明。
选择器:通常是需要改变样式的 HTML 标签。
声明组:以大括号{}括起来。
每条声明由一个属性和一个值组成,属性与属性值之间以【冒号】分隔,用【分号】将每个声明分开。
3、CSS引入方法
当读到一个样式表时,浏览器会根据它来格式化 HTML 文档,插入样式表的方法有三种:行间样式表、内部样式表、外部样式。
3.1 行间样式
概述:
通过HTML元素的style属性设置样式称为行间样式
代码示例
<div style="width:100px;height:100px;background-color:red;">div</div>
注:任何HTML元素都可以设置行间样式
3.2 内部样式
概述:
在head标签的内部,由style标签包含的样式称为内部样式
代码示例
<head><style>css样式 </style>
3.3 外部样式
概述:
外部样式表是指将CSS编写在扩展名为.css 的单独文件中,使用link标签引用
新建外部样式表
头部标签内部使用link标签引用
<head><link rel="stylesheet" href="style.css"> </head>
说明
href="" 资源链接的地址
rel表示引入文件与当前文档的关系
stylesheet为样式表
3.4 总结
行间样式适用于某个元素拥有特殊样式时使用,结构表现【不分离】
内部样式适用于单个页面拥有特殊样式时使用,结构表现【半分离】
外部样式适用于多个页面拥有相同样式时使用,结构表现【相分离】
4、css注释
4.1 什么是注释
注释即对代码的解释和说明,不会被浏览器解析执行。
4.2 注释的语法
CSS中的注释以"注释以/*
开头,以*/
结尾,开始和结束中间为注释内容。
4.3 注释的作用
解释说明,标记不同代码节的开始 代码调试,用于在测试中临时禁用一段代码
4.4 生成快捷方式
ctrl + / 取消或添加
CSS选择器
1、什么是选择器
CSS选择器是CSS规则的第一部分,每个CSS规则都以一个选择器或一组选择器为开始
CSS选择器即用于“查找”(或选取)要设置样式的 HTML 元素的模式
选择器可以分为基础选择器、复合选择器
2、基本选择器
2.1 通配(通用)选择器
语法
*{ 样式声明;}
作用:匹配任意类型的HTML元素
实例演示:
<style> /* 页面上所有元素都被选择 */* {background-color:green;} </style> <body><p>p</p><div>div1</div><div>div2<div>div3</div></div> </body>
2.2 元素名称选择器
语法:
元素名称 {样式声明; }
作用:选择所有同一元素名称的所有元素
实例演示:
/* 选择body */ body{background-color:green; } /* 选择页面上所有的div */ div{width:100px;height:100px;background-color:red; } /* 选择页面上所有的p */ p{background-color: pink; }
2.3 类选择器
语法
HTML中通过class属性定义 如:
<div class="box"></div>
css中以点进行标识:
.类名 {样式声明; }
作用:选择所有带有指定类名的元素
多类名的使用
语法:空格隔开
实例演示:
<style> .box{background-color:red; } .size{width:100px;height:100px; } </style> <body><p class="box size">p</p> <div class="box">div1</div><div>div2<div class="box">div3</div></div> </body>
2.4 id选择器
语法
HTML中通过id属性定义
如:
<div class="box"></div>
css中以点进行标识:#
#id名称 { 样式声明; }
作用:选择所有带有指定类名的元素
实例演示:c
#box{background-color:red; } <div id="box">div1</div>
注意:具有唯一性,一般用于页面唯一性的元素如头部、底部等,经常和 JavaScript 搭配使用。
2.5 类与id的命名规则
见词知义,尽量用英文
始终建议以字母开头,可以包含数字、字母、下划线等
不要以数字开头
多个单词可以以驼峰式(newsCont)、中划线连接(news_cont)、下划线连接(news-cont)等
2.6 总结
总结使用频率
基础选择器中最常用是类选择器
id用于页面中唯一模块
元素名称选择器定义的全局样式,单独使用要慎重
*号通常用于重置样式【最不常用】
总结id与类的区别
基础选择器的优先级
对比
渗透调试工具的使用
F12/右键-检查
左边是 HTML 元素结构,右边是 CSS 样式
Ctrl+滚轮 可以放大、缩小开发者工具代码大小
Ctrl + 0 复原浏览器大小
右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色
如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误
如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误
如果有样式,但是样式被中划线贯穿,说明可能存在书写顺序 或优先级问题
结论
最终排序:id(身份证号是XX的学生)> 类(名叫王小帅的学生) >元素名称(所有男生) > *(所有学生)
选择范围越精确,优先级越高
HTML表格及css基础相关推荐
- 和前端撕出逼格,撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
- CSS基础笔记(w3school)
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
- html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
- html笔记(一)html4+css2.0、css基础和属性、盒模型
w3c 官网 这里是 html4 的内容 大标题 小节 一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径 二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
- DIV+CSS基础教程
DIV+CSS基础教程 第一节 了解DIV+CSS 一.什么是DIV+CSS DIV元素是html(超文本语言)中的一个元素,是标签,用来为HTML文档内大块(block-level)的内容提供结构 ...
- CSS基础必备知识点01
CSS基础必备知识点 CSS(Cascading Style Sheme), 层叠样式表或级联样式表,简称样式表.它的作用是给HTML网页设置外观或者样式.其中外观或者样式指的是:HTML网页中的文字 ...
- html css基础页面,一、必知HTML基础
一.必知HTML基础-CSS教程系列 在学习CSS制作知识之前,我们必须需要认识的HTML什么基础知识. 1.搞清浏览器作用 - TOP 浏览器主要作用是浏览网页作用,在DIV+CSS制作开发 ...
- CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
最新文章
- 【python】Python中给List添加元素的4种方法分享
- php-fpm:No pool defined解决方法
- 7月15号day7总结
- aix linux ftp,在AIX下安装配置FTP服务器
- python字符的大小比较_python中字符串怎么比较大小
- 05NumPy--5.2创建NumPy数组
- http协议包头分发一些理解
- C++学习(四六六)Multiple parse contexts are available for this file
- 世界上有没有正五面体?
- D11:Chickens and Rabbits(鸡兔同笼问题,附题解)
- 永远做重要而不紧急的事
- jq ajax传参的两种方式
- 假期读书|《老人与海》读后感
- Ubuntu 平台的防火墙关闭命令
- 无需转动魔方即可判断魔方拼装错误的完整方法
- 7-28 实验3_11_鸡兔同笼吗? (100 分)
- Redis 之 subscribe 订阅模式封装
- Tableau的雷达图和凹凸图
- 伯恩斯新情绪疗法--学会反驳自我批评--移情法
- 贝索斯、比尔盖茨和库克认为你应该阅读的7本书