1、HTML列表标签
1、无序列表
各列表项之间没有次序,各项之间为并列关系
-
语法
<ul><!-- 列表容器 --> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul>
-
特性
-
宽度默认撑满整个父元素
-
高度默认由内容撑开
-
独立成行
-
自带外间距
-
自带内填充(内间距)
-
自带列表符,去掉自带列表符 li{ list-style: none; }
-
-
css属性
-
list-style-type属性:列表符类型
-
circle空心圆|disc实心圆,默认值|square实心正方形|none去掉列表符
-
-
-
应用场景 : 新闻列表 、导航 、商品列表
-
注意:ul的直接子元素只能是li
2、有序列表
有排列次序
-
语法
<ol><!-- 列表容器 --> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> <ol start="6" reversed type="I"> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ol> strat属性:开始值 写在 <ol start="6"></ol>开始标签中 reversed属性:倒叙 写在 <ol start="6" reversed></ol>开始标签中 type属性(了解) - `a`: 小写字母 - `A`: 大写字母 - `i`: 小写罗马数字 - `I`: 大写罗马数字 - `1`: 数字 默认值
-
特性 与无序列表基本一致
-
应用场景: 有序的列表
3、自定义列表
自定义列表 语法: <dl> 列表容器 <dt>词专业名</dt> <dd>对专业名次的解释</dd> </dl> 在浏览器中,dd标签的内容会缩进显示 <dl> <dt>词专业名</dt> <dd>对专业名次的解释</dd> <dt>web大前端</dt> <dd>HTML、CSS、JAVASCRIPT</dd> </dl> > 浏览器显示,dd标签的内容会缩进显示 - 特性 - 宽度默认撑满整个父元素 - 高度默认由内容撑开 - 独立成行 -dl dt dd都是块级标签 dl标签自带外间距 dd标签自带外间距 浏览器显示,dd标签的内容会缩进显示 典型应用 - 名词解释、分类(大分类-细节的类别)
2、语义化
1、什么是HTML语义化?
用合适的标签去匹配相应的内。(例如标题用 h1-h6、段落用 p 标签,合理得给图片添加alt属性等)
2、语义化的好处有哪些?
-
在没有 CSS 的情况下,页面也能呈现出很好地内容结构。
-
使代码更具【可读性】,便于团队开发和维护。
-
有利于SEO搜索引擎优化(在搜索框搜索内容的时候更好更快的搜到)
-
有利于【用户体验】(例如:title、label 标签、alt属性的灵活运用)
-
3、表格
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> 表包含三部分:table tr 单元格(th td) table:表格的容器 tr:表格的行 th:表头单元格,默认文字加粗,水平方向和垂直方向居中显示 td:普通单元格,默认水平居左,垂直方向居中 注意:1.表格必须嵌套在table中 2.单元格必须嵌套在tr行标签中 3.在单元格内可以添加任意的标签和内容
-
4、表格常用属性
table属性
-
width\height
-
语法
<table width="1000" height="500" border="1" cellpadding="0" cellspacing="0">
-
作用:定义表格的宽或高
-
注:省略单位 默认px
-
-
border
-
作用 :使用表格的边框属性可以显示一个带有边框的表格。
-
注意:如果不定义边框属性,表格将不显示边框。
-
-
cellpadding
-
作用:定义单元格中内容和边框之间的间距,单位是像素,可以省略
-
-
cellspacing
-
作用:单元格和单元格之间的间距,默认值为2,单位是像素,可以省略 cellspacing='0',单元格之间的距离为0
-
-
borderColor:
-
改变边框的颜色
<table border="1" borderColor="#ffa500"></table>
-
td,th属性
语法:
<td width="100" height="100" align="center" valign="middle">
-
width\height
-
作用:定义单元格宽度、高度
-
注意:省略单位 默认px
-
-
align
-
作用:单元格水平方向的对齐方式
-
取值
-
left左对齐
-
center 居中对齐
-
right 右对齐
-
-
-
valign
-
作用:单元格垂直方向的对齐方式
-
取值
-
top顶部对齐
-
middle居中对齐
-
bottom底部对齐
-
-
5、合并单元格
-
rowspan
-
作用:跨行合并 语法:<td rowspan="2"> 电话 </td>
-
-
colspan
-
作用:跨列合并 语法:<td rowspan="2"> 电话 </td>
-
-
操作步骤
-
1.确定是合并行还是合并列
-
2.找到目标单元格,添加合并属性及合并单元格的数量如:<td rowspan="2"> 电话 </td>
-
3.删除多余单元格
-
1、表格结构标签
-
caption
-
语法:<caption></caption>
-
作用:定义表格的标题
-
默认样式:居中于表格之上
-
注意: caption 标签必须紧随 table 标签之后
-
-
thead
-
语法:<thead></thead>
-
作用:用于组合 HTML 表格的表头内容
-
-
tbody
-
语法:<tbody></tbody>
-
作用:用于组合 HTML 表格的主体内容
-
提示:一个表格允许包含多个<tbody>
-
-
tfoot
-
语法:<tfoot></tfoot>
-
作用:用于组合 HTML 表格的页脚内容
-
-
总结
-
每个表格只能定义一个标题<caption>
-
thead,tbody,tfoot通常配合适用,用于划分表格语义,实现长表格分步加载
-
注意:在一个表格中只能有一组thead/tfoot标签,可以有多个tbody标签
-
<table border="1"> <caption>人口普查表</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>爱好</th> <th>年龄</th> <th>联系方式</th> </tr> </thead> <tbody> <tr> <td>白云</td> <td>女</td> <td>种地</td> <td>57</td> <td>3456</td> </tr> <tr> <td>黑土</td> <td>男</td> <td>吹牛</td> <td>58</td> <td>6543</td> </tr> </tbody> <tfoot> <tr> <td>人数总计:</td> </tr> </tfoot> </table>
2、表格特性
-
未定宽度的表格、单元格适应内容(单元格的宽高由内容撑开)
-
同一行的单元格,高度只会识别一个,取高度最大值
-
同一列的单元格,宽度只会识别一个,取宽度最大值
-
表格可以包含其他HTML标签以及表格
3、CSS选择器
1、什么是CSS?
全称
Cascading Style Sheets 通常称为CSS样式表或层叠样式表(级联样式表)
作用
-
为HTML标记语言提供了一种样式描述
-
即【设置HTML页面中的元素的位置、排版、样式外观等】 如文本内容(字体、大小、对齐方式等)、图片的外形(宽、高、边框等)
CSS语法规范
CSS 规则由两个主要的部分构成:选择器、一条或多条声明。
选择器:通常是需要改变样式的 HTML 标签。
声明组:以大括号{}括起来。
每条声明由一个属性和一个值组成,属性与属性值之间以【冒号】分隔,用【分号】将每个声明分开。
2、CSS引入方法
当读到一个样式表时,浏览器会根据它来格式化 HTML 文档,插入样式表的方法有三种:行间样式表,内部样式表,外部样式
1、行间样式
概述:
-
通过HTML元素的style属性设置样式称为行间样式
-
放在开始标签的内部
-
代码示例
<div style="width:100px;height:100px;background-color:red;">div</div>
-
适用场景:
单个html标签需要设置样式
优缺点:比较直观;相同样式需要重复定义,造成代码冗余;作用范围小,不利于后期代码维护;代码不能复用,结构与样式变现不分离
-
注:任何HTML元素都可以设置行间样式
2、内部样式
-
概述:
在head标签的内部,由style标签包含的样式称为内部样式
-
语法:用style标签对包住样式
-
适用场景:
1.单个HTML文档需要设置样式
优缺点:
相对于行间样式,代码能够复用,作用范围大于行间样式的范围;
结构与表现半分离
-
代码示例
<head> <style> </style> </head>
3、外部样式
-
概述
-
外部样式表是指将CSS编写在扩展名为.css 的单独文件中,使用link标签引用
-
位置:在外部新建的css文件中书写样式(后缀名为.css的文件);
在head标签的内部使用link标签引入在外部新建的css文件
-
头部标签内部使用link标签引用
<head> <link rel="stylesheet" href="./style.css"> </head>
-
说明
-
href="" 资源链接的地址
-
rel表示引入文 件与当前文 档的关系
-
stylesheet为样式表
-
rel="stylesheet"是将本HTML页面和css文件关联起来
-
-
-
-
适用场景:
多个HTML文档具有相同样式时
优缺点
1.适用范围广,可以使用代码的复用;
2.便于修改和维护代码;
3.结构与表现彻底分离
总结:
-
行间样式适用于某个元素拥有特殊样式时使用,结构 表现【不分离】
-
内部样式适用于单个页面拥有特殊样式时使用,结构表现【半分离】
-
外部样式适用于多个页面拥有相同样式时使用,结构表现【相分离】
3、css注释
什么是注释 :
注释即对代码的解释和说明,不会被浏览器解析执行
注释的语法:
CSS中的注释以"注释以/*开头,以*/结尾,开始和结束中间为注释内容 /* css 注释 */
生成快捷方式:
ctrl + /
4、什么是选择器
-
CSS选择器是CSS规则的第一部分,每个CSS规则都以一个选择器或一组选择器为开始
-
CSS 选择器即用于“查找”(或选取)要设置样式的 HTML 元素的模式
-
选择器可以分为基础选择器、复合选择器
5、基本选择器
1、通配(通用)选择器
-
语法 *{ 样式声明 }
-
作用:匹配任意类型的HTML元素
<style> /* 页面上所有元素都被选择 */ *{ background-color:green; } </style> <body> <p>p</p> <div>div1</div> <div>div2 <div>div3</div> </div> </body> /* 一般用于清除浏览器的默认样式 */ margin: 0; padding: 0; 权重是0
2、元素名称(标签)选择器
-
语法: 元素名称{ 样式声明 }
-
作用:选择所有同一元素名称的所有元素
/* 选择body */ body{ background-color:green; } /* 选择页面上所有的div */ div{ width:100px; height:100px; background-color:red; } /* 选择页面上所有的p */ p{ background-color: pink; }
3、类选择器
-
语法
-
HTML中通过class属性定义
<div class="box"></div>
-
css中以点进行标识:.
.类名 { 样式声明; } .box{ background-color:red; }
-
-
作用:选择所有带有指定类名的元素
-
多类名的使用(词列表)
-
语法:空格隔开
-
<p class="box box1 box2">p</p>
-
4、id选择器
-
语法
-
HTML中通过id属性定义
如:
<div class="box"></div>
-
css中以点进行标识:#
#id名称 { 样式声明; } #box{ background-color:red; }
-
-
作用:选择所有带有指定类名的元素
注意:具有唯一性,一般用于页面唯一性的元素如头部、底部等,经常和 JavaScript 搭配使用。
类与id的命名规则
-
见词知义,尽量用英文;
-
始终建议以字母开头,可以包含数字、字母、下划线等
-
不要以数字开头
-
多个单词可以以驼峰式(newsCont)、中划线连接(news-cont)、下划线连接(news_cont)等