您现在的位置是：首页 > 技术教程正文

头歌-HTML基础

admin 阅读： 2024-03-27

后台-插件-广告管理-内容页头部广告（手机）

HTML-基本标签

第一关创建第一个HTML标签

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

第三关创建p标签

第四关创建a标签

第五关创建img标签

第六关创建div标签

第七关添加注释

HTML-文本

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

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

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

HTML-基础

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

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

HTML-表单类标签

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

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

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

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

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

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

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

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

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

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

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

HTML-基本标签

第一关创建第一个HTML标签

html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<h1>Helloh1>
<h1>welcome to Educoderh1>
body>
html>

第三关创建p标签

html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<p>我是一个段落p>
body>
html>

第四关创建a标签

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

第五关创建img标签

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

第六关创建div标签

html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
<h2>我是h2标签h2>
<p>我是p标签p>
<div>我是div标签div>
body>
html>

第七关添加注释

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

HTML-文本

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

html>
<html>
<head>
<meta charset="utf-8">
<title>HTML链接title>
<meta name="description" content="HTML链接知识讲解">
<meta name="keywords" content="HTML, Link">
head>
<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">HTMLa>(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在
<a href="https://en.wikipedia.org/wiki/CSS" target="_blank">CSSa>(Cascading Style Sheets，级联样式表单)和
<a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScripta>的帮助下，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-Maila>。p>
<p><a href="#">回到顶部a>p>
body>
html>

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

html>
<head>
<meta charset="UTF-8" />
<title>HTML – 维基百科title>
head>
<body>
<h1>HTMLh1>
<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-Leea>，
<a href="https://en.wikipedia.org/wiki/CERN" title="CERN" target="_blank">CERNa>的一位项目负责人，提出并实现了<a href="https://en.wikipedia.org/wiki/ENQUIRE" title="ENQUIRE" target="_blank">ENQUIREa>系统。该系统的目的是为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 1866a>。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">W3Cabbr>推荐标准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 guidei> (6 ed.). p. 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>
html>

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

html>
<html>
<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.00td>
<td align="right">￥1250.00td>
tr>
<tr>
<th align="left" scope="row">衣物th>
<td align="right">￥330.00td>
<td align="right">￥594.00td>
tr>
<tr>
<th align="left" scope="row">居住th>
<td align="right">￥2100td>
<td align="right">￥2100td>
tr>
<tr>
<th align="left" scope="row">生活用品及服务th>
<td align="right">￥700.00td>
<td align="right">￥650.00td>
tr>
<tr>
<th align="left" scope="row">医疗保健th>
<td align="right">￥150.00td>
<td align="right">￥50.00td>
tr>
<tr>
<th align="left" scope="row">教育、文化和娱乐th>
<td align="right">￥1030.00td>
<td align="right">￥1250.00td>
tr>
<tr>
<th align="left" scope="row">交通和通信th>
<td align="right">￥230.00td>
<td align="right">￥650.00td>
tr>
<tr>
<th align="left" scope="row">其他用品和服务th>
<td align="right">￥130.40td>
<td align="right">￥150.00td>
tr>
tbody>
<tfoot>
<tr>
<th align="left" scope="row">总计th>
<th align="right">￥5911th>
<th align="right">￥6694th>
tr>
tfoot>
table>
body>
html>

HTML-基础

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

html>
<html>
<head>
<meta charset="utf-8">
<title>Hello worldtitle>
head>
<body bgcolor="F6F3D6">
<h1 align="center">Hello Worldh1>
<p align="center">动手改变世界p>
body>
html>

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

html>
<html>
<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>
html>

HTML-表单类标签

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

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

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

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

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

html>
<html>
<head>
<meta charset="UTF-8">
head>
<body>
1. HTML是什么语言？(单选题)<br>
<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：图形化标记语言
body>
html>

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

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

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

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

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

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

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

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

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

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

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

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>
<input type="submit" value="submit" />
body>
html>

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

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">
<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>
form>
body>
html>

标签:

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）

头歌-HTML基础

HTML-基本标签

第一关 创建第一个HTML标签

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

第三关 创建p标签

第四关 创建a标签

第五关 创建img标签

第六关 创建div标签

第七关 添加注释

HTML-文本

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

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

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

HTML-基础

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

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

HTML-表单类标签

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

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

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

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

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

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

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

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

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

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

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

第一关创建第一个HTML标签

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

第三关创建p标签

第四关创建a标签

第五关创建img标签

第六关创建div标签

第七关添加注释