【HTML】快速入门基础知识总结

最新推荐文章于 2023-07-07 19:00:15 发布

cakeAndAle

最新推荐文章于 2023-07-07 19:00:15 发布

阅读量197

点赞数 2

分类专栏： ▶后端 # 【HTML】文章标签： html html基础 html5 入门

本文链接：https://blog.csdn.net/weixin_42835409/article/details/113052090

版权

▶后端同时被 2 个专栏收录

99 篇文章 2 订阅

订阅专栏

【HTML】

1 篇文章 0 订阅

订阅专栏

前言

本文介绍HTML（Hyper Text Markup Language）超文本标记语言的基础知识，帮助大家快速入门。

正文

一、HTML简介

全称：超文本标记语言，HyperText MarkUp Language
是web开发的基础，诞生于1993年，经历过5次变化，最近一次是2014年的HTML5

二、开发工具

Sublime：http://www.sublimetext.com/

VsCode：https://code.visualstudio.com/

WebStorm：https://www.jetbrains.com/zh-cn/webstorm/

三、语法格式

（1）标签格式

<标签名字> 文本内容　<标签名字> 
　　①　　　　　②　　　　　③

①：开始标签
②：文本内容 text
③：结束标签（闭合标签）

（2）页面骨架

<!DOCTYPE html>    <!--这是html5的变化之一：文档声明方式-->
<html lang="en">   <!--表示：在英文下开发-->
<head>	 <!--头部-->			
    <meta charset="UTF-8">    <!--表示：设置字符集为UTF-8-->   
    <title>标题</title>
</head>
<body>
         <!--身体-->
</body>
</html>

在这里插入图片描述

四、常用标签

（一）块元素（block）

（1）特征

独占一行
由上到下进行排列

（2）常用标签

①h1~h6：标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

预览：
在这里插入图片描述

②div：盒子标签

<div>我是块元素，独占一行</div>
<div>我是块元素，独占一行</div>
<div>我是块元素，独占一行</div>

预览：
在这里插入图片描述

③p：段落

<p>我也是块元素，独占一行</p>
<p>我也是块元素，独占一行</p>
<p>我也是块元素，独占一行</p>

预览：
在这里插入图片描述

④ul：无序列表

<ul>
	<li>我是无序列表1</li>
	<li>我是无序列表2</li>
	<li>我是无序列表3</li>
</ul>

预览：
在这里插入图片描述

⑤ol：有序列表

<ol>
	<li>我是有序列表1</li>
	<li>我是有序列表2</li>
	<li>我是有序列表3</li>
</ol>

预览：
在这里插入图片描述

⑥li：结合列表使用

（二）行内元素

（1）特征

不是独占一行
由左到右进行排列

（2）常用标签

①a

href属性：用来设置超链接的地址

<a href="http://www.baidu.com">百度</a>

预览：

点击“百度”会跳到超链接的网址
在这里插入图片描述

②Span

<span>我是行内元素span</span>
<span>我是行内元素span</span>
<span>我是行内元素span</span>

预览：
在这里插入图片描述

③Img

src属性：设置图片路径
alt属性：当图片无法正常显示时，设定显示的默认文字，可用此标签

<img src="H:\图片.jpg" alt="图片无法正常显示">

预览：
在这里插入图片描述

④address：显示地址

html5新增特性，以倾斜的字体显示地址

<address>

网址：www.baidu.com

地址：交叉十字路口处

</address>

预览：
在这里插入图片描述
认真看文章的朋友，送你们一个小技巧： 在网页中插入百度地图↓↓↓

1、点击网址
2、点击开始制作
3、设置基本信息
在这里插入图片描述
4、设置地图规格

5、复制代码成功生成地图

<body>
<address>
<iframe width="504" height="751" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://j.map.baidu.com/s/ttGHFb"></iframe>
</address>
</body>

在这里插入图片描述

⑤Input——表单元素

单闭合标签，经常和 form 标签一起使用（form是块元素）
包括：输入框、单选框、复选框、提交按钮、日历、颜色、密码、进度条等

    <form>
        <p>
            用户名：<input type="text"/>
        </p>
        <p>
            密&nbsp;&nbsp;&nbsp;码：<input type="password"/>
        </p>
        <p>
            日历：<input type="date"/>
        </p>
        <p>
            你喜欢的颜色：<input type="color"/>
        </p>
        <p>
            你的身高：<input type="range"/>
        </p>
        <p>
            你喜欢的食物：
            <input type="checkbox"/>烤鸭
            <input type="checkbox"/>烤鸭
            <input type="checkbox"/>烤鸭
        </p>
        <p>
            你喜欢的国家：
            <input type="radio" name="A"/>中国
            <input type="radio" name="A"/>韩国
            <input type="radio" name="A"/>美国
        </p>

        <p>
            <input type="submit"/>
        </p>
    </form>
</body>

预览：
在这里插入图片描述

⑥audio——音频标签

支持格式：mp3、ogg、wav
src：设置所播放音频的路径
controls：显示默认控制条
autoplay：自动播放（因为浏览器的兼容性问题，有的浏览器无法自动播放）
muted：静音
loop：循环播放

<body>
    <audio src="H:/李白台词.mp3" controls autoplay loop></audio>
</body>

预览：
在这里插入图片描述

⑦video——视频标签

<body>
<video src="H:\影像资料\视频素材\20年生日\祝我的傻狗生日快乐.mp4" controls></video>
</body>

预览：
在这里插入图片描述

结语

以上就是HTML的基础语法啦，html其实是很简单的一门语言！
想学的朋友们，看完这篇文章，你已经成功了一大半啦~

cakeAndAle

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
14
评论
【HTML】快速入门基础知识总结

HTML基础知识总结，看完这篇文章，分分钟快速入门~
复制链接

扫一扫

专栏目录

【HTML】快速入门 基础知识总结

目录

前言

正文

一、HTML简介

二、开发工具

三、语法格式

（1）标签格式

（2）页面骨架

四、常用标签

（一）块元素（block）

（1）特征

（2）常用标签

①h1~h6：标题

②div：盒子标签

③p：段落

④ul：无序列表

⑤ol：有序列表

⑥li：结合列表使用

（二）行内元素

（1）特征

（2）常用标签

①a

②Span

③Img

④address：显示地址

⑤Input——表单元素

⑥audio——音频标签

⑦video——视频标签

结语

“相关推荐”对你有帮助么？

【HTML】快速入门基础知识总结