页面效果展示视频加载中...
页面完整代码<!DOCTYPE HTML>
<html>
<head>
<title>基础网页制作HTML练习</title>
<style>
a:hover{background-color:yellow;}
</style>
</head>
<body>
<div style="width:5%;margin:auto;">
<! --使页面居中显示，并展视窗5%宽度 -->
<div style="position:fixed;top:px;">
<! --使导航菜单悬停在顶端 -->
<a style="margin:px px px 1px;" href="#chapter1">HTML基础</a>
<a style="margin:px px px px;" href="#chapter2">排版元素</a>
<a style="margin:px px px px;" href="#chapter3">列表元素</a>
<a style="margin:px px px px;" href="#chapter4">表单元素</a>
</div>
<! --使导航菜单悬停在顶端（结尾） -->
<div style="margin:px px px px;width:6px;overflow:hidden;">
<! --小div套大div隐藏滚动条 -->
<div style="margin:px px px 8px;width:61px;height:5px;overflow-y:scroll;overflow-x:hidden;">
<! --小div -->
<h a href="#chapter1">
基础HTML结构
</h>
p>
HTML是HyperText Markup Language的缩写，即超文本标记语言。它是一种用于创建网页的标准标记语言。一个简单的HTML页面通常包括以下结构：
<head>：包含页面的元数据和信息；
<body>：包含页面显示的内容；
在HTML中，所有的元素都需要用标签包裹，例如<body>标签、<h1>标签等。
</p>
<h a href="#chapter2">
排版元素
<h>
p>
为了使网页更易于阅读和理解，我们需要使用一些排版元素。以下是一些常用的排版元素：
<b>：使文本加粗；
<i>：使文本倾斜；
<u>：使文本下划线显示；
<sup>：将文本上标显示；
<sub>：将文本下标显示。
</p>
<h a href="#chapter3">
列表元素
<h>
p>
在HTML中，我们可以使用以下列表标签来创建不同类型的列表：
<ul>：无序列表；
<ol>：有序列表；
<li>：列表项。
</p>
<h a href="#chapter4">
表单元素
<h>
p>
表单是网页收集用户输入数据的一种方式。以下是一些常用的表单元素：
<form>：定义一个表单；
<label>：为表单输入框指定标签；
<input>：用于创建输入字段，如文本框、密码框等；
<select>：创建下拉列表；
<option>：为下拉列表添加选项。
</p>
img border="" src="img/image1.jpg"semap="#map"/>
<! --图片区域链接 -->
<map name="map"id="map">
<area shape="poly"coords="14,6,186,175,46,6,4,98,6,,96,8,478,1,516,46,496,4,,158,48,14,6,19,,18"href="https://www.zhih.com/question/8464168"title="基础HTML元素分析"/>
<! --必须保证画面尺寸与页面显示尺寸一致！ -->
</map>
<! --小div(结尾) -->
</div>
<! --小div套大div隐藏滚动条（结尾） -->
</div>
<! --使页面居中显示，并展视窗5%宽度（结尾） -->
</div>
<! --小div套大div隐藏滚动条（结尾） -->
<div>
<! --使页面居中显示，并展视窗5%宽度（结尾） -->
</div>
<! --小div套大div隐藏滚动条（结尾） -->
</body>
</html>
页面制作技术解析1.
页面内容居中显示方法。
导航栏悬停顶端方法。
鼠标滑过导航标题或链接时改变背景色提示。
隐藏滚动条方法4。
图片区域链接大家结合代码和技术解析，先自行分析一下每段代码的作用，以及它们之间的前后关系。
这一步练习对培养代码阅读能力很有好处，希望大家可以先自行阅读分析。
下一次，我会逐步演示“页面制作技术解析”中的五个步骤以及一些注意事项。
使用碎片时间，学习完整知识！
关注大鱼师兄，一起精研技艺。
目录HTML序章（学习目的、对象、基本概念）——零基础自学网页制作HTML是什么？
——零基础自学网页制作第一个HTML页面如何写？
——零基础自学网页制作HTML页面中head标签有啥用？
——零基础自学网页制作初识meta标签与SEO——零基础自学网页制作HTML中的元素使用方法1——
零基础自学网页制作HTML中的元素使用方法——零基础自学网页制作HTML元素中的属
性1——零基础自学网页制作HTML元素中的属性（路径详解）——零基础自学网页制作使用
HTML添加表格（基本元素）——零基础自学网页制作使用HTML添加表格（表格头部与底
部）——零基础自学网页制作使用HTML添加表格（间距与颜色）——零基础自学网页制 作表格4（行颜色与表格嵌套）——零基础自学网页制作16进制颜色表示与RGB色彩模
型——零基础自学网页制作HTML中的块级元素与内联元素——零基础自学网页制作初识HTML
中的<div>块元素——零基础自学网页制作在HTML页面中嵌入其他页面的方法——零基础自 学网页制作封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作HTML表
单元素初识1——零基础自学网页制作HTML表单元素初识——零基础自学网页制作HTML表单
（下拉列表、多行文字输入）——零基础自学网页制作HTML表单4（form的action、method 属性）——零基础自学网页制作HTML列表制作讲解——零基础自学网页制作为HTML页面添
加视频、音频的方法——零基础自学网页制作音视频格式转换神器与html视频元素加字幕——
零基础自学网页制作HTML中使用<a>标签实现文本内链接——零基础自学网页制作HTML图片区 域链接方法详解——零基础自学网页制作HTML图片区域链接注意事项与Gimp基本用法——
零基础自学网页制作用HTML制作一个简单页面(详解)——零基础自学网页制作（完结篇）
Comments are closed.