「前端开发」html入门之初识html
16 / 0 / 创建于 1年前 /
ice_moss 的个人博客
[toc]
html骨架
在详细信息html前先看一下html的基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小慕医生</title>
<meta name="Description", content="小慕医生是专业的团队">
<meta name="Keywords", content="责任、关爱">
</head>
<body>
<div class="header">
<!-- 网页logo -->
<div class="loge">
<h1>小慕医生</h1>
</div>
</div>
<!-- 轮播图 -->
<div class="banner"></div>
<!-- 主要内容 -->
<div class="content"></div>
<!-- 页脚 -->
<div class="footer">
<!-- 友情链接 -->
<div class="friend-links"></div>
<!-- 地址 -->
<div class="address"></div>
</div>
</body>
</html>head标签
head标签是我们用来给html整个文件做配置的，选择字符集、网页标题、搜索引擎关键字、js/css文件引入等
<!DOCTYPE html>
<html lang="en">
<head>
<!--字符集-->
<meta charset="UTF-8">
<!--网页标题-->
<title>小慕医生</title>
<!--搜索引擎爬取关键字-->
<meta name="Keywords", content="责任、关爱">
</head>
<body> </body>
</html>body标签
body标签用来写网页内容
<h></h>标签
<h></h>标签指标题标签
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h4>
<h6>这是六级标题</h6><p></p>标签
这个是段落标签
<h3>方法一</h3>
<p>下载压缩包：将要下载在 golang 版本和对应操作系统在 golang 中文网或者在 golang 官方下载到本地。</p>
<p>将下载后的压缩包上传服务器</p><div></div> 标签
div又称为盒子， 主要和css用来搭配使用
<div class="box"> </div>css样式
.box {
color: rgb(6, 173, 151);
width: 450px;
background: repeat;
padding: 40px;
text-align: center;
margin: auto;
margin-top: 5%;
font-family: 'Century Gothic', sans-serif;
}实战
这里就以一个还未加入css的网页首页做实战吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小慕医生</title>
<meta name="Description", content="小慕医生是专业的团队">
<meta name="Keywords", content="责任、关爱">
</head>
<body>
<div class="header">
<!-- 网页logo -->
<div class="loge">
<h1>小慕医生</h1>
</div>
<!-- 工具栏 -->
<div class="tool"></div>
<!-- 导航栏 -->
<div class="nav"></div>
</div>
<!-- 轮播图 -->
<div class="banner"></div>
<!-- 主要内容 -->
<div class="content">
<!-- 常用链接 -->
<div clasee="userful-link"></div>
<!-- 动态和公告 -->
<div class="news-and-notice">
<div class="news">
<h2>医院动态</h2>
</div>
<div class="notice">
<h2>医院公告</h2>
</div>
</div>
<!-- 广告图片 -->
<div class="ad-images"></div>
<!-- 科室介绍 -->
<div class="dep-info">
<h2>科室介绍</h2>
</div>
<!-- 专家介绍 -->
<div class="exp-info">
<h2>专家介绍</h2>
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<!-- 友情链接 -->
<div class="friend-links"></div>
<!-- 地址 -->
<div class="address"></div>
</div>
</body>
</html>本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：