|
你是不是想过平常看的网站是怎么制作出来的，并且亦想做一个自己的网站去展示作品、做电商、或公司形象官网，又或是想做一名专业的前端工程师，那样这个 5 分钟的视频将教会你网页制作必须的技能 HTML。
什么是 HTML
HTML 全叫作是 HyperText Markup Language(超文本标记语言)。想要理解 HTML 很容易，只必须把它想象成是写 word 文档，office word 有图形化界面方便对文字和照片排版，而 HTML 则是用标签来掌控排版，跟 word 相比，HTML 是纯文本，体积小更适合在网络上进行传输，因此浏览器默认支持 HTML 网页的解析。
编写 HTML
研发工具
编写 HTML 只必须运用普通的记事本，亦能够用高级的代码编辑器，这儿举荐运用 visual studio code。把这个文本文件的后缀名改为 .html，双击它或拖到浏览器里就能够拜访这个网页。
HTML 文件的固定结构
HTML 文件有固定的结构。开头写上： <!DOCTYPE html>
告诉浏览器这是一个 html 文档，而后它下边是<html>根标签，亦便是最顶层： <html></html>
标签都是成对显现的，每一个标签运用尖括号加上标签名，结束标签在尖括号的起始写上斜杠/，标签里边能够是文本或嵌套其他标签。
接下来是<head>和<body>部分，<head>里面是定义文档的描述信息，例如网站的标题<title>，它会表示在浏览器上；<body> 标签里是详细的网站内容，相当于 word 的正文： <!DOCTYPE html><html> <head> <title>第1个网页</title> </head> <body></body></html>
常用标签
在起始写网页内容之前，先来认识几个常用的标签：
标题
标题标签，类似于 word 中的标题格式，有 6 级，从 h1 到 h6，标题字号会越来越小，文字都是加粗表示： <h1><h2><h3><h4><h5><h6>例如表示 6 个标题层级： <h1>这是1级标题</h1><h2>这是2级标题</h2><h3>这是3级标题</h3><h4>这是4级标题</h4><h5>这是5级标题</h5><h6>这是6级标题</h6>
这是1级标题
这是2级标题
这是3级标题这是4级标题这是5级标题这是6级标题段落标签
段落标签就像是 word 里的正文文本，用<p>来暗示。例如表示一段正文： <p>这是一段正文</p>
这是一段正文
文本样式标签
文本样式标签与 word 文档中的功能一模同样，<b>表率加粗，<i>表率斜体，<sub>表率下标，<del>表率删除的文本，<br>表率换行，例如下边的文本： <p> 这是一段文本，<b>我是加粗的</b>，<i>我是斜体</i>，带下标的：x<sub>2</sub ><del>我是带删除线的文本</del>，<br/>
我是下一行。 </p>
会表示成：
这是一段文本，我是加粗的，我是斜体，带下标的：x2，我是带删除线的文本
， 我是下一行。
倘若标签之间无其他子标签或文本内容，能够直接在起始标签结束前写上斜杠来结束它，例如例子中的 <br/>。
列表标签
列表标签分为两种，一种是没序列表，用<ul>暗示，一种是有序列表，用<ol>暗示，里边都运用<li>暗示列表项，例如： 没序列表<ul> <li>列表项</li> <li>列表项</li> <li>列表项</li></ul>
列表项
列表项
列表项 有序列表<ol> <li>列表项</li> <li>列表项</li> <li>列表项</li></ol>
列表项
列表项
列表项
超链接标签
超链接亦跟 word 中的同样，用来转到其他 html 文件或外边网站，运用<a>标签，并运用 href 属性设置链接，属性是写在标签中的，以等于号分隔的配置项，等号左边是要配置的项目，右边是值，例如： <a href="http://www.bilibili.com">转到 B 站</a>
转到 B 站
点击转到 B 站 就会转到href指定的网址。
多媒介标签照片标签
照片标签用来表示照片，运用<img>标签，而后运用src属性指定照片路径，例如： <img src="./image.jpg" />
这儿./表率当前目录，这儿只要 html 文件同级目录下有名为image.jpg的文件，就能够把照片表示出来。亦能够指定网络上的照片的 url 位置。下边的视频和音频标签亦是同样。 视频标签
视频用<video>标签，它亦运用src属性指定路径： <video src="./video.mp4" controls></video>音频标签
音频运用<audio>标签： <audio src="./music.mp3" controls></audio>
div 标签
div 标签能够想象成是用来对其他标签进行分组，把关联的页面区域放到一个 div 下边，以方便调节样式和布局，它无实质道理，然则它是最常用的标签。假如有一个卡片页面组件，咱们能够把卡片标题和内容放到一个 div 下边，这个 div 便是卡片整体： <div> <h3>卡片标题</h3> <p>卡片内容</p></div>
卡片标题
卡片内容
布局标签
在 HTML5 出来以前，网页的布局都是运用 div 来分隔区别的部分，例如网页头部、导航、侧边栏、内容、底部等，这般所有都是 div 非常难以辨认，因此 HTML5 针对这些出了专门的标签，它们其实只是换了名字的 div，然则会让网页布局标签更有道理，运用<header>表率头部，<nav>表率导航，<aside>表率侧边栏，<main>表率内容，<footer>表率底部，<article>表率文案，<section>表率分区，例如首屏轮播图是一个 section，机构业务介绍是另一个 section。
更加多的标签和用法能够到：
w3schools 英文版
w3school 中文版
上边去查看。
实例
最后来看一个简单的、完整的 html 页面例子，起始有一个导航，导航下有首页和关于咱们两个子菜单，接下来是头部信息，能够是轮播图或 hero 照片，再下边是侧边栏，重点内容区，重点内容区里有博客部分和机构业务部分，最后是底部信息： <!DOCTYPE html><html> <head> <title>第1个网页</title> </head> <body> <nav> <a href="/">首页</a> <a href="./about_me.html">关于咱们</a> </nav> <header>
头部信息 </header> <aside>
侧边栏 </aside> <main> <section> <article>这是一篇机构的博客</article> </section> <section> <h3>机构业务</h3> <div> <div>网站研发</div> <div>软件研发</div> <div>App研发</div> </div> </section> </main> <footer>底部信息</footer> </body></html>
此刻，你就学会编写 HTML 网页了。什么？跟想象的不同样？那是由于还必须一个叫 CSS 的技术来给网页进行修饰和美化，咱们后边的视频继续！
我是峰华，感谢观看！
点击阅读原文查看更加多、更新文案！ 
| 
发表于 2024-6-29 11:59:52