首页 前端知识 七分钟学会 HTML 网页制作

七分钟学会 HTML 网页制作

2024-03-17 00:03:44 前端知识 前端哥 289 179 我要收藏

什么是HTML

点击打开视频讲解更加详细

  • Hyper Text Markup Language(超文本标记语言)
  • 标签控制排版
  • 体积小,方便传输

编写HTLML

推荐使用:VS Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>末晨曦吖</title>
</head>
<body>
    <div id="app">
        <h1>我的第一个标题</h1>
 
        <p>我的第一个段落。</p>
    </div>
</body>
<style scoped>
    body{
        padding: 0;
        margin: 0;
    }
</style>
</html>

HTML文件结构

<!DOCTYPE html>
<html lang="en">
<head>
    <title>末晨曦吖</title>
</head>
<body></body>
</html>
  • 起始行 <!DOCTYPE html> 告诉浏览器这是一个HTML文档
  • 开始标签 <html>
  • 结束标签 </html>

html根标签,标签都是成对出现的,标签中可以嵌套文本或其他标签

  • <head>中定义文档的描述信息
  • <title> 定义title,它会显示在浏览器上

HTML常用标签

标题标签

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

效果:
在这里插入图片描述

段落标签

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

效果:
在这里插入图片描述

文本样式标签

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub><sup> 上标</sup><br><br>
<del>我是带删除线的文本</del>

效果:
在这里插入图片描述

列表标签

无序列表

<ul>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>

效果:
在这里插入图片描述

有序列表

<ol>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ol>

<ol start="50">
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ol>

效果:
在这里插入图片描述

超链接标签

<a href="https://www.bilibili.com/" target="_blank">跳转到 B 站</a>

效果:
在这里插入图片描述

多媒体标签

图片标签

<img src="./smiley.gif">

视频标签

<video src="./video .mp4" controls></video>

音频标签

<audio src="./audio .mp3" controls></audio>

div标签

块级元素,并没具体的实际意义,主要作用是调整布局样式;

<div>
   <h1>我的第一个标题</h1>

   <p>我的第一个段落。</p>
</div>

布局标签

<headet>头部信息
<nav>导航栏
<aside>侧边栏
<main>内容区域
<footer>底部信息
<article>文章详情
<section>页面分区

更多资料参考

菜鸟教程

w3cschool

若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3880.html
标签
评论
发布的文章

jQuery之class类操作

2024-04-12 20:04:54

jQuery 菜鸟教程学习

2024-04-12 20:04:22

jQuery

2024-01-31 12:01:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!