HTML基础-知识点总结2-CSDN博客

本文链接：https://blog.csdn.net/2502_90411587/article/details/149513414

八、关键字

<meta name="keywords" content=" ">

keywords意思就是关键字，后面content中的就是包含的关键字，通过关键字能够提高搜索率让别人更容易找到你，有时候也会通过h1标签找到你。content中的内容可以是一些词，也可以是一句话。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- keywords意思就是关键字
    后面content中的就是包含的关键字，通过关键字能够提高搜索率让别人更容易找到你
    有时候也会通过h1标签找到你 -->
    <meta name="keywords" content="国内手机性价比排行">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

根据关键词“电脑”搜索结果，图片1中用红色框框出来的紫色的字就是标题，也就是title中的内容，该内容的关键字已经粘贴在上面代码中。

九、网页描述

<meta name="description" content=" ">

图片1中的黄色框框出来的内容就是网页描述的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta name="description" content="国内手机性价比排行【京东正品行货，全国配送，心动不如行动，立即购买享受更多优惠哦！】">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

十、网页重定向

<meta http-equiv="refresh" content="秒数; url=将要跳转的网址">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- content="秒数; url=将要跳转的网址网址" -->
    <meta http-equiv="refresh" content="5; url=http://www.baidu.com">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

十一、链接外部样式表（CSS）

<link rel="stylesheet" href=" ">

link标签引入自己创建的css内容 rel中内容是固定的 href表示css文件的位置，建议使用相对定位（即从文件自身位置出发寻找css文件）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- link标签引入自己创建的css内容 rel中内容是固定的 href表示css文件的位置，建议使用相对定位-->
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

十二、设置icon图标

图片2中蓝色框框起来的是title标签中的内容，红色框框起来的就是icon图标。如果未设置icon图标默认是浏览器图标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 修改icon图标 rel中内容是固定的 href表示icon图标的位置，建议使用相对定位-->
    <link rel="icon" href=" ">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

十三、表格

1.表格结构及相关属性作用

1.1表格标准结构

表单需要用到table标签，嵌套tr标签，tr标签嵌套td标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表格标准格式，但可以不用写<thead></thead>、<tbody></tbody>、<tfoot></tfoot> -->
    <table>
        <thead>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

1.2 表格相关属性作用

表单相关属性作用
属性名称	属性作用描述
border	表示边框，如果不加单位1默认为2px
width	表示表格宽度
height	表示表格高度
borderColor	表示表格边框颜色,采用驼峰式写法（多个单词连写时从第二个词开始首字母大写）
cellspacing	表示单元格与单元格之间的距离
cellpadding	表示单元格边框与单元格内容之间的距离
align	表示表格的位置(使用在table中),表示内容的位置(使用在td/tr中),包括左中右:left/center/right
valign	表示表格内容的位置，用在td/tr中，包括上中下：top/center/bottom
bgcolor	表示表格背景颜色（是backgroundColor的缩写）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
    border          表示边框，如果不加单位1默认为2px
    width           表示表格宽度 
    height          表示表格高度
    borderColor     表示表格边框颜色,采用驼峰式写法（即多个单词连写时从第二个单词开始首字母大写）
    cellspacing     表示单元格与单元格之间的距离
    cellpadding     表示单元格边框与单元格内容之间的距离
    align           表示表格的位置（使用在table中），表示内容的位置（使用在td/tr中），包括左中右：left/center/right
    valign          表示表格内容的位置，用在td/tr中，包括上中下：top/center/bottom
    bgcolor         表示表格背景颜色（是backgroundColor的缩写）
    -->
    <table border="1"  width="200" height="200" borderColor="skyblue" cellspacing="0" cellpadding="" align="center" bgcolor="pink">
        <tr>
            <td valign="bottom">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

运行结果：

2.表格合并


表格的合并
colspan	横向合并
rowspan	纵向合并

colspan和rowspan后面的数字表示合并的单元格数量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="200" height="200" borderColor="skyblue" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td rowspan="2">4</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td colspan="2">9</td>
        </tr>
    </table>
</body>
</html>

运行结果：

3.表格标题和表头

标题：<th></th>

表头：<caption></caption>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="200" height="200" borderColor="skyblue" cellspacing="0" cellpadding="0" align="center">
        <caption>表头</caption>
        <tr>
            <th colspan="4">标题</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>

运行结果：

十四、表单

1.form标签

表单的作用就是收集信息。一般称之为form表单，因为所有的表单输入框都要放到form标签中。表单域指form标签中的内容。

form标签属性及描述
属性名	属性描述
active	处理信息，告诉浏览器，发送信息到哪里
method	信息的发送方式，get/post：get是明文发送，通过地址栏传输数据，安全性较低，post密文传输，不会在地址栏显示，安全性较高

2.label标签

label标签没有特殊语义，用来关联label标签里面的文字和文本输入框，使点击文字时可以获得文本输入框的焦点。关联的方式有两种：

第一种：通id名进行关联，在label标签种添加for属性，for属性的属性值就是关联表单的id名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label for="x">用户名：</label>
        <input type="text" id="x">
    </form>
</body>
</html>

第二种：去掉for属性，嵌套文字和文本输入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label for="x">
            <span>用户名：</span>
            <input type="text">
        </label>
    </form>
</body>
</html>

3.input标签

3.1 输入框

input标签表示文本输入框，其中的一些基本的属性以及其属性作用，较为常用的几个属性：type、maxlength、name、value、placeholder、readonly、disabled

