本文介绍: HTML——基础、HTML——文本、HTML——多媒体、CSS从入门到精通——基础知识、CSS从入门到精通——基础选择器、CSS从入门到精通——背景样式、CSS入门到精通——表格样式、CSS从入门到精通——盒模型
我这里已经看不见原题目了，只粘贴了有Begin和End部分的代码，如果题目符合但答案不符合的的，欢迎在评论区找我。如果有帮助，请赞一个。注意看目录里有没有你需要的。
一、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>2.HTML结构: 自我简介网页
<!DOCTYPE html>
<html>
<!--------- Begin-------->
<head>
<meta charset="utf-8">
<title>自我简介</title>
<meta name="description" content="XXX的自我简介网站">
<meta name="keywords" content="自我简介,1,2,3">
</head>
<body>
<h1 align="center">自我简介</h1>
<h2>简介</h2>
<p>我是一个大数据专业的学生</p>
<h2>三个与你最有关的词</h2>
<p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p>
<ul>
<li>1</li>
<p>2</p>
<li>1</li>
<p>2</p>
<li>1/li>
<p>2</p>
</ul>
</body>
<!--------- End-------->
</html>二、HTML——文本
1.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>2.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. 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>3.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 scope="col">
<!-- 表格头部 -->
<tr>
<th align="left">消费项目</th>
<th align="right">一月</th>
<th align="right">二月</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>
<td align="right">￥5911</td>
<td align="right">￥6694</td>
</tr>
</tfoot>
</table>
</body>
<!--------- End-------->
</html>三、HTML——多媒体
1.HTML图片: 带图片的菜谱网页
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>HTML - 图片</title>
</head>
<body>
<h1>带图片的菜谱——酸辣藕带</h1>
<h2>食材：</h2>
<p>蒜头3瓣、姜一小块、葱2根、藕带250g、红辣椒3个、花椒1大勺、米醋1大勺、盐适量、糖一小撮、香油一小勺。</p>
<img src="https://www.educoder.net/attachments/download/171680/1.jpg" alt="食材准备" width="400">
<h2>步骤：</h2>
<ol>
<li>蒜头、姜切片。红辣椒用滚刀切条，小葱切葱花。
<br><br>
<img src="https://www.educoder.net/attachments/download/171681/3.gif" alt="步骤1" width="200"></li>
<li>藕带斜切成段
<br><br>
<img src="https://www.educoder.net/attachments/download/171682/4.jpg" alt="步骤2" width="200"></li>
<li>起油锅，下花椒，待轻微冒烟、香气溢出，捞出花椒。下藕带翻炒，加白米醋和盐，炒1~2分钟。
<br><br>
<img src="https://www.educoder.net/attachments/download/171683/5.jpg" alt="步骤3" width="200"></li>
<li>放糖提鲜，撒香油和葱花，翻匀出锅
<br><br>
<img src="https://www.educoder.net/attachments/download/171684/8.gif" alt="步骤4" width="200"></li>
<li>完成。
<br><br>
</ol>
<hr>
<small><p>转自<a href="https://www.xiachufang.com/recipe/102430733/">下厨房-酸辣藕带</a></p></small>
</p>
</body>
</html>2.HTML音频: 音乐播放网页
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>HTML - 音频</title>
</head>
<body>
<audio controls="controls" autoplay= "autoplay" loop="loop">
<h1 align="center">青石巷</h1>
<br>
<div align="center">
<audio controls="controls" height="100" width="100">
<source src="https://www.educoder.net/attachments/download/171686/青石巷.wav" type="audio/wav"/>
<source src="https://www.educoder.net/attachments/download/171685/青石巷.ogg" type="audio/ogg"/>
<source src="https://www.educoder.net/attachments/download/171679/青石巷.mp3" type="audio/mp3"/>
<embed height="100" width="100" src="song.mp3" />
你的浏览器不支持该音频格式。 Your browser does not support this audio format.
</audio>
</div>
<br>
<p align="center" style="color:grey;">HTML5 audio 播放示例</p>
<p align="center" style="color:grey;"><small>注意：音频控件显示效果在不同浏览器中有些许差别。</small></p>
</body>3.HTML视频: 视频播放网页
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>HTML - 视频</title>
</head>
<body>
<h1 align="center">扬帆起航</h1>
<video width="550" control="control">
<source src="./video/Sail-Away.mp4" type="video/mp4" />
<source src="./video/Sail-Away.ogv" type="video/ogv" />
<source src="./video/Sail-Away.webm" type="video/webm" />
<object data="./video/Sail-Away.mp4" width="320" height="240">
<embed src="./video/Sail-Away.swf" width="320" height="240" />
你的浏览器不支持该视频格式。Your browser does not support this video format.
</object>
</video>
<br>
<p align="center" style="color:grey;">HTML5 video 播放示例</p>
<p align="center" style="color:grey;"><small>注意：视频控件显示效果在不同浏览器中有些许差别。</small></p>
</div>
</body>四、CSS从入门到精通——基础知识
1.初识CSS: 丰富多彩的网页样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<style type="text/css">
body {
text-align: center;
}
h1 {
/* ********** BEGIN ********** */
text-align: center;
font-size:40px;
/************ END ********** */
color: #62A8CB;
}
img {
height: 250px;
}
p {
/* ********** BEGIN ********** */
color:grey;
font-size:18px;
/* ********** END ********** */
}
</style>
</head>
<body>
<h1>CSS让网页样式更丰富</h1>
<img src="https://www.educoder.net/attachments/download/189467">
<p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p>
</body>
</html>2.CSS样式引入方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>O Captain! My Captain!</title>
<!-- ********** BEGIN ********** -->
<link rel="stylesheet" href="step2/CSS/style.css">
<!-- ********** END ********** -->
<style type="text/css">
h1 {
color:cornflowerblue;
}
img {
float: left;
margin-right: 1em;
}
p {
font-weight:bold;
}
</style>
</head>
<body>
<div>
<!-- ********** BEGIN ********** -->
<h1 >O Captain! My Captain!</h1>
<!-- ********** END ********** -->
<img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
<p>O Captain! my Captain! our fearful trip is done,
The ship has weather’d every rack, the prize we sought is won,
The port is near, the bells I hear, the people all exulting,
While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p>
<!-- ********** BEGIN ********** -->
<p><small font-size="10px" color="lightslategray">&copy; Walt Whitman</small></p>
<!-- ********** END ********** -->
</div>
</body>
</html>五、CSS从入门到精通——基础选择器
1.CSS元素选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元素选择器</title>
<style type="text/css">
/* ********** BEGIN ********** */
/* 元素选择器 */
html {
background-color:#F0F0F0;
}
header {
padding:40px;
background-color:white;
}
footer {
margin-top: 20px;
font-size:0.6em;
color:grey;
}
/* ********** END ********** */
</style>
</head>
<body>
<div>
<header>
<li><a href="#chosen">精选</a></li>
<li><a href="#news">时事</a></li>
<li><a href="#finance">财政</a></li>
<li><a href="#think">思想</a></li>
<li><a href="#life">生活</a></li>
</header>
<div>
<section>
<h2>精选</h2>
<li>精选新闻1</li>
<li>精选新闻2</li>
<li>精选新闻3</li>
</section>
<section>
<h2>时事</h2>
<li>时事新闻1</li>
<li>时事新闻2</li>
<li>时事新闻3</li>
</section>
<section>
<h2>财政</h2>
<li>财政新闻1</li>
<li>财政新闻2</li>
<li>财政新闻3</li>
</section>
<section>
<h2>思想</h2>
<li>思想新闻1</li>
<li>思想新闻2</li>
<li>思想新闻3</li>
</section>
<section>
<h2>生活</h2>
<li>生活新闻1</li>
<li>生活新闻2</li>
<li>生活新闻3</li>
</section>
</div>
<footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
</div>
</body>
</html>2.CSS类选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>类选择器</title>
<style type="text/css">
/* 元素选择器 */
html {
background-color: #F0F0F0;
}
header {
padding: 40px;
background-color: white;
}
footer {
margin-top: 20px;
font-size: 0.6em;
color: grey;
}
/* 类选择器 */
.main {
margin: 10px;
}
/* ********** BEGIN ********** */
.newsSection {
margin-top: 20px;
padding: 20px;
background-color: white;
}
/* ********** END ********** */
</style>
</head>
<body>
<div class="main">
<header>
<li><a href="#chosen">精选</a></li>
<li><a href="#news">时事</a></li>
<li><a href="#finance">财政</a></li>
<li><a href="#think">思想</a></li>
<li><a href="#life">生活</a></li>
</header>
<!-- ********** BEGIN ********** -->
<div class="newsSection">
<!-- ********** END ********** -->
<section>
<h2>精选</h2>
<li>精选新闻1</li>
<li>精选新闻2</li>
<li>精选新闻3</li>
</section>
<section>
<h2>时事</h2>
<li>时事新闻1</li>
<li>时事新闻2</li>
<li>时事新闻3</li>
</section>
<section>
<h2>财政</h2>
<li>财政新闻1</li>
<li>财政新闻2</li>
<li>财政新闻3</li>
</section>
<section>
<h2>思想</h2>
<li>思想新闻1</li>
<li>思想新闻2</li>
<li>思想新闻3</li>
</section>
<section>
<h2>生活</h2>
<li>生活新闻1</li>
<li>生活新闻2</li>
<li>生活新闻3</li>
</section>
</div>
<footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
</div>
</body>
</html>3.CSSid选择器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ID选择器</title>
<style type="text/css">
/* 元素选择器 */
html {
background-color: #F0F0F0;
}
header {
padding: 40px;
background-color: white;
}
footer {
margin-top: 20px;
font-size: 0.6em;
color: grey;
}
/* 类选择器 */
.main {
margin: 10px;
}
.newsSection {
margin-top: 20px;
padding: 20px;
background-color: white;
}
/* ********** BEIGN ********** */
#chosen {
color:red;
}
#news {
color:blue;
}
#finance {
color:olive;
}
#think {
color:green;
}
#life {
color:orange;
}
/*选择menu元素下的li子元素*/
#menu li {
float: left;
width: 70px;
font-size: 1.2em;
font-weight: lighter;
}
/*选择menu元素下的li子元素和li下得a子元素*/
#menu li, li a {
list-style: none;
text-decoration: none;
}
/* ********** END ********** */
</style>
</head>
<body>
<div class="main">
<!-- ********** BEGIN ********** -->
<header id="menu">
<!-- ********** END ********** -->
<li><a href="#chosen">精选</a></li>
<li><a href="#news">时事</a></li>
<li><a href="#finance">财政</a></li>
<li><a href="#think">思想</a></li>
<li><a href="#life">生活</a></li>
</header>
<div class="newsSection">
<section>
<h2 id="chosen">精选</h2>
<li>精选新闻1</li>
<li>精选新闻2</li>
<li>精选新闻3</li>
</section>
<section>
<h2 id="news">时事</h2>
<li>时事新闻1</li>
<li>时事新闻2</li>
<li>时事新闻3</li>
</section>
<section>
<h2 id="finance">财政</h2>
<li>财政新闻1</li>
<li>财政新闻2</li>
<li>财政新闻3</li>
</section>
<section>
<h2 id="think">思想</h2>
<li>思想新闻1</li>
<li>思想新闻2</li>
<li>思想新闻3</li>
</section>
<section>
<h2 id="life">生活</h2>
<li>生活新闻1</li>
<li>生活新闻2</li>
<li>生活新闻3</li>
</section>
</div>
<footer>Copyright (c) News Copyright Holder All Rights Reserved.</footer>
</div>
</body>
</html>六、CSS从入门到精通——背景样式
1.背景颜色
/* ********** BEGIN ********** */
body {
background-color:ivory;
}
/* ********** END ********** */
h1 {
font-size: 40px;
text-align: center;
}
p {
font-size: 18px;
color: grey;
/* ********** BEGIN ********** */
background-color:lightblue;
/* ********** END ********** */
}
2.背景图片
body {
/* ********** BEGIN ********** */
/*设置背景图片*/
background-image: url(https://www.educoder.net/attachments/download/211106);
/* ********** END ********** */
}
div {
width: 90%;
height: 100%;
margin: auto;
}3.背景定位与背景关联
body {
margin-right: 200px;
/* ********** BEGIN ********** */
/*设置背景图片*/
background: url(https://www.educoder.net/attachments/download/211104) no-repeat fixed right top;;
/* ********** END ********** */
}
div {
width: 90%;
height: 100%;
margin: auto;
}七、CSS入门到精通——表格样式
1.表格边框
table {
/* ********** BEGIN ********** */
border-collapse: collapse;
border: 2px solid black;
/* ********** END ********** */
}
th,
td {
padding: .5em .75em;
}
th {
/* ********** BEGIN ********** */
border: 1px solid grey;
/* ********** END ********** */
}
td {
/* ********** BEGIN ********** */
border: 1px dotted grey;
/* ********** END ********** */
}2.表格颜色、文字与大小
table {
border-collapse: collapse;
border: 2px solid black;
}
caption {
/* ********** BEGIN ********** */
font-size: 20px;
height: 40px;
font-weight: bold;
/* ********** END ********** */
}
th,
td {
/* ********** BEGIN ********** */
height: 50px;
width: 100px;
text-align: center;
/* ********** END ********** */
}
th {
/* ********** BEGIN ********** */
border: 1px solid white;
background-color: lightseagreen;
color: white;
/* ********** END ********** */
}
td {
border: 1px solid grey;
}八、CSS从入门到精通——盒模型
1.透视盒模型: 居中的的盒子页面
* {
margin: 0;
padding: 0;
}
body {
/* ********** BEGIN ***********/
padding: 20px;
/* ********** END *************/
border: 10px solid lightsalmon;
}
h1 {
text-align: center;
}
#box2 {
/* ********** BEGIN ***********/
width: 350px;
padding: 25px;
border: 20px solid yellowgreen;
margin-bottom: 10px;
/* ********** END *************/
}2.确定盒模型元素大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒模型——确定元素大小</title>
<style type="text/css">
.content-box {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
box-sizing: content-box;
/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 216px*/
content-box width: 160px
content-box height: 80px
}
.border-box {
/***************** BEGIN *****************/
width: 216px;
height: 136px;
padding: 20px;
border: 8px solid red;
background: yellow;
box-sizing: content-box;
/***************** END *****************/
padding: 20px;
border: 8px solid red;
background: yellow;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
</body>
</html>原文地址:https://blog.csdn.net/naozibuok/article/details/131359876
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_6475.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
