【免费】html初学案例-刚刚开始学资源-CSDN文库

共144个文件

html：103个

jpg：27个

png：4个

需积分: 0 44 浏览量 2023-01-05 17:55:55 上传评论收藏 8.12MB ZIP 举报

HTML（HyperText Markup Language）是构建网页的基础语言，它用于定义网页的内容结构和样式。作为初学者，了解并掌握HTML的基本元素和语法是至关重要的。本案例将带你一步步走进HTML的世界，开启你的网页制作之旅。我们从基础开始。HTML文档由一系列的元素（elements）组成，每个元素都有自己的开始标签（opening tag）和结束标签（closing tag），例如`<p>`和`</p>`代表一个段落。元素内容放在开始和结束标签之间。例如： ```html <p>这是一个段落。</p> ``` HTML文档的结构通常包括头部（head）和主体（body）。头部用`<head>`标签包裹，其中包含元信息，如文档标题（`<title>`）。主体则用`<body>`标签包裹，展示网页的实际内容。 ```html <!DOCTYPE html> <html> <head> <title>我的第一个HTML页面</title> </head> <body> <h1>欢迎来到我的网页！</h1> <p>这是我的第一个HTML示例。</p> </body> </html> ``` 在上面的例子中，`<!DOCTYPE html>`声明了文档类型，`<html>`是HTML文档的根元素。`<h1>`标签用于创建一级标题，而`<p>`则用于创建段落。 HTML提供了多种元素来组织内容，比如`<div>`（division）用于分组其他元素，`<a>`（anchor）用于创建超链接，`<img>`用于插入图像，`<ul>`和`<li>`用于创建无序列表，`<ol>`和`<li>`用于创建有序列表。例如： ```html <a href="https://www.example.com">访问示例网站</a> <img src="image.jpg" alt="图片描述"> <ul> <li>列表项1</li> <li>列表项2</li> </ul> ``` 此外，HTML5引入了许多新元素，如`<header>`、`<footer>`、`<nav>`、`<article>`和`<section>`，它们帮助创建更加语义化的网页结构，便于搜索引擎理解和用户辅助设备的使用。 CSS（Cascading Style Sheets）是用于控制HTML元素样式的关键技术。通过使用CSS，你可以改变字体、颜色、布局等。例如，你可以为所有的段落设置背景色： ```css p { background-color: lightblue; } ``` 将CSS与HTML结合，可以创建美观且功能丰富的网页。HTML文件可以通过`<link>`标签引用外部CSS文件，或者使用`<style>`标签在HTML文档内部定义样式。在学习HTML时，建议使用文本编辑器编写代码，并通过浏览器实时预览效果。常用的文本编辑器有Sublime Text、Visual Studio Code等，它们都支持代码高亮和自动完成功能，能提高编程效率。 HTML是构建网页的基石，它的学习涵盖了网页结构、元素、属性等内容。通过不断地练习和实践，你将逐渐掌握创建各种复杂网页的能力。这个案例就是一个很好的起点，从简单的页面开始，逐步深入到更复杂的网页设计中去。祝你在HTML的学习道路上一帆风顺！

资源推荐

资源详情

资源评论

收起资源包目录

html初学案例-刚刚开始学（144个子文件）

1.gif 661KB

canvas.gif 276KB

111.gif 232KB

A8.html 9KB

A53.html 5KB

A3.html 3KB

A7.html 3KB

A6.html 3KB

A21.html 2KB

A4.html 2KB

A9 - 副本.html 2KB

A9.html 2KB

A71.html 2KB

A91.html 2KB

A54.html 2KB

A94.html 2KB

A10.html 2KB

A93.html 2KB

A22.html 2KB

A16.html 2KB

A29_2.html 1KB

A11.html 1KB

A2.html 1KB

A42.html 1KB

A19.html 1KB

A20.html 1KB

A90.html 1KB

A89.html 1KB

A52.html 1KB

A99.html 1KB

A100.html 1KB

A98.html 1KB

A36.html 1KB

A96.html 1KB

A72.html 1KB

A80.html 1KB

A25.html 1009B

A95.html 989B

A45.html 974B

A51.html 969B

A23.html 954B

A87.html 940B

A92.html 933B

A73.html 928B

A64.html 899B

A75.html 884B

A18.html 880B

A65.html 860B

A33.html 850B

A41.html 843B

A61.html 842B

A60.html 839B

A32.html 836B

A70.html 829B

A74.html 820B

A43.html 815B

A59.html 806B

A62.html 806B

A55.html 805B

A81.html 792B

A38.html 787B

A40.html 776B

A48.html 776B

A67.html 769B

A68.html 751B

A69.html 731B

A97.html 729B

A66.html 718B

A15.html 698B

A24.html 696B

A37.html 693B

A44.html 667B

A35.html 666B

A57.html 660B

A84.html 654B

A14.html 641B

A49.html 629B

A88.html 626B

A58.html 586B

A17.html 566B

A63.html 558B

A79.html 556B

A50.html 528B

A46.html 528B

A56.html 524B

A13.html 522B

A1.html 510B

A78.html 509B

A83.html 495B

A39.html 460B

A82.html 458B

A26.html 456B

A34.html 449B

A5.html 448B

