Web前端基础Day02

这是一个关于Web前端基础Day02思维导图，主要包含文本格式化标签、 HTML字符实体、 HTML表格等知识点。

Day02

• 【笔试题】语义化
  • 什么是语义化？
    • 合理的使用HTML标记（标签）以其特有的属性格式化文档内容
  • 语义化的好处？
    • 在没有css的情况下，页面也能呈现很好的结构内容
    • 更具可读性，便于团队开发和维护
    • 有利于SEO引擎优化
    • 有利于用户体验——（例如：title、label 标签、alt属性的灵活运用）
• 文本格式化标签
  • 1、em
    • 语义：强调
    • 特性：不独行；倾斜；
  • 2、i
    • 无语义
    • 特性：不独行；倾斜；
  • 3、strong
    • 语义：着重强调
    • 特性：不独行；加粗
  • 4、b
    • 无语义
    • 特性：不独行；加粗
  • 5、del
    • 语义：删除的内容
    • 特性：不独行；带中划线
    • 应用：删除的内容；商品价格
  • 6、span
    • 无语义
    • 常用于细节处理
  • 7、换行<br />
  • 8、扩展---上下标
    • 上标sup：常用于数学
    • 下标sub：常用于化学
• HTML字符实体
  • 五个需记忆的
    • 【空格】&-nbsp；
    • 【<】&-lt;
    • 【>】&-gt;
    • 版权【©】&-copy；
    • 注册商标【®】&-reg；
    • 元【&yen;】&-yen；
  • 完整实体字符参考手册 https://www.w3school.com.cn/tags/html_ref_entities.html
• HTML表格
  • table定义表格
    • 表格的作用：展示数据时使用表格，可以更加清晰明了
  • tr定义表格的行
  • td定义表格的单元格
    • 单元格中的文字内容默认是水平居左，垂直居中显示的，文字不加粗
  • th定义表格的标头
    • 单元格中的文字内容默认是水平、垂直居中显示，文字加粗
  • 【笔试题】th与td的区别
    • td：普通单元格， 文字水平居左，文字不加粗 th：表头单元格，文字水平居中，文字加粗
  • table的常用标签属性
    • border:设置边框，默认是px
    • width：设置表格的宽度 height:设置表格的高度
    • cellpadding: 设置单元格中文字与单元格边框之间的间距
    • cellspacing: 设置单元格与单元格之间的间距
  • th和td的常用标签属性
    • width：设置单元格的宽度 height：设置单元格的高度
    • align：设置单元格中的水平对齐方式 left| center | right
    • valign：设置单元格中的垂直对齐方式 top|middle| bottom
    • 合并单元格
      • rowspan：跨行合并
      • colspan：跨列合并
      • 操作步骤
  • 表格结构标签
    • caption：表格标题
      • 表格之上，水平居中； 紧跟table标签之后；
    • thaed：表格头部（页眉）
    • tbody：表格主体内容
    • tfoot：表格底部（页脚）
      • 总结：每个表格只能定义一个标题 thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载，或通过改变结构顺序，优先加载tbody
  • 表格总结
    • 未定宽度的表格、单元格适应内容
    • 同一行只识别一个高，取最大值
    • 同一列只识别一个宽，取最大值
    • 表格可以包含其他HTML标签以及表格
• CSS
  • 什么是CSS
    • 层叠样式表、样式表、css样式表、级联样式表
    • css的作用：美化网页，为网页提供排版、布局及大小操作
      • 为HTML标记语言提供了一种样式描述，即【设置HTML页面中的元素的位置、排版、样式外观等】如文本内容（字体、大小、对齐方式等）、图片的外形（宽、高、边框等）。
  • css语法：选择器{ 样式声明; }
    • 选择器是用来挑选需要添加css样式的元素
    • 样式声明是由属性和属性值构成的，属性和属性值之间用冒号隔开，多条样式声明之间用分号隔开。
  • 【笔试题】css三种引入方式
    • 1、行内样式、行间样式、内联式
      • <标签名 style="属性1：属性值1;属性2：属性值2;"></标签名>
      • 适用场景：某条元素拥有特殊样式时使用
      • 缺点:样式与结构没有分离
    • 2、内部样式、内嵌式
      • 书写位置： 找到head标签，在head标签的内部写style标签，在style标签中写css代码
      • 适用场景：单个页面设置样式时使用
      • 优缺点： 结构与样式部分分离
    • 3、外部样式
      • 书写位置： 在html的外部新建css文件存放css代码，css文件后缀名是.css 在html文件中我们需要引入css文件 <link rel="stylesheet" href="css文件的路径">
      • 适用场景： 多个页面拥有相同样式时使用，可实现代码的复用
      • 优点： 结构与样式完全分离
  • css注释
• CSS 表格
  • 表格的折叠边框：border-collapse表示折叠边框
    • 表格边框 指定 CSS 表格边框，使用 border 属性，通常定义td,th的边框属性。 表格会呈现双边框，是因为表和 th / td 元素有独立的边界。 table存在默认属性border-collapse：separate。
    • 取值：separate：边框独立（默认值） collapse：相邻边被合并（细线边框）
  • 单元格内容的垂直对齐：vertical-align
    • 常用值：top、middle（居中）、bottom