头歌-HTML基础

已于 2023-03-06 19:36:39 修改
阅读量1.2w 收藏 202
点赞数 28
文章标签： html 前端 javascript
于 2023-03-06 17:15:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/somewon/article/details/129366472
版权
这篇文章是一系列HTML学习的关卡，涵盖了从创建基本标签如h1,p,a,img,div，到文本处理、链接、表格、表单元素的使用，包括文本框、密码框、单选、多选、标签和属性等，逐步深入HTML的语法和功能。
摘要由CSDN通过智能技术生成

目录

HTML-基本标签

第一关 创建第一个HTML标签

第二关 创建h2>-h6>标签

第三关 创建p标签

第四关 创建a标签

第五关 创建img标签

第六关 创建div标签

第七关 添加注释

HTML-文本

第一关：HTML链接：带超链接的网页

第二关：HTML标题与段落：网络文章网页

第三关：HTML表格：日常消费账单表格展示网页

HTML-基础

第一关：初识HTML：简单的Hello World网页制作

第二关：HTML结构：自我简介网页

 HTML-表单类标签

第一关：表单元素——文本框

第二关：表单元素——密码框

第三关：表单元素——单选框

第四关：表单元素——多选框

第五关：表单元素——checked属性

第六关：表单元素——disabled 属性

第七关：表单元素——label 标签

第八关：表单元素——下拉列表

第九关：表单元素——文本域

第十关：表单元素——提交按钮

第十一关：表单元素的综合案例

HTML-基本标签

第一关 创建第一个HTML标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>Hello</h1>
    <!-- ********* Begin ********* -->
    <h1>welcome to Educoder</h1>
    <!-- ********* End ********* -->
</body>
</html>

第二关 创建h2>-h6>标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>创建不同字体大小的标题</h1>
    <!-- ********* Begin ********* -->
	<h2>创建不同字体大小的标题</h2>
	<h3>创建不同字体大小的标题</h3>
	<h4>创建不同字体大小的标题</h4>
	<h5>创建不同字体大小的标题</h5>
	<h6>创建不同字体大小的标题</h6>
    <!-- ********* End ********* -->
</body>
</html>

 第三关 创建p标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <p>我是一个段落</p>

    <!-- ********* End ********* -->
</body>
</html>

 第四关 创建a标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <a href="https://www.educoder.net">Educoder平台</a>

    <!-- ********* End ********* -->
</body>
</html>

 第五关 创建img标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <img src="https://www.educoder.net/attachments/download/207801" alt="小狗走路"/>

    <!-- ********* End ********* -->

</body>
</html>

 第六关 创建div标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h2>我是h2标签</h2>
    <p>我是p标签</p>
    <!-- ********* Begin ********* -->
    <div>我是div标签</div>


    <!-- ********* End ********* -->
</body>
</html>

第七关 添加注释

平台受限，简单注释就成！

HTML-文本

第一关：HTML链接：带超链接的网页

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML链接</title>
    <meta name="description" content="HTML链接知识讲解">
    <meta name="keywords" content="HTML, Link">
</head>
  <!--------- Begin-------->

<body>
    <h1>HTML 入门</h1>
    <h2>本页目录</h2>
    <ul>
        <li><a href="#toc1">简介</a></li>
        <li><a href="#toc2">第1关</a></li>
        <li><a href="#toc3">第2关</a></li>
    </ul>

    <h2 id="toc1">简介</h2>
    <p>
        <a href="https://en.wikipedia.org/wiki/HTML" target="_blank">HTML</a>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
        <a href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSS</a>(Cascading Style Sheets，级联样式表单)和
        <a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a>的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。</p>
    <p>自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。</p>
    
    <h2 id="toc2">第1关</h2>
    <p>初识HTML：简单的Hello World网页</p>
    <h2 id="toc3">第2关</h2>
    <p>HTML链接：带超链接的网页</p>
    <hr>
    <p>若需帮助，请发送问题到<a href="mailto:someone@email.com">E-Mail</a>。</p>
    <p><a href="#">回到顶部</a></p>
