本文介绍了HTML的列表类型，包括有序列表、无序列表和定义列表的使用及属性。详细讲解了超链接的场景和表格的创建，如基本表格标签、合并单元格的方法以及表格的语义化。此外，还探讨了HTML语义化的重要性，如便于团队开发、提升用户体验和利于SEO。最后，简要介绍了CSS的作用和三种引入方式，强调了外链样式的优点和基本语法。
html：
1、列表
1.1、有序列表
-
用来规定一些顺序重要，不能随意调整的项，比如排行榜
<ol type="A"> <li> ... </li> <li> ... </li> <li> ... </li> <ol> -
属性说明： type 属性用来规定编号类型 1 / A / a / I /i
1.2、无序列表
-
用来定义一些顺序不重要的项目 ，比如商品列表，导航
<ul type="square"> <li> ... </li> <li> ... </li> <li> ... </li> </ul> -
属性说明： type 属性用来规定列表项前面的标记风格 desc(实心圆)/circle(空心圆)/square(方块)
1.3、定义列表
-
用来解释一些专有名词或者术语的定义
<dl> <dt> 名词1 </dt> <dd> 解释1 </dd> <dd> 解释2 </dd> <dt> 名词2 </dt> <dd> 解释1 </dd> <dd> 解释2 </dd> </dl>
2、超链接
文字连接：
<a href="链接目标"> 文本 </a>
图片链接：
<a href="链接目标" > <img src="..."> </a>
使用场景：
<!-- 1、跳转到当前项目的其他页面 -->
<a href="./1、作业-京东退换服务.html"> 跳转到京东退换服务 </a>
<a href="../day01/4、图片.html">跳转到图片网页</a>
<!-- 2、跳转到其他网站的页面，比如友情链接 -->
<a href="https://www.baidu.com">去百度</a>
<a href="https://m.douban.com/time/column/206/?dt_time_source=douban-web_anonymous">豆瓣</a>
<!-- 3、锚点链接：跳转到当前页面的指定位置 -->
<div id="box"> ... </div>
<a hred="#box"> ... </a>
属性说明：
href="#": 用来规定跳转目标 ，如果暂时没有就添加 "#" 占位
target="_blank": 规定目标页面的打开方式，_self在当前窗口打开，_blank在新窗口中打开
title="文本"：规定鼠标悬停在连接上的提示文本
3、表格
- 表格早期用于网页的整体排版布局，但是现在只适用于一些局部报表，数据表格，不适用于整个页面的布局。
3.1、基本表格标签
<table>
<tr>
<th> ... </th>
<th> ... </th>
<th> ... </th>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
</tr>
</table>
- table :定义整个表格
- tr: 定义表格的行
- td : 定义表格的普通单元格
- th :定义表头单元格，文本默认加粗居中
3.2、复杂表格标签
- caption: 给表格定义标题，紧跟在table开始标签之后
- thead : 表格的头部
- tbody: 表格的主体
- tfoot: 表格的底部
这几个标签是为了增强表格的语义化，使表格结构清晰，但是浏览器支持情况不统一，所以一般不用写
3.3、合并单元格
- colspan=“n”: 横向合并若干列
- rowspan=“n”: 纵向合并若干行
3.4、表格相关属性
-
table标签属性：
border : 给table以及里面的单元格都添加边框 border="0"没有边框 border="1"添加1px边框 width="300" ： 整个表格的宽度 height="300"： 整个表格的高度 cellspacing="0": 单元格之间的间距 cellpadding="10":单元格的内边距 -
table的样式属性
border-collapse: - collapse; 去掉单元格之间的间距并且相邻边框合并 - separate; 单元格独立 border-spacing: 设置单元格之间的间距 -
表格特点：
表格设置固定宽高时，单元格会按照内容的比例去分配行高和列宽，也可以通过给单元格设置 width 和height属性去调整
4、语义化 标签
什么是语义化？
- 语义化就是用合理的html标签以及属性去规定网页上的内容，比如标题 用h标签，段落用p , 给重要的图片添加alt属性。
语义化好处？
- 当没有css样式时，页面也能呈现出相对良好的结构
- 语义化使代码结构清晰，方便团队开发维护
- 语义化有利于用户体验
- 语义化有利于SEO(搜索引擎优化) （语义化有利于网站和搜索引擎建立良好的沟通，爬虫可以抓取到更多的有效信息，爬虫依赖标签确定关键字的权重）
5、CSS 简介
- css是层叠样式表 （Cascading StyleSheet）
- 用来美化网页
5.1、 css 三种引入方式
5.1.1、行内样式
-
在开始标签上添加style属性，把样式代码写在style属性里面
-
作用范围只是当前标签，导致代码不能复用，产生大量冗余代码，也使网页的结构不够清晰
<div style="width:100px;height:100px;background-color:red;"></div>
5.1.2、内嵌样式
-
在head标签之间添加style标签，在style标签之间写入css样式语法
-
作用范围是当前页面，在项目中也比较少用
<head> ... <style> /* 这里写css的语法 */ p{ width: 150px; height: 150px; background-color: yellow; } </style> </head>
5.1.3、外链样式
-
在head标签之间添加一个link标签，通过link标签的href属性引入 .css文件 ，把css样式代码写在.css文件中
-
外链样式可以使结构和表现代码完全分离，并且一个css文件可以作用于多个网页的，所以可以规定一些公共样式，项目中推荐使用外链样式
<head> ... <link rel="stylesheet" href="./xxx.css"> </head>
5.2 css的基本语法
h2{
width: 200px;
height:200px;
background-color: lime;
}
选择器{
样式声明1;
样式声明2;
}
选择器{
样式声明1;
样式声明2;
}
- css基本语法由选择器和多组样式声明组成
- 每一组样式声明由 “属性名:值” 组成
注释:
/* css注释 */
5.3 类选择器
<div class="box"> ... </div>
<p class="box"> ... </p>
css选择器：
.box{ ... }
class属性的命名规则
- 可以包含数字、字母、下划线 _、连字符 -
- 不能以数字开头
- 建议使用有意义的英文单词,多个单词建议用 连字符或者下划线连接，或者用驼峰命名法
- 多个标签可以使用同一个类名
- 一个标签可以定义多个类名 ,多个类名通过词列表的方式定义 class=“box1 box2 box3”
扫一扫
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
