HTML5零基础速成

原创已于 2022-02-15 18:58:06 修改 · 628 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-01-05 17:11:46 首次发布

3 篇文章

订阅专栏

本文介绍了HTML5的基本结构，包括标签详解、helloworld示例、图像和链接使用、块元素行内元素、列表表格等内容，还涵盖了表单设计和常见技术应用，适合初学者快速上手。

本文主要是狂神HTML5视频的笔记。
插播一个神奇的在线编程学习网站FreeCodeCamp

一、HTML基本结构

新建html文件就会自动给出的内容（我用的是pycharm）
在这里插入图片描述
标签种类简介

名称	格式	举例	说明
闭合标签	< xxx > < /xxx >	< html > < /html >	成对出现
空标签	< xxx/ >	< hr/ >	单独出现，用/表示关闭空元素

只修改了基本框架中title和body的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    hello world !
</body>
</html>

预览结果
在这里插入图片描述

名称	格式	说明
标题标签	< hn > < /hn >	hn(n取1-6)表示n级标签,如h1表示一级
段落标签	< p > < /p >	段落之间会隔一行
换行标签	< br/ >	本行写完后面加换行标签。行之间紧凑
水平线标签	< hr/ >	单独一行水平横线
字体样式标签	< xxx >< /xxx >	比如xxx写strong表示加粗,em表示斜体
注释标签	< !-- xxx – >	xxx是注释内容
特殊符号	&xxx；	&nbsp ；是空格。&gt ;是大于号。&lt ;是小于号。&copy ；是版权符号

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
src和alt是必写项

在这里插入图片描述

在这里插入图片描述

跳转到某页面内的标记位置
（1）本页面内跳转
下面示例用name做了标记
在这里插入图片描述
（2）其他页面跳转

邮件链接mailto（暂时用不到，先不写了）

名称	特点	举例
块元素	独占一行（没法多个挤在一行里）	标题标签、段落标签、水平线标签等
行内元素	多个行内元素可以挤在一行里面	字体样式标签、图像标签、链接标签等