</body>
  <!--------- End-------->

</html>

第二关：HTML标题与段落：网络文章网页

<!DOCTYPE html>

<head>
    <meta charset="UTF-8" />
    <title>HTML – 维基百科</title>
</head>
  <!--------- Begin-------->

<body>
    <h1>HTML</h1>
    <p>超文本标记语言(HTML)是一种标准化的用来创建Web页面和Web应用的标准化的
        <a href="https://en.wikipedia.org/wiki/Markup_language" title="Markup language" target="_blank">标记语言</a>。 在级联样式表单(CSS)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台<sup><a href="#ref1">[1]</a></sup>。
    </p>
    <h2>历史</h2>
    <h3>开发过程</h3>
    <p>1980年，物理学家<a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" title="Tim Berners-Lee" target="_blank">Tim Berners-Lee</a>，
        <a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERN</a>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIRE</a>系统。该系统的目的是为CERN研究人员提供一种使用和分享文档。1989年， Berners-Lee写了一个备忘录，提出了基于Internet-based
        <strong>超文本系统</strong><sup><a href="#ref2">[2]</a></sup>。
    </p>
    <h3>HTML里程碑</h3>
    <dl>
        <dt>1995年11月24日</dt>
        <dd>HTML2.0发布，对应的IETF文档为<a class="external mw-magiclink-rfc" rel="nofollow" href="https://tools.ietf.org/html/rfc1866" target="_blank">RFC 1866</a>。</dd>
        <dt>1997年1月14日</dt>
        <dd>HTML 3.2以
            <a href="https://en.wikipedia.org/wiki/W3C_Recommendation" class="mw-redirect" title="W3C Recommendation" target="_blank">
                <abbr title="World Wide Web Consortium">W3C</abbr>推荐标准</a>的形式发布。 随后的HTML标准都由W3C组织发布。</dd>
        <dt>1997年12月18日</dt>
        <dd>HTML 4.0发布<sup><a href="#ref3">[3]</a></sup>。</dd>
        <dt>2014年10月28日</dt>
        <dd>HTML5 发布。</dd>
        <dt>2016年11月1日</dt>
        <dd>HTML 5.1发布。</dd>
    </dl>
    <h2>参考文献</h2>
        <ol>
        <small>
            <li id='ref1'>Flanagan, David. <i>JavaScript - The definitive guide</i> (6 ed.). p.&#160;1. "JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages."</li>
            <li id="ref2">Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). </li>
            <li id="ref3">"HTML 4.0 Specification — W3C Recommendation — Conformance: requirements and recommendations". World Wide Web Consortium. December 18, 1997. Retrieved July 6, 2015.</li>
        </small>
        </ol>
</body>
  <!--------- End-------->

</html>

 第三关：HTML表格：日常消费账单表格展示网页

<!DOCTYPE html>
<html>
  <!--------- Begin-------->

<head>
    <meta charset="utf-8">
    <title>HTML表格</title>
    <meta name="description" content="HTML表格知识讲解">
    <meta name="keywords" content="HTML,表格, Table">
    <style type="text/css">
    table {
        border-collapse: collapse;
    }

    caption {
        font-weight: bold;
        margin-bottom: .5em;
    }

    th,
    td {
        padding: .5em .75em;
        border: 1px solid #000;
    }

    tfoot {
        font-weight: bold;
    }
    </style>
</head>

<body>
    <table border="1" style="margin:auto" width="400">
        <caption>日常消费账单</caption>
        <thead>
            <!-- 表格头部 -->
            <tr>
                <th align="left" scope="col">消费项目</th>
                <th align="right" scope="col">一月</th>
                <th align="right" scope="col">二月</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th align="left" scope="row">食品烟酒</th>
                <td align="right">￥1241.00</td>
                <td align="right">￥1250.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">衣物</th>
                <td align="right">￥330.00</td>
                <td align="right">￥594.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">居住</th>
                <td align="right">￥2100</td>
                <td align="right">￥2100</td>
            </tr>
            <tr>
                <th align="left" scope="row">生活用品及服务</th>
                <td align="right">￥700.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">医疗保健</th>
                <td align="right">￥150.00</td>
                <td align="right">￥50.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">教育、文化和娱乐</th>
                <td align="right">￥1030.00</td>
                <td align="right">￥1250.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">交通和通信</th>
                <td align="right">￥230.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">其他用品和服务</th>
                <td align="right">￥130.40</td>
                <td align="right">￥150.00</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表格尾部 -->
            <tr>
                <th align="left" scope="row">总计</th>
                <th align="right">￥5911</th>
                <th align="right">￥6694</th>
            </tr>
        </tfoot>
    </table>
