当前位置：生活小常识 > 数码知识 >

优质

构成前端页面的三层（html底层）

林黎优秀作者

原创内容来源：小居数码网时间：2024-08-11 16:14:01 阅读() 收藏：57 分享：41 爆

导读：您正在阅读的是关于【数码知识】的问题，本文由科普作家协会，生活小能手，著名生活达人等整理监督编写。本文有1509个文字，大小约为6KB，预计阅读时间4分钟。

01-HTML基础第1章基础语法html是超文本标记语言<head>,<title>标签里的内容不会在网页文档中显示<hr/>标签是水平线，不需要成对出现注释代码：

html底层

01-HTML基础

第1章基础语法

html是超文本标记语言
<head>,<title>标签里的内容不会在网页文档中显示
<hr/>标签是水平线，不需要成对出现
注释代码：

<!DOCTYPE html><html><head><title>hello</title></head><body bgcolor="grey"><p>HELLO,everyone.This is my first page!</p></body></html>

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的并在后台私信我：前端，即可免费获取。

第2章文章段落

2.1 文档声明和META标签

<html>,<body>,<head>标签是html文档结构标签，<!DOCTYPE HTML>不属于html标签，它用于定义文档类型

网页中不能正常显示中文，出现乱码现象，使用meta标签设置编码格式：<meta charset="utf-8">

<!DOCTYPE html><html><head><title>第一个网页</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/></head><body>大家好，一起来学习html标记语言</body></html>

3.如果想在html页面中显示空格，使用

标题标签：<h1></h1>~<h6></h6>

段落标签：

align对齐属性值：

left:左对齐内容

right:右对齐内容

center:居中对齐内容

justify:对行进行延申，这样每行都可以有相等的长度

换行标签

5.一个标签代表一个段落，两个标签中的文本内容不在同一行，在标签中，使用 文本内容的位置只是换行，其实还是一个段落

6.<pre></pre>标签用于预定义格式显示文本，即文本在浏览器中显示时遵循在HTML原文档中定义的格式

<!DOCTYPE html><html><head><title>练习1</title><meta http-equiv="Content-Type" content="text/http;charset=utf-8"/></head><body><h3 align="center">《早发白帝城》</h3><p align="center">朝辞白帝彩云间，千里江陵一日还。</p><p align="center">两岸猿声啼不住，轻舟已过万重山。</p></body></html>

<!DOCTYPE html><html><head><title>练习2</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/></head><body><h1>敕勒歌</h1><h2>朝代：南北朝</h2><h3>作者：佚名</h3><p>  敕勒川，<br/>     阴山下，<br/>     天似穹庐，<br/></p><pre>  笼盖四野，   天苍苍，   野茫茫，风吹草低见牛羊。</pre></body></html>

2.2 文字和段落标签

文字斜体：和

加粗：和

下标：

上标：

特殊符号

任务

<!DOCTYPE html><html><head><title>任务</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/></head><body><p align="center">关于我们  |  招聘信息  |  联系我们  |  意见反馈</p><hr/><p align="center">Copyright © 2016 imooc.com All Rights Reserved</p></body></html>

<!DOCTYPE html><html><head><title>任务</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/></head><body><p>公式:x<sup>2</sup>+x=0 解:x<sub>1</sub>=0;x<sub>2</sub>=-1</p></body></html>

第3章列表标签

3.1 列表标签-无序列表

<!DOCTYPE html><html><head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/></head><body><ul type="disc"><li>朝辞白帝彩云间，</li><li>千里江陵一日还，</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山，</li></ul><ul type="square"><li>朝辞白帝彩云间，</li><li>千里江陵一日还，</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山，</li></ul></body></html>

3.2 列表标签-有序列表

<!DOCTYPE html><html><head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/></head><body><ol type="a"><li>朝辞白帝彩云间，</li><li>千里江陵一日还，</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山，</li></ol><ol type="i"><li>朝辞白帝彩云间，</li><li>千里江陵一日还，</li><li>两岸猿声啼不住，</li><li>轻舟已过万重山，</li></ol></body></html>

3.3 列表标签-定义列表

<dt><dd>是同级标签

第四章图像和超链接

4.1 图像

图像标签

绝对路径：

相对路径：

效果图

<!DOCTYPE html><html><head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/></head><body><p>一幅图像:<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jpg" width="30%"></p><p>一幅动画图像:<img src="http://climg.mukewang.com/58c11324000144f703550220.jpg" height="50px" width="50px"></p></body></html>

4.2 超链接

超链接标签

空链接：<a href="#"> </a>

4.3 锚链接

定义锚（同一页面）

任务：

<!DOCTYPE html><html><head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/></head><body><p><a name="dingbu">这里是顶部</p><p><a href="#shuiguo">水果</p><p><a href="#shucai">蔬菜</p><p><a href="#yundong">运动</a></p><h3><a name="shuiguo">水果</a></h3><ul><li>香蕉</li><li>苹果</li><li>葡萄</li><li>梨</li><li>西瓜</li><li>樱桃</li><li>菠萝</li><li>橙子</li><li>柚子</li><li>芒果</li></ul><p><a href="#dingbu">返回顶部</a></p><h3><a name="shucai">蔬菜</a></h3><ul><li>西红柿</li><li>黄瓜</li><li>土豆</li><li>芹菜</li><li>蒜苔</li><li>西葫芦</li><li>香菇</li><li>菠菜</li><li>豆角</li><li>油菜</li></ul><a name="yundong"></a><p><a href="#dingbu">返回顶部</a></p></body></html>

定义锚（不同页面）

4.3 链接扩展功能

1. 电子邮件链接

2.文件下载

<!DOCTYPE html><html><head><title>3</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/></head><body><a href="mailto:2539391306@qq.com.cn">邮箱链接</a><a href="58ca5b6700018dfc02400135.zip">文件下载</a></body></html>

上面就是小居数码小编今天给大家介绍的关于（html底层）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

（581）个朋友认为回复得到帮助。

部分文章信息来源于以及网友投稿，转载请说明出处。

本文标题：构成前端页面的三层（html底层）：http://sjzlt.cn/shuma/154685.html

上一篇：多个文件名导出（把多个file文件导出zip）

下一篇：CAD图案填充边界（autocad图案填充创建边界）