七分钟学会 HTML 网页制作

  • 七分钟学会 HTML 网页制作已关闭评论
  • 20 次浏览
  • A+
所属分类:Web前端
摘要

点击打开视频讲解更加详细推荐使用:VS Codehtml根标签,标签都是成对出现的,标签中可以嵌套文本或其他标签


什么是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> 

效果:
七分钟学会 HTML 网页制作

段落标签

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

效果:
七分钟学会 HTML 网页制作

文本样式标签

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

效果:
七分钟学会 HTML 网页制作

列表标签

无序列表

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

效果:
七分钟学会 HTML 网页制作

有序列表

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

效果:
七分钟学会 HTML 网页制作

超链接标签

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

效果:
七分钟学会 HTML 网页制作

多媒体标签

图片标签

<img src="./smiley.gif" alt="七分钟学会 HTML 网页制作"> 

视频标签

<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站一键三连哦!感谢支持!