HTML入门教程：快速了解HTML ，适合零基础（有基础的勿入）

最新推荐文章于 2024-07-25 11:52:08 发布

qq_63389054

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量2.6k

点赞数 4

分类专栏： HTML基础文章标签： html 前端前端框架

本文链接：https://blog.csdn.net/qq_63389054/article/details/124368878

版权

HTML基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

文章目录

前言
一、HTML基本框架及快捷键生成基础框架

1.HTML基本框架介绍

2.快捷键生成基础框架

二、内联元素和块级元素

1.内联元素

2.块级元素

三、HTML 文本格式化标签
四、HTML中 body元素

1.超链接

2.列表

3.表格

4.表单

5.按钮

6.图片

7.复选框/单选框

8.style

总结

前言

此篇博客仅适用于零基础人群。对于学过一点HTML的人来说，在这篇博客里你学不到任何东西，因为实在是太简单、太基础了。但对于没有接触过HTML的人来说这篇博客刚刚好，你能学到很多。

这篇博客可以说是我的学习笔记，在初学HTML的时候，我学习的网站是朋友推荐的菜鸟教程，还有自己在B站上找视频。

但菜鸟教程的太过于详细，有很多不常见不常用的东西，这对于初学者是很不友好的，初学者不知道那些重要，那些不常见。往往都进行了学习和记忆，但是到最后学完，有些都不一定能用上，对初学者造成了极大的负担。菜鸟教程适合了解一点HTML是做什么去看，菜鸟教程就像教科书，很详细却也很无味。

而B站的b视频大部分很繁琐，前面介绍什么是HTML及HTML的起源都能介绍好多，但是初学者又不知道哪些可以跳过哪些不可以，所以都看了，浪费了很多时间。但b站也有很简洁的教学视频，此篇博客就是借鉴那个视频，放在博客结尾，看完博客还觉得迷糊的可以去看看哦（还是气泡音呢，很好听的）

一、HTML基本框架及快捷键生成基础框架

1.HTML基本框架介绍

<!DOCTYPE html><!--解释文档类型为HTML-->
<html lang="en"><!--声明网页语言，“en”为英文，“zh-cn”为中文。html为开始标签-->
    <head><!--头部-->
        <meta charset="UTF-8"><!--定义网页编码格式为UTF-8 -->
        <title>网页标题</title>
    </head>
    <body><!--主体-->
    </body>
</html><!--结束标签-->

以上为HTML最基本框架，后面文章内容皆为网页内部设计，皆写在<body> </body> 之中

2.快捷键生成HTML基本框架

新建一个HTML文件，输入“ ！”，再按 " tab"键，即可生成!

注："!",为英文输入法下的

二、块级元素和内联元素

1.块级元素

在页面以块的形式展现
出现在新的一行
占全部宽度

2.内联元素

通常在块级元素内
不会导致文本换行
只占必要的部分宽度

块级元素：如<div>,<h1>,<p>等等。

内联元素：如<a>,<img>,<em>,<strong>等等。

代码示例

<!DOCTYPE html><!--解释文档类型为HTML-->
<html lang="en"><!--声明网页语言，“en”为英文，“zh-cn”为中文。html为开始标签-->
    <head><!--头部-->
        <meta charset="UTF-8"><!--定义网页编码格式为UTF-8 -->
        <title>网页标题</title>
    </head>
    <body><!--主体-->
        <div>
            <h1>标题</h1>
            <P>正常字体大小</P>
            <strong>加粗字体</strong>
        </div>
    </body>
</html>

h1表示标题格式大小，p表示一个段落。

演示效果

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b2xNTE=,size_20,color_FFFFFF,t_70,g_se,x_16

三、HTML文本格式化标签

标签	描述
<b>	定义粗体文字
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气

还有如：换行<br> ，加横线<hr>等。

代码示例：

<!DOCTYPE html><!--解释文档类型为HTML-->
<html lang="en"><!--声明网页语言，“en”为英文，“zh-cn”为中文。html为开始标签-->
    <head><!--头部-->
        <meta charset="UTF-8"><!--定义网页编码格式为UTF-8 -->
        <title>网页标题</title>
    </head>
    <body><!--主体-->
       <b>定义粗体文字</b>
       <br><!--换行-->
       <em>定义着重</em>
       <br><!--换行-->
       <i>定义斜体字</i>
       <br><!--换行-->
       <small>定义小号字</small>
       <br><!--换行-->
       <strong>定义加重语气</strong>
       <hr><!--加横线-->
    </body>
