HTML相关知识【黑马程序员前端】

最新推荐文章于 2024-08-03 20:32:29 发布

1465235465@qq.com

最新推荐文章于 2024-08-03 20:32:29 发布

阅读量1.4k

点赞数

分类专栏： HTML/CSS/JavaScript/jQuery 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_48964052/article/details/125951658

版权

HTML/CSS/JavaScript/jQuery 专栏收录该内容

12 篇文章 10 订阅

订阅专栏

一、标题标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

二、段落标签

<p></p>

三、换行标签

<br>

四、水平线标签

<hr>

五、文本格式化标签

<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>

<!-- 推荐：表示的强调语义更强烈 -->
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>

六、图片标签

<img src="" alt="">

属性	说明
src	指定需要展示图片的路径
alt	替换文本，当图片加载失败时，才显示的文字
title	提示文本，当鼠标悬停时，才显示的文字
width	图片的宽度
height	图片的高度

七、音频标签

<audio src="" controls></audio>

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

八、视频标签

<video src="" controls></video>

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需要配合muted实现静音播放）
loop	循环播放

九、链接标签

<a href="">超链接</a>

target属性

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

<a href="https://www.baidu.com" target="_blank">百度一下</a>

十、列表标签

10.1 无序列表

<ul>
    <li></li>
</ul>

10.2 有序列表

<ol>
    <li></li>
</ol>

10.3 自定义列表

<dl>
    <dt>主题</dt>
    <dd>内容</dd>
</dl>

十一、表格标签

<table>
    <tr>
    	<td></td>
        <td></td>
    </tr>
</table>

相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

表格标题和表头单元格标签

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

<table border="1">
    <caption>
        学生成绩单
    </caption>
    <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>评价</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>100</td>
        <td>优秀</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>100</td>
        <td>优秀</td>
    </tr>
</table>

在这里插入图片描述

表格的结构标签（了解）

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

在这里插入图片描述

合并单元格

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

十二、表单标签

12.1 input 系列标签

<input type="text" />

type 属性值：

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单元框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

文本框

常用属性

属性名	说明
placeholder	占位符。提示用户输入内容的文本

value 属性和 name 属性

value属性：用户输入的内容，提交之后会发送给后端服务器。

name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义

密码框

常用属性

属性名	说明
placeholder	占位符。提示用户输入内容的文本

单选框

常用属性：

属性名	说明
name	分组。有相同 name 属性值的单选框为一组，一组中同时只有一个被选中
checked	默认选中

注意点：

name属性对于单选框有分组功能。

有相同name属性值的单选框为一组，一组中只能同时有一个被选中。

复选框

属性名	说明
checked	默认选中

文件选择

属性名	说明
multiple	多文件选择

按钮

标签名	type属性值	说明
input	submit	提交按钮。点击之后提交数据给后端服务器
input	reset	重置按钮。点击之后恢复表单默认值
input	button	普通按钮。默认无功能，之后配合js添加功能

12.2 button 系列标签

<button>
	文字或图片等
</button>

属性值：

标签名	type属性值	说明
button	submit	提交按钮。点击之后提交数据给后端服务器
button	reset	重置按钮。点击之后恢复表单默认值
button	button	普通按钮。默认无功能，之后配合js添加功能

12.3 select 下拉菜单标签

<select>
    <option value="">请选择</option>
    <option value="">北京</option>
    <option value="">上海</option>
    <option value="" selected="selected">广州</option>
    <option value="">深圳</option>
</select>

12.4 textarea 文本域标签

常用属性：

属性值	说明
cols	规定了文本域内可见宽度
rows	规定了文本域内可见高度

<textarea cols="6" rows="6">textaretextaretextaretextaretextaretextaretextaretextare</textarea>

在这里插入图片描述

12.5 label 标签

场景：常用于绑定内容与表单标签的关系
标签名：label
使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别：
    <input type="radio" name="sex" id="nan"> <label for="nan">男</label>
    <input type="radio" name="sex" id="nv"> <label for="nv">女</label>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别：
    <label><input type="radio" name="sex"> 男</label>
    <label><input type="radio" name="sex"> 女</label>
</body>
</html>