“合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。”
文章目录
前言
写在开始:
HTML是用来搭建网页的基础语言,就像是你在盖房子时用的砖块,每个砖块(标签)都有特定的功能,负责不同的结构。接下来,我用更通俗的方式介绍HTML基础和常见标签。
正文部分有很多我手写的笔记,希望大家理解,不要嫌弃我的字丑奥.
文章有误敬请斧正 不胜感恩!
以下是本篇文章正文内容,
1. HTML的基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>这是一个大标题</h1>
<p>这是一个段落。</p>
</body>
</html>
解释:
<!DOCTYPE html>
:告诉浏览器,这是一个HTML5文件,不用管它的细节,就当成“说明书”。<html>
:整个网页的最外层,就像你家房子的外墙。<head>
:网页的“脑袋”,里面放一些网页的信息,比如标题、字符编码等。<body>
:网页的“身体”,所有显示在屏幕上的内容,比如文字、图片,都放在这里。
2. 常见标签的介绍
2.1 标题和文本
-
<h1>
-<h6>
:标题标签,<h1>
是最大的标题,<h6>
是最小的标题。<h1>这是最大标题</h1> <h2>这是次一级标题</h2>
用法很简单,按你需要的大小选择标签,
<h1>
是主标题,<h2>
-<h6>
依次往下。 -
<p>
:段落标签。所有文字内容都可以放在这个标签里。<p>这是一个段落。</p>
-
<b>
和<strong>
:加粗文字。虽然看上去效果一样,但<strong>
更多强调的是“重要性”。<b>这是加粗的文字</b> <strong>这也是加粗的文字,但强调了它的重要性。</strong>
-
<i>
和<em>
:斜体文字。<em>
也是强调的意思。<i>这是斜体文字</i> <em>这是强调的斜体文字</em>
2.2 链接和图片
-
<a>
:超链接,用于添加链接。<a href="https://www.example.com">点击我去百度</a>
-
<img>
:图片标签,用于展示图片。<img src="image.jpg" alt="图片描述" width="200" height="100">
src
:图片的地址(相当于图片的“源”)。alt
:当图片加载不出来时显示的文字。width
和height
:图片的宽度和高度。- 图像路径的解析:
2.3 列表
-
<ul>
:无序列表,展示项目符号的列表。<ul> <li>苹果</li> <li>香蕉</li> </ul>
ul
是外面的包裹,li
是里面每一项。
-
<ol>
:有序列表,按顺序编号。<ol> <li>第一项</li> <li>第二项</li> </ol>
2.4 表格
-
<table>
:用于创建表格。<table border="1"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> </table>
-
tr
:表示表格的一行。 -
th
:表头,表示标题单元格。 -
td
:数据单元格,放每个表格内容的地方。
table效果:
- -
2.5 表单
-
<form>
:用户提交信息的表单,比如登录页面。<form action="/submit" method="POST"> <label for="name">名字:</label> <input type="text" id="name" name="name"> <input type="submit" value="提交"> </form>
action
:表单提交到的地址。method
:数据提交的方式,通常用POST
。
2.6 其他常用标签
-
<div>
:块级元素,用于包裹内容,可以用来布局页面。<div> <p>这是一个包含段落的div块。</p> </div>
-
<span>
:内联元素,和div
类似,但不换行,适合包裹少量内容。<span>这是内联元素。</span>
-
<br>
:换行标签,强制换行。(break)这是第一行。<br>这是第二行。
-
<hr>
:水平线,表示一个分割。<hr>
3. HTML5新标签(语义化标签)
HTML5新增了一些更容易理解的标签,让网页更“语义化”,便于搜索引擎和开发者阅读。
<header>
:定义页面的头部,比如导航条、LOGO等。<nav>
:导航栏,放菜单或链接。<section>
:页面的独立部分,通常用于分块内容。<article>
:独立的文章或博客内容。<footer>
:页面的底部内容。
4. HTML注释
注释是用来给代码加说明的,不会在页面上显示出来。
<!-- 这是一段注释 -->
快捷键:Ctrl+/
5.查阅文档
只推荐这仨
标签是记不完的,只有多用多查才能理解记忆.
2.菜鸟教程 - 学的不仅是技术,更是梦想! (runoob.com)
3.使用 canvas 来绘制图形 - Web API | MDN (mozilla.org)
总结
HTML是我们前端部分最基础也最为根本的部分,我们绝对不能轻视这一块的学习,
合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。
正是这个道理.
HTML就是通过这些标签组合在一起,搭建出一个完整的网页。
学会这些基础标签后,我们基本就能用它们搭建出简单的网页。
后续再深入了解CSS(样式)和JavaScript(交互)
让我们的网页更加富有特色才能更加富有竞争力,更美观,更能吸引别人的眼球,更能得到青睐.
标签:常用,网页,标签,标题,HTML,图片,页面 From: https://blog.csdn.net/2301_79175212/article/details/142370602