</body>
  <!--------- End-------->

</html>

HTML-基础

第1关：初识HTML：简单的Hello World网页制作

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello world</title>
  </head>  
    <!--------- Begin-------->

  <body bgcolor="F6F3D6">
    <!--用HTML语言向世界打声招呼吧！-->
    <h1 align="center">Hello World</h1>
    <p align="center">动手改变世界</p>
  </body>
    <!--------- End-------->

</html>

第二关：HTML结构：自我简介网页

 

<!DOCTYPE html>
<html>
    <!--------- Begin-------->

  <head>
    <meta charset="utf-8">
    <title>自我简介</title>
    <meta name="description" content="XXX的自我简介网站">
    <meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">
  </head>
  <body>
    <h1 align="center">自我简介</h1>

    <h2>简介</h2>
    <p>榆木脑袋！</p>

    <h2>三个与你最有关的词</h2>
    <p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p>
    <ul>
        <li>听歌</li>
        <p>喜欢听歌</p>
        <li>游戏</li>
        <p>喜欢玩游戏</p>
        <li>唱歌</li>
        <p>喜欢唱歌</p>
    </ul>
</body>
  <!--------- End-------->

</html>

 HTML-表单类标签

第一关：表单元素——文本框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <input type="text" name="nickName" />

    <!-- ********* End ********* -->
</body>
</html>

 第二关：表单元素——密码框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <input type="password" name="check" value="123" />

    <!-- ********* End ********* -->
</body>
</html>

第三关：表单元素——单选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    1. HTML是什么语言？(单选题)<br>
    <!-- ********* Begin ********* --><p>
    <input type="radio" name="question" />A：高级文本语言 <p>
	<input type="radio" name="question" />B：超文本标记语言 <p>
	<input type="radio" name="question" />C：扩展标记语言 <p>
	<input type="radio" name="question" />D：图形化标记语言 
    <!-- ********* End ********* -->
</body>
</html>

第4关：表单元素——多选框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    休闲方式:<br>
    <!-- ********* Begin ********* --><p>
    <input type="checkbox" name="relax" />逛街 <p>
	<input type="checkbox" name="relax" />看电影 <p>
	<input type="checkbox" name="relax" />宅
    <!-- ********* End ********* -->
</body>
</html>

第五关：表单元素——checked属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    婚姻状况:<br>
    <!-- ********* Begin ********* --><p>
    <input type="radio" name="marry" checked="checked" />未婚<p>
	<input type="radio" name="marry"  />已婚

    <!-- ********* End ********* -->
</body>
</html>

第6关：表单元素——disabled 属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    难度系数:<br>
    <!-- ********* Begin ********* --><p>
    <input type="radio" name="degree" />简单<p>
	<input type="radio" name="degree" />中等<p>
	<input type="radio" name="degree" disabled/>困难
    <!-- ********* End ********* -->
</body>
</html>

 第七关：表单元素——label 标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- ********* Begin ********* -->
    <label for="user" >用户：</label>
    <input type="text" id="user" name="user" /><p>
    <label for="pwd" >密码：</label>
    <input type="password" id="pwd" name="password" />

        
    <!-- ********* End ********* -->
</body>
</html>

 第八关：表单元素——下拉列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    选择版块：
    <!-- ********* Begin ********* -->
    <select>
        
        <option value="" >问答</option>
        <option value="" >分享</option>
        <option value="" >招聘</option>
		<option value="" selected>客户端测试</option>
	<!-- ********* End ********* -->
