HTML5（基本了解）_html段落标签快捷讲-CSDN博客

本文链接：https://blog.csdn.net/weixin_45869823/article/details/124261536

初学HTML5

html：超文本标记语言

基本了解

DOCTYPE：告诉浏览器，我们要使用什么规范
<html></html> :总标签
<head></head>:代表网页头部
<title>  </title>: 网页标签
<meta charset="UTF-8">:描述性标签，用来描述网站的一些信息，一般用来做seo
<!-- -->:注释(快捷键：ctrl+/)

网页基本标签

标题标签:<h1>一级标签</h1>
段落标签(快捷键：P+Tab):<P>两只老虎两只老虎</P>
水平线标签:<hr/>
换行标签:<br/>
粗体、斜体:<strong></strong>和<em></em>
特殊符号:&+字母;

例如：（可直接保存代码到.html文件可以直接看见预览）

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<!--段落标签(快捷键：P+Tab)-->
<P>两只老虎两只老虎</P>
<P>跑得快跑得快</P>
<P>一只没有耳朵</P>
<P>一只没有尾巴</P>
<P>真奇怪真奇怪</P>
<!--水平线标签-->
<hr/>
<!--换行标签-->
两只老虎两只老虎<br/>
跑得快跑得快<br/>
一只没有耳朵<br/>
一只没有尾巴<br/>
真奇怪真奇怪<br/>
<!--粗体、斜体-->
<strong>粗体：哈哈哈哈哈哈</strong>
<em>斜体：哈哈哈哈哈哈</em>
<br/>
<!--特殊符号-->
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格：& n b s p;
<br/>
大于：&gt;
<br/>
小于：&lt;
<br/>
版权符号：&copy;
<br/>
特殊符号记忆方法：&+字母
</body>
</html>

图像标签

快捷键：输入img然后单击tab键

例如：<img src="…/resources/image/1.jpg" alt=“小狗头像” title="悬停文字"width=“132” height=“132”>

解释：src：地址 alt：图片显示不出的时候提示信息 title：悬停文字等等等还有许多可以加…

链接标签

快捷键：输入a然后单击tab键

a标签

<!--a标签
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
        _blank:新标签打开
        _self:在当前网页打开
-->
<a href="https://www.baidu.com"target="_blank">点击我跳转到百度页面</a>
<br/>
<a href="1.我的第一个网站.html">点击我跳转到页面1.我的第一个网站</a>
<br/>
<a href="1.我的第一个网站.html">
    <img src="../resources/image/1.jpg" alt="小狗头像" title="悬停文字"width="132" height="132">
</a>

锚链接标签

<!--锚链接<页面间跳转or页面跳转页面>
1.需要一个锚标记（第8行代码已经写好：“顶部”）
2.跳转到标记-->
<a href="#top">回到顶部（页面间跳转）</a>
<a href="1.我的第一个网站.html#down">跳转（页面和页面之间跳转）</a>

功能性链接（邮件链接和QQ链接）

<!--功能性链接
邮件链接：mailto
QQ链接:https://shang.qq.com/v3/widget.html
-->
<a href="mailto:1436589181@qq.com">点击联系我</a>
<p/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1436589181&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1436589181:41" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

ps：qq链接进入网页QQ推广官方网站有一个完整的流程，直接复制粘贴到自己的网页之中就ok

行内元素和块元素概念（了解就好）

块元素

无论内容多少，该元素独占一行
例如：p标签、h1-h6等等

行内元素

内容撑开宽度，左右都是行内元素的可以排在一行
例如：a标签、strong…

列表标签（ol、ul、dl）

什么是列表：列表就是信息资源的一种展示形式，它可以使信息结构化和条理化，并以列表的形式显示出来，以便浏览者能更加快捷的获得相应的信息

列表分类：

无序列表
有序列表
定义列表

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>web</li>
    <li>html、css</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>web</li>
    <li>html、css</li>
</ul>
<hr/>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容
一般用于公司网站底部-->
<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>c</dd>

    <dt>位置</dt>
    <dd>中国</dd>
    <dd>重庆</dd>
</dl>
</body>
</html>

表格标签

行：跨行：colspan
列：跨列：rowspan
表格加边框：border=“1px”（px指宽度）

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习题</title>
</head>
<body>
<table border="1px">
<tr>
    <td colspan="3">学生成绩</td>
</tr>
<tr>
    <td rowspan="2">小贺</td>
    <td>语文</td>
    <td>100</td>
</tr>
<tr>
    <td>数学</td>
    <td>100</td>
</tr>
<tr>
    <td rowspan="2">小黄</td>
    <td>语文</td>
    <td>100</td>
</tr>
<tr>
    <td>数学</td>
    <td>100</td>
</tr>
</table>
</body>
</html>

媒体元素

视频（video）和音频（audio）
src:资源路径
controls：控制条
autoplay：自动播放

直接看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
<!--音频和视频
src:资源路径
controls：控制条
autoplay：自动播放-->
<video src="../resources/video/1.mp4" controls autoplay></video>
<hr/>
<audio src="../resources/audio/AniFace%20-%20夜、萤火虫和你.mp3" controls autoplay></audio>
</body>
</html>