web笔记day01

最新推荐文章于 2023-12-14 17:12:21 发布

Serendipity_yuha

最新推荐文章于 2023-12-14 17:12:21 发布

阅读量51

点赞数

文章标签：前端 html5

本文链接：https://blog.csdn.net/Serendipity_yuha/article/details/126950473

版权

a标签利用锚点来跳转指定锚点处

      定义锚点
      <div id='锚点名称'></div>
      引用锚点
      <a href="#锚点名称">内容</a>

1、HTML列表

1、无序列表

各列表项之间没有次序，各项之间为并列关系

语法

    <ul><!-- 列表容器 -->
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>

特性
- ul 和 li 标签都是块级标签
- 宽度默认撑满整个父元素
- 高度默认由内容撑开
- 独立成行
- 自带外间距
- 自带内填充
- 自带列表符，去掉自带列表符 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 reversed></ol>开始标签中

type属性（了解）

- `a`: 小写字母

- `A`: 大写字母

- `i`: 小写罗马数字

- `I`: 大写罗马数字

- `1`: 数字 默认值


  <!-- 倒序和开始值 -->
  <!-- 从10开始进行倒序  10  9 ... -->
  <ol start="10" reversed>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
  </ol>

特性与无序列表基本一致
应用场景: 有序的列表

3、自定义列表

自定义列表

        语法：
     <dl>
         列表容器
        <dt>词专业名</dt>
        <dd>对专业名次的解释</dd>
    </dl>
    dl自定义列表、dt 自定义列表项、dd自定义列表项的注释（描述）

    在浏览器中，dd标签的内容会缩进显示

<dl>
        <dt>词专业名</dt>
        <dd>对专业名次的解释</dd>
        <dt>web大前端</dt>
        <dd>HTML、CSS、JAVASCRIPT</dd>
    </dl>

> 浏览器显示，dd标签的内容会缩进显示

- 特性
  - 宽度默认撑满整个父元素
  - 高度默认由内容撑开
  - 独立成行 
  -dl，dd默认自带外间距

典型应用
- 名词解释、分类（大分类-细节的类别）

2、语义化

1、什么是HTML语义化？

语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。（例如标题用 h1-h6、段落用 p 标签，合理得给图片添加alt属性等）

2、语义化的好处有哪些？

在没有 CSS 的情况下，页面也能呈现出很好地内容结构。
- 使代码更具【可读性】，便于团队开发和维护。
- 有利于SEO搜索引擎优化
- 有利于【用户体验】（例如：title、label 标签、alt属性的灵活运用）

3、HTML特殊字符

代码            效果           描述
&lt;             <         小于号或显示标记
&gt;             >         大于号或显示标记
&amp;            &         可用于显示其它特殊字符
&reg;            ®         已注册
&copy;           ©         版权
&trade;          ™         商标
&nbsp;                     不断行的空白
&yen;            ￥         人民币

一、HTML表格

学习目标

能够说出表格的作用
了解表格常用标签、属性的使用
能够使用表格完成网页中数据表格的布局

1、表格简介

表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。类比：excel表格&网页中的表格

2、表格的作用

之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代

现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系)
注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局

表格基本标签

3、表格基本标签

table
- 语法: <table></table>
- 作用:定义表格
tr
- 语法: <tr></tr>
- 作用:定义表格中的行
td
- 语法: <td></td>
- 作用：普通单元格，定义表格数据（table data）单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
- 默认样式:内容水平居左，垂直居中

语法:<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、表格结构标签

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>

6、合并单元格

rowspan
- 作用：跨行合并语法：<td rowspan="2"> 电话 </td>
colspan
- 作用：跨列合并语法：<td colspan="2"> 电话 </td>
操作步骤
- 1.确定是合并行还是合并列
- 2.找到目标单元格，添加合并属性及合并单元格的数量如：<td rowspan="2"> 电话 </td>
- 3.删除多余单元格