input标签相关属性及描述
属性名	属性描述
type	文本框	text 表示文本输入框，输入内容时不会隐藏； password 表示密码输入框，输入内容时会被隐藏；
	选择框	checkbox 表示多选框； radio 表示单选框；
	按钮	submit 表示该文本输入框变成提交按钮（value没有属性值时默认值为提交）； button 表示普通按钮； file 表示上传文件 image 表示图片按钮，src='图片地址'； reset 重置按钮；
maxlength	最大输入字符长度
name	给后端传输数据时存储数据的名称
value	如果type的属性值是text和password，value中的属性值表示文本框中的初始值，如果type的属性值是submit，value中的属性值表示按钮上的文字
placeholder	文本框内的提示文字，颜色暗，只要往文本框内输入内容该提示文字消失
readonly	只读，为readonly='readonly' 的缩写，添加该属性后文本输入框只能获取焦点，不能输入数据
disabled	禁用，为disabled='disabled' 的缩写，添加该属性后文本输入框禁止使用，不能输入数据也不能获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label for="">
            <span>账号：</span>
            <input type="text" name="" value="" placeholder="请输入账号">
        </label>
        <br>
        <label for="">
            <span>密码：</span>
            <input type="password" placeholder="请输入密码" maxlength="10">
        </label>
        <br>
        <label for="">
            <span>密码：</span>
            <input type="text" value="只读" readonly>
        </label>
        <br>
        <label for="">
            <span>密码：</span>
            <input type="text" value="禁用" disabled>
        </label>
        
    </form>
</body>
</html>

运行结果：

3.2 选择框

3.2.1单选框

type属性的属性值为radio，使用name属性将多个单选归为一类，使这一类只有一个被选择，name相同时才能够实现单选效果。checked为默认选中选项。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label>
            <span>小学</span>
            <input type="radio" name="study">
        </label>
        <label>
            <span>初中</span>
            <input type="radio" name="study">
        </label>
        <label>
            <span>高中</span>
            <input type="radio" name="study" checked>
        </label>
        <label>
            <span>大学</span>
            <input type="radio" name="study">
        </label>
    </form>
</body>
</html>

运行结果;

3.2.2多选框

type属性为checkbox，checked为默认选中选项，也使用name属性将多选归为一类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <label>
            <span>A</span>
            <input type="checkbox" name="choice">
        </label>
        <label>
            <span>B</span>
            <input type="checkbox" name="choice">
        </label>
        <label>
            <span>C</span>
            <input type="checkbox" name="choice" checked>
        </label>
        <label>
            <span>D</span>
            <input type="checkbox" name="choice" checked>
        </label>
    </form>
</body>
</html>

运行结果:

3.3按钮

3.3.1提交按钮

提交按钮用于表单的提交，value属性没有属性值时默认值为提交

3.3.2普通按钮

普通按钮两种写法：<input type="button" value="普通按钮">、<button>普通按钮</button>，第二种更为常用，普通按钮点击后没有反应，一般与JS配合使用。

3.3.3文件上传按钮

文件上传按钮用于传输文件

3.3.4重置按钮

重置按钮能够一键重置表单为设置的初始默认值

3.3.5图片按钮

图片按钮与提交按钮的效果一样，能够起到美化表单的作用，因为其它按钮最多只能改变背景的颜色、文字的大小颜色等，但是图片按钮能够使图片拥有按键的效果，src属性中的属性值为图片地址。提交数据时会将点击图片的x，y坐标一起发送过去。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <!-- 提交按钮 -->
        <input type="submit">
        <!-- 普通按钮 -->
        <input type="button" value="普通按钮">
        <button>普通按钮</button>
        <!-- 文件上传按钮 -->
        <input type="file">
        <!-- 重置按钮 -->
        <input type="reset">
        <!-- 图片按钮 -->
         <input type="image" src="">
    </form>
</body>
</html>

3.4多行文本框和下拉列表

3.4.1多行文本框

<textarea name="" id=""></textarea>在多行文本框中使用maxlength属性能够限制多行文本框输入的内容长度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <textarea name="" id="">多行文本框</textarea>
    </form>
</body>
</html>

3.4.2下拉列表

需要用到select标签，嵌套option标签，使用先拉列表option必须要对应value，value必须写，静态页面除外。select标签中的multiple属性能够将下来菜单变成多选（需要配合Alt键使用），但是一般不用。<optgroup></optgroup>将下拉菜单进行分组，label属性的属性值在下来列表中不能够被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <select name="province">
            <option value="hlj">黑龙江</option>
            <optgroup label="黑龙江">
                <option value="heb">哈尔滨</option>
                <option value="heb">鹤岗</option>
                <option value="heb">绥化</option>
            </optgroup>
            <option value="hlj">山东</option>
            <option value="hlj">吉林</option>
            <option value="hlj">辽宁</option>
        </select>
        
        <select name="province" multiple>
            <option value="hlj">黑龙江</option>
            <optgroup label="黑龙江">
                <option value="heb">哈尔滨</option>
                <option value="heb">鹤岗</option>
                <option value="heb">绥化</option>
            </optgroup>
            <option value="hlj">山东</option>
            <option value="hlj">吉林</option>
            <option value="hlj">辽宁</option>
        </select>
    </form>
</body>
</html>

运行结果：

4.表单分组

fieldset标签能够给表单进行分类，不同的种类放到不同的fieldset标签中即可，表单分类后的分组名称使用legend标签，与fieldset的关系为嵌套关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>选择题</legend>
        </fieldset>
        <fieldset>
            <legend>填空题</legend>
        </fieldset>
    </form>
</body>
</html>

运行结果：