W1-漂漂亮亮的网站从这里就开始啦-HTML安装和基本标签使用

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.结语

每个标签还有一些附加属性，标签之间部分可以套用，使网页结构更加紧凑清晰。这是一篇新手小白的文章，其中连接了许多资源，希望能站在小白的角度对你有所帮助。

如果文章内若有错误和不够详尽之处，请不吝赐教。

感谢您的阅读。