HTML 基础知识

最新推荐文章于 2023-03-09 11:26:57 发布

津门老九

最新推荐文章于 2023-03-09 11:26:57 发布

阅读量719

点赞数

分类专栏： HTML 基础知识

本文链接：https://blog.csdn.net/u010723080/article/details/106269747

版权

HTML 基础知识专栏收录该内容

1 篇文章 0 订阅

订阅专栏

骨架

<!DOCTYPE html>
<html>
	<head>
	    <title></title>
	</head>
	<body></body>
</html>

<!DOCTYPE html> 指定了当前的文档类型为 HTML5 版本，必须放在文档的最上面

标签分类

双标签：<标签名></标签名>
单标签：<标签名/>

标签关系

嵌套关系：

<head>
    <title></title>
</head>

head 标签和 title 标签是嵌套关系

并列关系：

<head>
    <title></title>
</head>
<body></body>

head 标签和 body 标签是并列关系

字符编码

<head>
    <meta charset="UTF-8">
</head>

指定当前的文档字符集类型为 utf-8

常用标签

名称	语法	说明
标题标签	<hn>标题名<hn/>	标题标签有 6 个基本，因此 n 的取值为 1-6，取值越小，标签越大
段落标签	<p>文本内容</p>	段落标签中的文本内容会根据浏览器的大小自动换行
水平线标签	<hr/>	水平线标签会在页面上展示一条水平线
换行标签	<br/>	换行标签能够达到强制换行的效果，比如在一个段落中，需要对文本进行强制换行，就可以使用换行标签
盒子标签	<div/>	没有任何语义，只是将页面中的内容进行分割
盒子标签	<span/>	没有任何语义，只是将页面中的内容进行分割

标签属性

可以给任何一个标签添加属性，一个标签可以添加多个属性，多个属性之间用空格间隔。每一个属性都有默认的属性值，如果属性省略了属性值，就会使用默认属性值。

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

文本格式化标签

标签	效果
<b></b>	文字以粗体显示
<i></i>	文本以斜体显示
<s></s>	文本以加删除线显示
<u></u>	文本以加下划线显示

图片标签

语法：

<img />

属性：

属性	说明
src	图像路径
alt	图片不能显示时替换的文本
title	鼠标悬停时显示的内容
width	图片的宽度
height	图片的高度
border	图片边框的宽度

超链接标签

<a href="跳转目标" target="弹出方式">文本或图片</a>

href 属性用于指定标签的目标 url，如果没有目标 url 时，属性值可以使用 #。target 指定页面的打开方式，属性值 seif 在当前页面打开，属性值 blank 表示在新窗口打开。

<head>
    <base target="_blank"/>
</head>

可以使用 base 标签来设置整个页面超链接标签的跳转方式

无序列表

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

显示效果：

列表1
列表2
列表3

有序列表

<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>

显示效果：

列表项1
列表项2
列表项3

自定义列表

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
</dl>

显示效果：

名词1

名词1解释1

名词1解释2

名词2

名词2解释1

名词2解释2

表格标签

<table>
    <tr>
        <th>表头1</th>
        <th>表头1</th>
    </tr>
    <tr>
        <td>内容1</td>
        <td>内容2</td>
        ...
    </tr>
    ...
</table>

table 标签用来定义一个表格，tr 标签表示表格的一行，必须嵌套在 table 标签中。td 标签表示表格的一个单元格，必须嵌套在 tr 标签中。th 标签表示表头，可以嵌套在 table 标签中，也可以签到在 tr 表中。

属性	说明	属性值
border	设置表格边框的宽度（默认值为 0）	像素
cellspacing	设置单元格边框的空白间隙	像素（默认 2 像素）
cellpadding	设置单元格内容与单元格边框的间隙	像素（默认 1 像素）
width	设置表格的宽度	像素
height	设置表格的高度	像素
align	设置表格的对其方式	left、center、right

单元格内的文字

合并单元格：
rowspan 跨行合并
colspan 跨列合并

多媒体标签

audio 标签用来展示音频播放

<audio src=""></audio>

src 属性用来指定音频文件的路径，autoplay 属性用来控制是否自动播放，controls 属性用来控制是否显示默认播放控件，loop 属性用来控制是否循环播放。

<audio>
    <source src=""/>
    <source src=""/>
    <source src=""/>
    ...
</audio>

一个 audio 标签内部可以添加多个音频源

video 标签展示视频播放

<video src=""></video>

autoplay 属性用来控制是否自动播放，controls 属性用来控制是否默认播放，loop 属性用来控制是否循环播放，width 属性用来设置播放窗口的宽度，height 属性用来控制视频播放的高度。

 <video>
     <source src=""/>
     <source src=""/>
     <source src=""/>
     ...
 </video>

一个 video 标签内部可以添加多个视频源

表单

表单用来收集数据提交给服务器，一个表单由表单标签、提示信息标签、表单域标签三部分组成。表单标签具有文本输入，密码输入、复选、提交表单、重置表单的功能。

津门老九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 基础知识

HTML 骨架<!DOCTYPE html><html> <head> <title></title> </head> <body> </body></html>HTML 标签分类双标签：<标签名></标签名>单标签：<标签名/>HTML 标签关系嵌套关系：<head> <title><
复制链接

扫一扫