HTML怎么学？| 小白入门笔记大全（语法规范、常用标签用法介绍、学习网站）

已于 2023-10-25 09:55:29 修改
阅读量772 收藏 16
点赞数 2
分类专栏： 前端之路 文章标签： html 笔记 学习
于 2023-10-19 16:33:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/waski/article/details/133929116
版权

文章目录

1. HTML语法规范

1.1 基本语法概述

  1. HTML 标签是由尖括号包围的关键词,例如
  2. HTML 标签通常是成对出现的,例如和 , 我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签
  3. 有些特殊的标签必须是单标签(极少情况) ,例如

1.2 标签关系

包含关系；并列关系

1.3 第一个HTML网页

每个网页都会有一个基本的结构标签(骨架标签) , 页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档

<html>   # HTML标签：页面中最大的标签，根标签
	<head>   # 文档的头部标签：注意在head标签中我们必须要设置的标签是title
		<title>我的第一个页面</title>  
		# 文档的标题标签：让页面拥有一个属于自己的网页标题
	</head>
	<body>   #文档的主体标签：元素包含文档的所有内容，页面内容基本都是放到body里面的
		你好！
	</body>
</html>

1.4 VSCode

1.4.1 使用

新建文件 → 保存为.html文件 → 输入!后Tab → 右键“ Open In Default Browser”

1.4.2 VSCode工具生成骨架标签新增代码

  1. < !DOCTYPE> 标签

不是一个HTML标签,它就是文档类型声明标签。

作用：告诉浏览器使用哪种HTML版本来显示网页。

位置：文档中的最前面的位置,处于标签之前。

< !DOCTYPE html> 意思是:当前页面采取的是HTML5版本来显示网页

  1. lang 语言

用来定义当前文档显示的语言。

<html lang=“en”> 定义语言为英语（也可以显示中文）

<html lang=“zh-CN”> 定义语言为中文（也可以显示英文）

  1. charset 字符集

字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
在标签内,可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。

< meta charset=“UTF-8” /> //不写会乱码

charset常用的值有: GB2312、BIG5、 GBK和UTF-8 ,其中UTF-8也被称为万国码,基本包含了全世界所有国家需要用到的字符。

2. HTML标签

2.1 HTML常用标签

1.标题标签

<h1>—<h6>

<h1> 我是一级标题</h1> // 加粗一行显示

h为单词head的缩写,意为头部、标题。

2.段落标签

<p> 定义段落,它可以将整个网页分为若千个段落，段落间有空隙。

<p>我是一个段落标签</p>

p为单词paragraph [’ paeragraef]的缩写,意为段落。

3.换行标签

<br/> 强制换行，无间隙，单标签

单词break的缩写,意为打断、换行。

2.2 文本格式化标签

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.3 < div>和< span>标签

<div>和<span>是一个盒子，用来装内容的。
<div>这是头部</div> 大盒子，一行一个 （div是division的缩写，表示分割、分区）
<span>今日价格</span> 小盒子，一行多个（span 意为跨度、跨距）

2.4 图像标签

<img src=“图像URL”/> 插入一张名为“图像URL”的图片（img为image的缩写,意为图像）
src是< img>标签的必须属性，指定图像文件的路径和文件名。

在这里插入图片描述

<img src=" img. jpg" alt=" 图片未显示成功” title=" 这是一张照片" width= “500” border= “15”/>

相对路径：

在这里插入图片描述

2.5 超链接标签

<a href=“跳转目标” target=” 目标窗口的弹出方式">文本或图像< /a>
（a为单词anchor的缩写，意为锚）

在这里插入图片描述

外部链接：< a href= “http://www.qq.com” target=“_blank”> 腾讯 < /a>

内部链接：< a href=" gongsijianjie.htm1" target=“_blank”>公司简介< /a>

空链接：< a href=“#”>公司地址< /a>

下载链接：< a href=“img.zip”>下载文件< /a>

网页元素的链接：< a href=“http://www.baidu.com”>< img src=" img.jpg" />< /a>

锚点链接：< a href=“#live”>个人生活< /a> < h3 id=“live”>个人生活< /h3>

2.6 注释和特殊字符

注释：< !–注释语句–> 快捷键: ctrl + /

特殊字符：
在这里插入图片描述

2.7 表格标签（展示数据）

2.7.1 基本标签

在这里插入图片描述

  1. <table> </table>是用于定义表格的标签。
  2. <tr> </tr>标签用于定义表格中的行,必须嵌套在<table> </table>标签中。（table row）
  3. <td> </td>用于定义行中的单元格,必须嵌套在<tr> </tr>标签中。（table data）
  4. <th>标签表示HTML表格的表头部分，会加粗居中。（table head）

在这里插入图片描述

2.7.2 表格属性

image-20230701203200128
**加粗样式**

< thead>标签表格的头部区域、< tbody>标签表格的主体区域

在这里插入图片描述

2.7.3 合并单元格