</html><!--结束标签-->

演示效果：

四、HTML中body 元素

1.超链接

<a href="###" target=" _blank"> Lorem </a>

'###' 为超链接的来链接。

'targrt= _blank' 使超链接打开的内容，新建一个页面，而并非覆盖原本的页面。

’Lorem‘为超链接的按钮。

2.列表

代码示例：

<ul>
    <li>List 1</li>
    <li>List 2</li>
</ul>
<ol>
    <li>List 1</li>
    <li>List 2</li>
</ol>

<ul></ul> 为无序列表

<ol></ol> 为有序列表

注：此代码<body></body>内

效果演示：

3.表格

代码示例：

  <table>
        <thead><!--表头-->
            <tr><!--行-->
                <th>your Name</th>
                <th>your Adress</th>
                <th>your Age</th>
            </tr>
        </thead>
        <tbody><!--表体-->
            <tr><!--行-->
                <td>Tom</td>
                <td>US</td>
                <td>18</td>
            </tr>
        </tbody>
    </table>

效果演示：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b2xNTE=,size_20,color_FFFFFF,t_70,g_se,x_16

4.表单

代码示例：

    <form action="form.js" method="post">
        <div>
            <label>Frist Name</label>
            <input type="text" name="first name" placeholder="Ent First Name">
        </div>
        <input type="submit" name="submit" value="submit">
    </form>

action 里面的是文件名或者页面网址，点击提交后会跳转到网址的页面。也可以为action=' '或action='#',提交到当前页面。

method 表示数据类型，可以为get或post。两者区别为：

get:明文提交，快速但不安全，不能提交大数据
post:密文，安全，可以提交大数据

<label>为标签

type为种类，name为自己给这个部分起的名字，placeholder为内容框里未填写时显示的。

value为按钮上面显示的内容。

效果演示：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5b2xNTE=,size_20,color_FFFFFF,t_70,g_se,x_16

5.按钮

代码示例：

 <button> this is a button</button>

<button> </button> 中间为按钮上显示的内容。

效果演示：

6.图片

代码示例：

 <img style="width: 20%;" src="3.jpeg"alt="显示错误">

style 可以设置图片大小，可以通过width 宽，height 高来设置。

scr 为图片路径；

alt 为图片不能正常显示时，显示的内容。

效果演示：

正常显示时

图片不能正常显示时：

7.复选框/单选框

复选框代码示例：

     <label>你出门开什么车：</label><br>
     <input type="checkbox"name="vehicle" >法拉利<br>
     <input type="checkbox"name="vehicle" >布加迪<br>
     <input type="checkbox"name="vehicle" >迈凯伦<br>
     <input type="checkbox"name="vehicle" >兰博基尼<br>

checkbox 为复选框，可以选多个。

复选框效果演示：

单选框代码示例：

     <label>你出门开什么车：</label><br>
     <input type="radio"name="vehicle" >法拉利<br>
     <input type="radio"name="vehicle" >布加迪<br>
     <input type="radio"name="vehicle" >迈凯伦<br>
     <input type="radio"name="vehicle" >兰博基尼<br>
     <input type="radio"name="vehicle" >没钱开不起车<br>

radio为单选框，只能选一个。

单选框效果演示：

8.style

style，可以调整字体颜色，字体大小，背景颜色，文本对齐方式，设置各种不同效果字体，等作用。在先介绍几种简单常用的。

代码示例：

<p style="font-family:楷体;color: blue;font-size: 1cm;background-color: black;text-align: center;">我出门开红色法拉利</p>

font-family 设置字体

color 字体颜色

font-size 字体大小

background-color 背景颜色

text-align 文本对齐方式。

效果演示：

总结

此篇文章简单的带初学者了解了HTML的一部分内容，这只是皮毛而已。想要深入了解更详细的HTML ，推荐菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)

对此文章仍有不理解的，可以留言评论，或者点击此链接为初学者准备的：HTML 速成_哔哩哔哩_bilibili

观看推荐视频（气泡音，很好听很温柔的男声）。

qq_63389054

关注

4
点赞
踩
43

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML入门教程：快速了解HTML ，适合零基础（有基础的勿入）

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。文章目录前言一、HTML基本框架及快捷键生成基础框架1.HTML基本框架介绍2.快捷键生成基础框架二、内联元素和块级元素 1.内联元素 2.块级元素三...
复制链接

扫一扫