前端基础学习笔记1-HTML5-CSDN博客

本文链接：https://blog.csdn.net/aoliaoliaoo/article/details/117747035

这篇博客详细介绍了HTML5的基础知识，包括网页结构、图像、超链接、元素类型、表单等。重点讲解了表单的各种输入类型、验证方法以及增强用户体验的label元素。

摘要由CSDN通过智能技术生成

HTML5

一、简述

HTML：超文本标记语言
编辑器：可以使用Intellij IDEA

HTML基本结构：

开放标签，：闭合标签
注释：，IDEA快捷键：ctrl+/

<!--DOCTYPE：告诉网页使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head：网页头部-->
<head>
    <!--meta：描述性标签，描述网站的一些信息，一般用来做SEO-->
    <meta charset="UTF-8">
    <!--title：网页标题-->
    <title>我的第一个网页</title>
</head>
<!--body：主体部分-->
<body>
    Hello World！
</body>
</html>

二、网页基本标签

IDEA快捷键：例如，输入h1+Tab，自动生成开放标签和闭合标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<!--段落标签-->
<p>段落  段落</p>
<!--换行标签-->
换行一下<br/>
<!--字体样式标签-->
<strong>粗体</strong>
<em>斜体</em>
<!--水平线标签-->
<hr/>
<!--特殊符号，输&可显示选项-->
空&nbsp;格<br/>
大于号&gt;<br/>
小于号&lt;<br/>
版权标签&copy;</br>

三、图像标签

<!--图像标签
    必填src：图像地址
    必填alt：图像替代文字（图片加在失败时显示）
    title：鼠标悬停文字
    width：图像宽度
    height：图像高度
-->
<img src="../1.png" alt="图片加载失败" title="鼠标悬停文字" width="541" height="989">

四、超链接标签

页面间链接
锚链接

功能性链接

邮件链接

<!--页面间链接
    必填href：要跳转到的链接
    target：表示窗口在哪里打开
-->
<a href="https://www.baidu.com/" target="_blank">打开新标签页,跳转到百度</a><br/>
<a href="https://www.baidu.com/" target="_self">在自己的网页中打开，跳转到百度</a><br/>
<!--锚链接：
    需要锚标记，跳转到标记
    可以跳转到本页的锚标记<a href="#锚标记名">跳转到本页的锚标记位置</a>
    可以跳转到其他页面的锚标记<a href="xxx.html#锚标记名">跳转到xxx.html页的锚标记位置</a>
-->
<a name="top">顶部</a>
<a href="#top">回到顶部</a>
<!--功能性链接
    邮件链接：mailto
-->
<a href="mailto:xxx@qq.com">点击联系我</a>

五、块元素和行内元素

块元素
- 无论内容多少，该元素独占一行
- p、h1-h6…
行内元素
- 内容撑开宽度，左右都是行内元素的可以排在一行
- a、strong、em…

六、列表标签

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

<!--有序列表ol，应用：试卷、问答...-->
<ol>
    <li>有序</li>
    <li>有序