合并单元格方式：
● 跨行合并: rowspan= "合并单元格的个数”
● 跨列合并: colspan= “合并单元格的个数” <td colspan=“2” > </td>

目标单元格: (写合并代码)
●跨行：最上侧单元格
●跨列：最左侧单元格

2.8 列表标签（布局）

2.8.1 无序列表

<ul></ul>标签：无序列表

<li></li>标签：列表项

在这里插入图片描述

1.无序列表的各个列表项之间没有顺序级别之分,并列的。

2.<ul></ul>中只能嵌套<li></li>，<li></li>内部可以容纳所有元素。

2.8.2 有序列表

<ol>\ 标签：有序列表

image-20230701210749898

1.有序列表的各个列表项之间有顺序级别之分。

2.<ol> </ol>中只能嵌套<li></li>，<li></li>内部可以容纳所有元素。

2.8.3 自定义列表

<dl> </dl>标签：自定义列表

在这里插入图片描述

  1. <dl> </dl>里面只能包含<dt>和<dd>。

  2. 通常<dt>对应多个<dd>。

在这里插入图片描述

2.9 表单列表（收集信息）

表单：表单域、表单控件(也称为表单元素) 、提示信息

image-20230701215225208

2.9.1 表单域

<form> 标签：表单域，表示包含表单元素的区域，实现用户信息的收集和传递给服务器。
在这里插入图片描述

常用属性：

在这里插入图片描述

2.9.2 表单控件(表单元素)

表单元素：允许用户在表单中输入或者选择的内容控件

① input输入表单元素（收集用户信息）

在这里插入图片描述

● <input/> 标签为单标签
● type 属性，通过设置不同的属性值来指定不同的控件类型

在这里插入图片描述

● 其他属性

image-20230701220848449

  1. name 和 value是每个表单元素都有的属性值，主要给后台人员使用
  2. name 表单元素的名字，要求单选按钮和复选框要有相同的name值
  3. checked属性主要针对于单选按钮和复选框，一打开页面就可以默认选中某个表单元素

在这里插入图片描述

● 表单标签

<label>标签：绑定一个表单元素，当点击< label>标签内的文本时.浏览器就会自动将光标选择对应的表单元素上。
在这里插入图片描述
在这里插入图片描述

② select 下拉表单元素

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
在这里插入图片描述

③ textarea 文本域元素

< textarea>标签：多行文本输入的控件（留言板，评论等）

在这里插入图片描述

3 学习网站

● W3C: http://www.w3school.com.cn/
● MDN: https://developer.mozilla.org/zh-CN/
● 笔记对应的B站视频：https://www.bilibili.com/video/BV14J4114768?p=1

