1.HTML软件安装
进入HBuilderX下载
下载文件为压缩包,解压即安装完成。
2.资源
进入HTML教程
菜鸟教程可以找到HTML中可能用到的元素。
3.网页的简单设计
标签元素
3.1主体
<p><body><html>
标签名称 | 标签结构 |
---|---|
段落 | <p>段落内容</p> |
主体 | <body>主体内容</body> |
文档 | <html>文档内容</html> |
<html>
<body>
<p>这是第一个段落。</p>
</body>
</html>
3.2连接&换行
<a><br>
标签名称 | 标签结构 |
---|---|
换行 | <br> |
链接 | <a href="连接地址">连接的内容</a> |
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="//www.runoob.com">访问菜鸟教程!</a>
</body>
</html>
3.3图像
<img><map><area>
标签名称 | 标签结构 |
---|---|
图像 | <img src="图片地址" alt="图片不显示时的替代文字" width="宽度" height="高度"> |
图像地图 | <map name="地图名字">点击区域</map> |
图像映射 | <area shape="形状" coords="区域" alt="图片不显示时的替代文字" href="连接地址"> |
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
一个图像:
<img src="smiley.gif" alt="Smiley face" width="32" height="32"></p>
<p>
注意插入动图的语法和静态图的语法是一样的。
</p>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
</body>
</html>
3.4区块
<div><span>
标签名称 | 标签结构 |
---|---|
区块 | <div style="color:颜色">块中包含的内容</div> |
区块 | <p>在一行元素内 <span style="color:颜色">给这部分内容</span>做个操作</p> |
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
</body>
</html>
3.5列表
<li><ul><ol><dl><dt><dd>
标签名称 | 标签结构 |
---|---|
列表项目 | <li>列表项目</li> |
无序列表 | <ul>无序列表内容 </ul> |
有序列表 | <ol type="不同类型的有序表"> 有序列表内容</ol> |
自定义列表 | <dl> 自定义列表内容 </dl> |
自定义列表项 | <dt>自定义列表项</dt> |
自定义列表项的定义 | <dd>自定义列表项1的定义</dd> |
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>无序列表:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
3.6表格
<table><tr><th><td>
标签名称 | 标签结构 |
---|---|
表格 | <table>表格内容</table> |
表格的行 | <tr>每行的内容</tr> |
表格的表头 | <th>表头内容</th> |
表格的单元 | <td>单元格内容</td> |
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
4.结语
每个标签还有一些附加属性,标签之间部分可以套用,使网页结构更加紧凑清晰。这是一篇新手小白的文章,其中连接了许多资源,希望能站在小白的角度对你有所帮助。
如果文章内若有错误和不够详尽之处,请不吝赐教。
感谢您的阅读。