CSS基础 HTML列表 HTML表格

CSS基础

链接 a标签

• 自带属性：

  href: 链接的路径

  target:

  _self 在当前页跳转，默认就是

  _blank 在新页面跳转

• 设置所有链接默认在新页面打开

  • <base target="_blank">

  • 头部设置

• 局部链接

  • <!-- 空链接, 加#站位 -->
        <a href="#">点击</a>
        <!-- #加上要跳转位置对应的id值 -->
        <a href="#a">出师表</a>
        <a href="#b">岳阳楼记</a>
        <a href="#c">小石潭记</a>
        <h3 id="a">出师表</h3>

• 嵌套关系

  • a标签除了不能嵌套a标签之外，可以嵌套任何其他标签

HTML列表

• 无序列表

  • 1.块级标签

    2.结构ul>li

    3.前面默认自带圆点符号

    4.list-style-type: none; 可以去掉圆点符号

• 有序列表

  • 1.块级标签

    2.结构ol>li

    3.前面自带1、2、3、4

    4.list-style-type: none;可以去掉符号

  • 自带属性

    type

    1 A a I i

    start

    设置起始值

    reversed

    设置为倒数

• 自定义列表

  • 1.块级标签

    2.dl>dt或dd

    3.dd自带外边距

 

HTML表格

• 表格的基本结构

  • table: 表格最外层大标签

  • tr: 表格每一行

  • td: 表格每个单元格，默认居左

• 表格的完整结构

  • thead: 表格的头部，通常写表格每一列的标题

  • tbody: 表格的主体，写表格的数据

  • tfoot: 表格的底部，写表格的脚注

  • th: 表格标题的单元格。默认居中

  • caption: 表格的标题

• 表格自带属性

  • border: 表格的边框

  • cellpadding: 单元格的内容与边框之间的空间

  • cellspacing: 单元格与单元格之间的空间

  • align: 单元格的水平对齐方式

  • valign: 单元格的垂直对齐方式

• 表格的css属性

  • border-collapse

    • collapse: 表格设置为单一边框，cellspacing失效

• 表格的合并

  • 行合并

    • rowspan

    • 两行合并为一行，上下合并

  • 列合并

    • colspan

    • 两列合并为一列，左右合并

语义化

• 概念：运用合适的标签和特定的属性去格式化文档（合适标签和属性要用在合适的场合）

• 优点：

  • 易于开发和维护

  • 用户体验比较好

  • 易于seo,易于爬虫抓取关键字，能和搜索引擎建立良好的沟通。

  • 即使在没有css样式的情况下，也能呈现良好的效果