waski
关注
专栏目录
HTML语法大全(转)
dzqsuper的专栏
06-28 610
　　 批注 　　 跑马灯 　　...普通卷动 　　...滑动 　　...预设卷动 　　...来回卷动 　　...向下卷动 　　...向上卷动 　　向右卷动 　　向左卷动 　　...卷动次数 　　...设定宽度 　　...设定高度 　　...设定背景颜色 　　...设定卷动距离 　　...设定卷动时间 　　字体效果 　　...标题字(最大) 　　...标题字(最小) 　　...粗体字 　　...粗体
零基础学习C++笔记（小白快速入门）
m0_59592518的博客
03-02 2020
零基础学习C++笔记（小白虫）
HTML基本语法
布白的博客
04-05 3686
HTML基本语法 HTML概念 Hypertext Markup Language：超文本标记语言。是用来制作网页的一种标记语言。 HTML是一种纯文本格式的文件，内部只能书写文字内容，不能添加图片、音频、视频等，但是在网页中给用户呈现的效果却包含了文字以外的内容，这种效果就是HTML语言区别于其他文件的不同之处。 概念： 超文本：是超级文本的缩写，简单来说超文本就是用于链接另一个文本或多媒体内容的文本，比如链接到图片、链接、音频、视频、程序等。 标记：又叫做标签（HTML tag），有特殊的书写规范，是
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。_html零基础入门教程
最新发布
shanguicsdn111的博客
08-31 3096
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
HTML语法大全[转]
迷失在爪哇世界中的专栏
04-25 1166
卷标 , 属性名称 , 简介 批注 跑马灯 ...普通卷动 ...滑动 ...预设卷动 ...来回卷动 ...向下卷动 ...向上卷动 向右卷动 向左卷动 ...卷动次数 ...设定宽度 ...设定高度 ...设定背景颜色 ...设定卷动距离 ...设定卷动时间 字体效果 ...标题字(最大) ...标题字(最小) ...粗体字 ...粗体字(强调) ...斜体字 ...斜体字(强调) ...
HTML语法
ytuglt的博客
08-14 3252
HTML语法一、什么是HTML标记语言表示网页信息的符号标记语言特点：1.可以设置文本的格式，比如标题、字号、文本颜色、段落等2.可以创建列表3.可以插入图像和媒体4.可以建立表格5.超链接，可以使用鼠标点击超链接来实现页面之间的跳转二、HTML的标记和他的属性1.HTML文档的保存格式.html.htm.xhtml2.标记和被标记的内容构建出HTML文档格式： <标记> 内容
HTML语法大全简化版
04-20 794
虽然在学Java，但对HTML的语法一直没有总结和概括，今天在网上搜了一下，贴出来，供大家共享!html教学+HTML语法大全卷标 , 属性名称 , 简介   批注   跑马灯  ...普通卷动  ...滑动  ...预设卷动  ...来回卷动  ...向下卷动  ...向上卷动  向右卷动  向左卷动  ...卷动次数  ...设定宽度  ...设定高度  ...设定背景颜色  ...设
学习笔记 | Orillusion-WebGPU小白入门（六）
肥宅Davina的博客
09-21 990
实际操作过程中，如果原始图像分辨率足够，一般无论使用哪种方法进行缩小的操作，肉眼都很难看出区别，但如果是放大的话效果就比较明显了。临近采样会在边缘呈现非常明显的锯齿感（马赛克效果），而线性采样边缘过渡比较平滑，但也在一定程度上造成了边缘模糊的情况。两者的最终效果不一定谁好谁劣，只是适用的内容不同。一般地，临近采样更适合边缘分割明显，颜色区域少的图像。而颜色丰富，过度较多的图，用线性采样的效果更好。社区中有很多采样优化算法， 但考虑到GPU的运行效率问题，主流图形API中只内置了这两种方法。
mongo笔记大全，小白入门必备
08-30
MongoDB 提供了丰富的查询和聚合功能，允许开发者使用类似 JavaScript 的语法进行复杂的查询和数据分析。此外，MongoDB 还支持复制集、分片等高级特性，以实现高可用性和水平扩展。总的来说，MongoDB 是一款强大的...
新手小白学Java|零基础入门笔记｜原来学Java可以这么简单
java9787的博客
08-26 654
刚开始学习java的时候，可能是一头雾水，不知道从何学起。 还有很多Java小白，在刚自学Java的时候玩命的学习，玩命的记住Java原理，天天早上五点起床背Java的一些英文词汇，然后遇见一些未知的困难，让自己打到癫狂状态，逐渐迷失自我放弃Java。 为了帮大家解决这个难题，这里跟大家分享一下Java入门教程，带你通关！！！ 开始之前，分享Java零基础入门教程给大家，只要你耐心看完就一定能够入门。 这个教程总体来说就像列文虎克教学，细到极致，妙到毫巅。 适合绝对零基础的，每个知识点掰开了揉碎了
html语法大全
07-17
html语法大全html语法大全html语法大全html语法大全html语法大全html语法大全html语法大全
TS 从 小白 到入门 学习笔记
weixin_64747231的博客
01-07 498
TS 学习笔记 ,从 菜鸟 到 入门实战,致力于为 大家分享 自己的学习笔记,以及遇到的相关难题.....
HTML 的所有语法
weixin_33932129的博客
04-23 359
这里收集了HTML的所有语法〈当然并不是全部，但也差不多是这样了〉。希望对网友查询时比较方便。注：按英文字母顺序排列卷标,属性名称简介<!--...-->批注<AHREFTARGET>指定超级链接的分割窗口<AHREF=#锚的名称>指定锚名称的超级链接<AHREF>指定超级链接<ANAME=锚...
HTML基础语法
qq_49956121的博客
08-31 541
什么是HTML？ Hyper Text MarkupLanguage（超文本标记语言） 什么是W3C？ World Wide Web Consortium（万维网联盟） W3C标准包括: 结构化标准语言（XHTML 、XML） 表现标准语言（CSS） 行为标准（DOM、ECMAScript） 一、HTML网页基本结构 1、基本结构 <html> <head> <title>网页标题</title> </head> <body&g
html基本语法
suwu150
10-15 879
可以使用.html与.htm作为html文件的后缀名（扩展名） 可以使用任意文本编辑器创建HTM标签标签用来标记内容 标签使用"<",">"包围标签分为成对标签和单标签一个元素通常是由一个开始标签，内容，其他元素以及一个结束标签组成的与元素相关的特性称为属性，属性由键值对组成<元素名 属性名="值1" 属性名="值2"></元素名> 大多数元素都可以使用的属性。 id class 标识一类元素 style 样式title 描述信息元素名和属性名都不区分大小写 4）文档结构档类型声明: 版本
HTML标记属性
hbm1985的专栏
10-24 1321
跑马灯 ...普通卷动 ...滑动 ...预设卷动 ...来回卷动 ...向下卷动 ...向上卷动 向右卷动 向左卷动 ...卷动次数 ...设定宽度 ...设定高度 ...设定背景颜色 ...设定滚动速度 ...设定卷动时间 ...鼠标经过上面时停止滚动 ...鼠标离开时开始滚动 字体效果 ...标题字(最大) ...标题字(最小) ...粗体字 ...粗体字(强调) （同上效果略同） .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

waski

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值