</body>
</html>

 第九关：表单元素——文本域

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- ********* Begin ********* -->
    <style>
        textarea {
            width:200px;
            height:120px;
        }
    </style>
</head>
<body>
	用一句话描述自己的特点：
    <textarea maxlength="15" ></textarea>
    <!-- ********* End ********* -->
</body>
</html>

 第十关：表单元素——提交按钮

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

    <label for="user">用户：</label><input type="text" id="user" name="user"/><br>
    <label for="pwd">密码：</label><input type="password" id="pwd" name="password" style="margin-bottom: 10px;"/><br>

    <!-- ********* Begin ********* -->
    <input type="submit" value="submit" />


    <!-- ********* End ********* -->
</body>
</html>

 第十一关：表单元素的综合案例

 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<style>
		.container {
			width: 40%;
			margin: 20px auto;
		}

		.common {
			width: 230px;
			height: 30px;
		}

		span {
			display: inline-block;
			width: 150px;

			text-align: right;
		}

		div {
			margin-bottom: 10px;
		}
	</style>
</head>

<body>
	<form class="container">
	<!-- ********* Begin ********* -->
		<div>
			<span>用户名：</span>
			<input type="text" class="common"/>
        </div>
		<div>
			<span>昵称：</span>
			<input type="text" class="common"/>
        </div>
		<div>
            <span>性别：</span>
            <input type="radio" id="male" name="sex"/><label for="male">男</label>
            <input type="radio" id="female" name="sex"/><label for="female">女</label>
            <input type="radio" id="other" name="sex" disabled/><label for="other">保密</label>
		</div>
		<div>
			<span>教育程度：</span>
			<select class="common">
                <option>高中</option>
                <option>中专</option>
                <option>大专</option>
                <option selected>本科</option>
                <option>硕士</option>
                <option>博士</option>
                <option>其他</option>
            </select>
	    </div>
		<div>
			<span>婚姻状况：</span>
				<input type="radio" id="single" name="state" checked/><label for="single">未婚</label>
				<input type="radio" id="married" name="state"/><label for="married">已婚</label>
				<input type="radio" id="secret" name="state"/><label for="secret">保密</label>
		</div>
		<div>
			<span>兴趣爱好：</span>
			<input type="checkbox" id="football" name="hobby"/><label for="football">踢足球</label>
			<input type="checkbox" id="basketball" name="hobby"/><label for="basketball">打篮球</label>
			<input type="checkbox" id="film" name="hobby" checked/><label for="film">看电影</label>
		</div>
		<div>
			<span>描述自己的特点：</span>
			<textarea class="common" maxlength="20"></textarea>
		</div>
		<div>
			<span></span>
			<input type="submit" class="common" value="提交">
        </div>
	<!-- ********* End ********* -->
	</form>
