HTML零散知识点补充

3的4次方

已于 2022-08-21 22:23:40 修改

阅读量163

点赞数

分类专栏：个人笔记 Java Web 文章标签： html 前端 css

于 2022-05-26 18:33:32 首次发布

本文链接：https://blog.csdn.net/m0_58699417/article/details/124990172

版权

个人笔记同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

Java Web

4 篇文章 0 订阅

订阅专栏

HTML零散知识点补充

本文作为HTML部分的零散知识点补充

注意：本地环境下，标签加不加/都能正确显示。但是线上测评机会要求写上/。

常用属性

属性的先后顺序为： type -- id -- class -- name -- value ，其他需要添加的属性最后写。

align	bgcolor	text-align
	width	height

注意：

控制表格内文本方向的属性，本来表格有自带的属性align也是控制文本方向的，不过现在浏览器大多不支持，都用 CSS 的另一个属性text-align来代替。

结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Uy7BJpr-1661091799922)(https://data.educoder.net/api/attachments/169904)]

<!DOCTYPE HTML>  
<HTML>  
  <head>  
    <meta charset="utf-8">  
    <title>自我简介</title>  
    <meta name="description" content="张三的自我简介网站">  
    <meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">  
  </head>  
  <body>  
    <h1 align="center">自我简介</h1>  
    <h2>简介</h2>  
    <p>在这里简单的描述一下你自己吧。</p>  
  </body>  
</HTML>

声明文档格式：DOCTYPE

首先，第一行：

<!DOCTYPE HTML>

声明了该文档是HTML 5的文档。

因为在Web世界里，有很多各式各样的文档类型，所以我们首先需要做的便是声明该文档是HTML，以便浏览器正确显示网页。

如果你想声明为HTML 4.01的文档可以这样写：

<!DOCTYPE `HTML` PUBLIC "-//W3C//DTD `HTML` 4.01 Transitional//EN"   "http://www.w3.org/TR/`HTML`4/loose.dtd">

因为本实训以HTML 5作为标准，所以统一使用第一种方式。

提示：

为什么与HTML4.01相比HTML 5声明中没有数字"5"呢？
因为W3C认为之前的文档声明太过复杂，正好借此机会移除版本号，这样声明就更加简化；
在背景知识中，你能够了解更多HTML版本的历史信息。

根元素：HTML 元素

然后，<HTML>元素告知浏览器其本身是一个HTML文档。

除去第一行外，其余的页面内容都应该包含在<HTML>元素中，所以它也被称为根元素。

头元素：head 元素

与属性会给元素增添附加信息一样，head元素能为整个网页增添更多信息。可以用在head中的标签有<base>, <link>, <meta>, <script>, <style>, 以及 <title>。在之后的学习中，你将逐渐的了解它们。

网页标题元素：title

本例网页主要内容是“自我简介”，所以title也设置为“自我简介”。
title元素的内容即网页标题，它是一个网页必需的元素之一。

<title>的内容一般作为网页标签名，写法如下：

<title>标题内容</title>

title内容显示位置：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yWhNpq9Q-1661091799923)(https://data.educoder.net/api/attachments/170144)]

元信息元素：meta

meta元素提供元数据信息，主要包括：

页面编码；
网页标题；
网页描述；
网页关键词。

这些信息，一方面可用于告知浏览器如何展示页面，另一方面可以提供给搜索引擎检索。
因为搜索引擎会通过meta元素的name和content属性来检索页面，所以当我们加入了合适的关键字和描述内容时，页面就更容易被搜索引擎发现。

编码格式：charset

<meta charset="utf-8">

该行定义了浏览器解析网页文档时使用的编码方式。通常，我们使用utf-8编码以支持各国语言。

描述：description

描述信息使用一句话告知搜索引擎我们网页的主要内容是什么。

通常description的写法如下：

<meta name="description" content="一句话描述网页内容">

关键词：keywords

同理，关键词信息使用多个并行的关键词告知搜索引擎我们网页内容的关键词信息。

通常keywords的写法如下：

<meta name="keywords" content="关键词一,关键词二,关键词三">

主体元素：body 元素

<body>元素是一个文档的主体，文档内容都包含在<body>元素中，最终呈现在网页上。

表格

宽高

设置属性的先后顺序为border -- width -- height -- cellpadding --cellspacing

用width和height来定义表格的宽和高**（这里的width和hegiht单位是px，可加可不加。）**

width和height的值还可以写为百分比（%），这样表格就可以随着文档宽高的变化而变化

边框

虽然设置了宽、高，可是内容是紧挨着边框的，怎么使表格的内容和边框有间距呢？

这里用到了表格的另一个属性cellpadding，它规定了单元边沿与其内容之间的空白。

这里用图来说明，如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y0SpMzhN-1661091799924)(https://data.educoder.net/api/attachments/209320)]

灰色部分表示cellpadding，它的值表示灰色部分的宽度。

例子如下：

<table border="2" cellpadding="20">  
    <tr>  
        <td>姓名</td>  
        <td>年龄</td>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>18</td>  
    </tr>  
</table>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iyVIhvQL-1661091799924)(https://data.educoder.net/api/attachments/209202)]

前面表格看起来就好像有两个边框一样，怎么让它变成一条边框呢？

这里用到了表格的另一个属性cellspacing，它规定了单元格之间的空间。

这里用图来说明，如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nKLQjlvM-1661091799925)(https://data.educoder.net/api/attachments/209215)]

双箭头的大小表示cellspacing属性的值。

cellspacing值为0，实现的效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JNHSLYDf-1661091799925)(https://data.educoder.net/api/attachments/209322)]

标题

用<caption>标签来创建表格标题，需要注意的是它的位置：紧随<table>标签之后。

<table border="2" cellspacing="0" cellpadding="10">  
    <caption>班级成绩</caption>  
    <tr>  
        <td>姓名</td>  
        <td>年龄</td>  
    </tr>  
    <tr>  
        <td>张三</td>  
        <td>18</td>  
    </tr>  
</table>

效果如下： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lGZUwuGA-1661091799926)(https://data.educoder.net/api/attachments/209326)]

合并单元格

1、用<td>标签的rowspan属性来实现跨行，它规定了单元格可横跨的行数。

<table border="2" cellspacing="0" width="200" >  
    <tr>  
        <td rowspan="3">科目</td>  
        <td>语文 </td>  
        <td>80</td>  
    </tr>  
    <tr>  
        <td>数学</td>  
        <td>70</td>  
    </tr>  
    <tr>  
        <td>英语</td>  
        <td>75</td>  
    </tr>  
</table>

分析一下代码，第一行第一列的 <td rowspan="3">科目</td>表示科目横跨了3行，所以第二行和第三行的第一列就不写了，第二列和第三列不变。

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ptvi11Tn-1661091799927)(https://data.educoder.net/api/attachments/209382)]

用<td>标签的colspan属性来实现跨列，它规定了单元格可横跨的列数。

<table border="2" cellspacing="0" width="200">  
    <tr>  
         <td colspan="3">科目 </td>  
    </tr>  
    <tr>  
        <td>语文</td>  
         <td>数学</td>  
        <td>英语</td>  
    </tr>  
    <tr>  
        <td>70</td>  
         <td>80</td>  
        <td>75</td>  
    </tr>  
</table>

分析一下代码，第一行第一列的 <td colspan="3">科目</td>表示科目横跨了3列，所以第二列和第三列就不写了，其他的不变。

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xhcqf6Yd-1661091799927)(https://data.educoder.net/api/attachments/209385)]

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<style>
    body{
        margin:30px;
    }
    table{
        /*居中对齐*/
        text-align:center;

    }
</style>
    <table border="2px" cellpadding="6" cellspacing="0" width="100%">
        <caption>本周财政计划</caption>
        <tr>
            <td colspan="2" rowspan="2">项目</td>
            <td colspan="2">本周发生</td>
            <td rowspan="2">备注</td>
        </tr>
        <tr>
            <td>收入</td>
            <td>支出</td>
        </tr>
        <tr>
            <td rowspan="3">收入</td>
            <td>贷款收回</td>
            <td>8700</td>
            <td>0</td>
            <td></td>
        </tr>
        <tr>
            <td>内部转款</td>
            <td>6000</td>
            <td>0</td>
            <td></td>
        </tr>
        <tr>
            <td>收入合计</td>
            <td>14700</td>
            <td>0</td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="3">支出</td>
            <td>采购支出</td>
            <td>0</td>
            <td>5000</td>
            <td></td>
        </tr>
        <tr>
            <td>工资支出</td>
            <td>0</td>
            <td>7000</td>
            <td></td>
        </tr>
        <tr>
            <td>支出合计</td>
            <td>0</td>
            <td>12000</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gstSyRE7-1661091799928)(https://data.educoder.net/api/attachments/209671)]

表单

单选

<input type="radio"/>来创建一个单选框，需要注意的是：同一组单选框的name属性的值要一样才能实现单选。

多选

使用<input type="checkbox"/>来创建一个多选框，需要注意的是：同一组多选框的name属性的值要一样才是同一组。需要注意的是：

下拉列表

使用<select>标签用来创建下拉列表，<option>标签定义列表中的可用选项。

默认显示选择项：想要默认显示的<option>里添加selected属性，selected属性的用法和前面介绍的checked属性一样，只要写了就会选中。

文本输入框

<textarea>标签可以定义多行的文本输入框。用宽（width）和高（height）来定义输入框的大小，用maxlength来定义文本区域最大能输入的字符数。

`<label>` 标签

为元素定义标注（标记）。当用户选择该标签时，浏览器就会自动将焦点转到和标签绑定的表单控件上。

标签的 for 属性应当与绑定元素的 id 属性相同，不是name。

注：属性的先后顺序为：type -- id -- name

<form action="demo_form.php">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>

通用属性（单选多选都可以用）

默认选择项checked属性：

只要有checked属性就会被默认选中，不管它的值是什么；
不想被默认选中，不添加checked属性就可以了。

<input type="checkbox" name="hobby" checked="checked"/>足球  <br>  
<input type="checkbox" name="hobby" checked="false"/>篮球   <br>  
<input type="checkbox" name="hobby" checked/>乒乓球