A29_1.html 426B

A77.html 424B

A27.html 411B

A30.html 406B

A86.html 406B

A76.html 401B

共 144 条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A8</title> <style> div.zhongjian { text-align: center; } </style> </head> <body> <table border="1"> <tr> <th>heading</th> <th>anthor heading</th> </tr> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td> </td> <td>row2,cell2</td>  </tr> </table> <hr> <head>表格有标题，粗边框</head> <table border="6"> <caption>标题</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <hr> <h1>横跨两列单元格</h1> <table border="1"> <tr> <th>name</th> <th colspan="2">phone number</th> </tr> <tr> <td>Bill</td> <td>123456</td> <td>123456</td> </tr> </table> <h1>横跨两行单元格</h1> <table border="1"> <tr> <th>name</th> <td>Bill</td> </tr> <tr> <th rowspan="2">phone number</th> <td>123456</td> </tr> <tr> <td>123456</td> </tr> </table> <hr> <table border="1"> <tr> <td> <p>这是一个段落</p> <p>这是另一个段落</p> </td> <td>这单元包含一个表格 <table border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </td> </tr> <tr> <td>这单元包含一个列表 <li>香蕉</li> <li>菠萝</li> <li>苹果</li> </td> <td>HELLO</td> </tr> <tr> <td>HELLO</td> </tr> </table> <hr> <h1>没有cellpadding-边距</h1> <table border="1"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> <h1>带有cellpadding</h1> <table border="1" cellpadding="10"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> <hr> <h2>背景颜色</h2> <table border="1" bgcolor="red"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> <h2>背景图像：</h2> <table border="1" background="img/222.jpg"> <tr> <td>first</td> <td>row</td> </tr> <tr> <td>second</td> <td>row</td> </tr> </table> <hr> <h2>单元背景</h2> <table border="1"> <tr> <td bgcolor="red">first</td> <td>row</td> </tr> <tr> <td background="img/222.jpg">second</td> <td>row</td> </tr> </table> <hr> <table width="400" border="1"> <tr> <td align="left">name</td> <td align="right">age</td> <td align="right">habits</td> </tr> <tr> <td align="left">bill</td> <td align="right">20</td> <td align="right">football</td> </tr> <tr> <td align="left">chew</td> <td align="right">22</td> <td align="right">panda</td> </tr> <tr> <td align="left">lily</td> <td align="right">24</td> <td align="right">game</td> </tr> <tr> <th> </th> <th align="right">66</th> <th align="right">three</th> </tr> </table> <hr> <p><b>注释：</b>frame属性无法在Internet Explorer中正确的显示</p> <p>table with frame=“box”：</p> <table frame="box"> <tr> <th>MOUTH</th> <th>SAVINGS</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>table with frame =“above”</p> <table frame="above"> <tr> <th>mouth</th> <th>saving</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>table with frame="below"</p> <table frame="below"> <tr> <th>mouth</th> <th>savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>table with frame="hsides"</p> <table frame="hsides"> <tr> <th>mouth</th> <th>savings</th> </tr> <tr> <td>January</td> <td>savinga</td> </tr> </table> <p>table with frame="vsides"</p> <table frame="vsides"> <tr> <th>mouth</th> <th>saving</th> </tr> <tr> <td>January</td> <td>saving</td> </tr> </table> <hr> <h2>li：一个无序列表：</h2> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> <hr> <p>ol有序列表</p> <ol> <li>苹果</li> <li>西瓜</li> <li>泰兰德</li> </ol> <ol start="100"> <li>农夫山泉</li> <li>百岁山</li> <li>怡宝</li> </ol> <hr> <dl> <dt>coffee</dt> <dd>black hot drink</dd> <dt>milk</dt> <dd>white cold drink</dd> </dl> <hr> <P>不同类型的无序列表</P> <h1>Disc项目符号列表</h1> <ul type="disc"> <li>apple</li> <li>banana</li> <li>lemon</li> <li>orange</li> </ul> <h1>circle项目符号列表</h1> <ul type="circle"> <li>apple</li> <li>banana</li> <li>lemon</li> <li>orange</li> </ul> <h1>square项目列表符号</h1> <ul type="square"> <li>apple</li> <li>banana</li> <li>lemon</li> <li>orange</li> </ul> <hr> <P>不同类型的有序列表</P> <h1 >数字列表</h1> <ol> <li>apple</li> <li>banana</li> <li>lemon</li> <li>orange</li> </ol> <h1>字母列表</h1> <ol type="A"> <li>apple</li> <li>banana</li> <li>lemon</li> <li>orange</li> </ol> <h1>小写字母列表</h1> <ol type="a"> <li>apple</li> <li>banana</li> <li>lemon</li> <li>orange</li> </ol> <h1>罗马字母列表</h1> <ol type="I"> <li>apple</li> <li>banana</li> <li>lemon</li> <li>orange</li> </ol> <div class="zhongjian"> <h1>小写罗马字母列表</h1> <ol type="i"> <li>apple</li> <li>banana</li> <li>lemon</li> <li>orange</li> </ol> </div> <hr> <h1>嵌套列表</h1> <ul> <li>coffee</li> <li>tea <ul> <li>gre

评论收藏

内容反馈