</body>
</html>
_慢漫漫慢
关注
头歌答案HTML——基础
m0_62476845的博客
11-12 5511
自我简介
HTML第一章-基本标签
12-07
HTML第一章-基本标签 欢迎大家参考 多多提意见
头歌存储系统（HUST） 全部七关代码
最新发布
gitblog_09810的博客
09-05 336
头歌存储系统（HUST） 全部七关代码 111111111111111111111112.zip项目地址:https://gitcode.com/open-source-toolkit/f18bb 欢迎来到头歌存储系统（HUST）的学习与实践资源页面！本仓库精心整理并提供了完成从基础到进阶的七项挑战所需的完整代码示例。这是一次深入理解计算机存储体系结构的精彩旅程，适合所有对嵌入式系统、计算机架构...
html基本标签
SmileCatLI的博客
11-13 110
html的基础标签
Educoder/头歌JAVA——HTML：基本标签
舟舟的博客
12-08 4612
HTML是超文本标记语言（HyperText Markup Language），是使用标签来描述网页的一种语言。 本实训从创建第一个标签开始学起，一步一步直到能独立完成一个网页。
头歌：HTML——表格：第2关：表格的属性——宽、高
m0_61690708的博客
11-03 2229
头歌：HTML——表格：第2关：表格的属性——宽、高
头歌 Wed前端技术--实验一 HTML基础
banana_778的博客
03-29 1188
本关任务是编写一个自我简介网页，你将通过本任务理解一个HTML网页的完整结构，并了解如何让搜索引擎更好的找到你的网页。
html语言头部可以包括,html基础（一）
weixin_32126033的博客
06-03 359
第一章. 页面基本元素1.1页面基础元素：是页面的基础元素，主要用来定义页面的开始和结束部分。元素语法结构如下....(开头标记为<>,结束标记为)先介绍一下完整的HTML文件的基本结构 文件开始标记......... 文件头部分的内容 文件头结束标记......... 文件主题部分的内容 文件主题结束标记 文件结束标记在和之间写入想要编辑的页面内容就构成了一个简单的页面1.1.1 文...
头哥（Educoder）HTML表单基础-综合练习，自己完成代码编写
Fury1234的博客
03-04 1691
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .container{ width: 40%; margin: 20px auto; } .common{ width:230px; height: 30px; } span{ displa.
头歌教学实践平台 Web前端开发基础 HTML-表单类的标签
01-20
HTML（HyperText Markup Language）是Web前端开发的基础，用于创建网页结构和呈现内容。在HTML中，表单类的标签是构建用户交互界面的关键元素，它们允许用户输入数据并发送到服务器进行处理。本教程将深入讲解这些...
HTML--PART-1:HTML基础
03-11
在"HTML--PART-1:HTML基础"中，我们将探讨HTML的基本概念、结构和元素。 一、HTML概述 HTML是由W3C（万维网联盟）维护的标准，它定义了网页的结构和内容。HTML文档由一系列标签组成，这些标签告诉浏览器如何显示...
头歌教学实践平台 Web前端开发基础 CSS-表格样式
01-20
"头歌教学实践平台"提供了这个实践课程，帮助学习者掌握CSS在表格样式设计上的应用。 1. **表格的基本结构** HTML表格由`<table>`标签开始，`</table>`标签结束，内部包含`<tr>`（行）标签，`<td>`（单元格）和`...
HTML5+CSS3网页设计基础-第一章-网页设计基础.pptx
12-23
HTML5+CSS3网页设计基础-第1章-网页设计基础 本章主要介绍网页设计的基础知识，包括网页的基本元素、网页的布局结构、创建HTML5页面、HTML5基础等内容。本章的学习目标主要是了解网页上常见的基本元素及其特点，...
HTML---UTF-8基础知识
MUZIOHH的博客
08-18 3120
文献种类：专题技术总结文献； 开发工具与关键技术： VS ,DW与HTML 作者： 朱海丁 ；年级：1904 ；撰写时间：2020 年 08 月 16 日 HTML基础知识 开发工具与关键技术：VS与HTML MySQL 作者：朱海丁 撰写时间：2020年08月16日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 总是不知道为什么，每次编程序时，有这么一句话 <!DO
HTML上部分--头歌（educoder）实训作业题目及答案
热门推荐
qq_35353972的博客
10-09 1万+
HTML--头歌（educoder）实训作业题目及答案
头歌HTML实训笔录
k1elvin的博客
11-26 2625
头歌实训笔录HTML前端基础第2关 创建 - 标签 HTML前端基础 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 ##第1关 创建第一个 HTML 标签 // An highlighted block <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </hea
HTML下部分--头歌（educoder）实训作业题目及答案
qq_35353972的博客
10-12 1万+
HTML上部分--头歌（educoder）实训作业题目及答案
表格的综合案例
weixin_45784564的博客
05-21 4062
任务描述 本关任务：按照以下要求，完成一个复杂的表格创建任务。 创建表格的要求如下： 边框为2px； 宽为100%； cellspacing为0； cellpadding为6； 标题内容为本周财政计划； 在 其它内容和效果图展示的一样。 注意：表格属性的顺序按照创建表格的要求的顺序来写。 实现的效果如下： 编程要求 请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成一个表格的创建任务。 测试说明 平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之
HTML头部标签
mooonk的博客
03-23 477
HTML基础（头部标签） 一、头部标签 代码如下（示例）： 中的标签以及各自作用： （1）双标签，中间是网页名称 day1 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210323175035527.png) （2）meta系列标签 -->charset属性，属性值为浏览器解析源码方法，一般我们使用UTF-8，可以解决网业打开的乱码问题 -->name属性，一般用于当前网页的简单描述，便于搜索 -->
第1关：初识html：简单的hello world网页制作
06-28
### 回答1： 好的，下面是回复： 初学HTML，我们可以先从简单的“Hello World”网页制作开始。这个网页只需要一个标题和一句问候语就可以了。我们可以使用HTML标签来实现这个网页的制作。具体的步骤可以参考教程或者视频教程。 ### 回答2： HTML 是一种标记语言，用于构建诸如网站和应用程序等的原始结构。它是现代互联网基础设施的基础之一，与 CSS 和 JavaScript 等语言一起，为 Web 开发提供了强大的基础。 在 HTML 中，您可以指定标签、元素和属性，以控制 Web 内容的外观和行为。这些标记指令告诉浏览器如何解释页面内容。HTML 文件使用包含在 <html> 标记中的标记来定义Web页面。在这个基础上来现学习HTML，我们需要掌握一些基础的标签和语法。 在初学 HTML 时，我们通常需要使用一些基本的标签创建一个简单的网页，比如 <head>， <title>，和 <body> 标签，同时也会使用 <p> 标签来表示一个段落， <h1>～<h6> 标签用来制定标题等等。代码如下： ```html <!DOCTYPE html> <html> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> <p>Welcome to my webpage!</p> </body> </html> ``` 上面代码不同部分的作用如下： `<!DOCTYPE html>` 定义此文档是 HTML5 类型的文档。 `<html>` 标识一个 HTML 网页。 `<head>` 将文档的头部区域定义为元数据，比如标题和其他信息。 `<title>` 定义文档的标题，显示在浏览器的标题栏中。 `<body>` 定义文档的正文部分。 `<h1>` 标签定义标题。 `<p>` 标签定义段落。 要查看该 HTML 页面的效果，可以将这个代码保存为 `.html` 文件并在浏览器中打开它，您将看到一个简单的 "Hello, World!" 网页。初识 HTML 的 Hello World 做完后，我们需要进一步了解 HTML ，学习更多标签的使用，以及如何添加样式和动态地交互使用者。 ### 回答3： 初识HTML：简单的Hello World网页制作 HTML（Hypertext Markup Language，超文本标记语言）是一种用于创建网页的标记语言。要学习如何制作网页，首先需要了解HTML的基本结构和标记。 在此关卡中，我们将学习如何创建简单的Hello World网页。首先，打开任何文本编辑器（如Notepad, Sublime Text等）开始编写代码。 首先，我们需要定义网页使用的HTML版本。在HTML5版本中，我们需要在文件的开头添加以下代码： <!DOCTYPE html> 接下来，我们需要定义HTML文档的起始和结束标记，它们分别是<html>和</html>。在这两个标记之间，我们可以添加其他HTML元素和标记来创建网页。 例如，要在网页上显示"Hello, World!"，我们可以使用<h1>标记，在它的开始和结束标记之间添加文本。代码如下： <html> <head> <title>我的Hello World网页</title> </head> <body> <h1>Hello, World!</h1> </body> </html> 在这段代码中，我们还添加了一个<head>标记，包含了<title>标记，它定义了网页的标题，显示在浏览器的标签栏上。类似地，我们还添加了<body>标记，定义网页的主体内容。 保存代码为.html文件类型，例如"hello.html"。然后在浏览器中打开它，你将看到网页显示"Hello, World!"的内容。 这是HTML网页制作的入门级别，通过这个关卡，我们可以了解到HTML的特点及基本结构。在日后的学习中，你将更深入地学习HTML，并学习如何通过CSS和JavaScript增强网页的样式和交互性。 总之，HTML是学习网页制作的基石，学习它是构建世界互联网世界的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值