1. 安装编程工具HBuilderX
学习html我选择HBuilderX工具。进入HBuliderX官网:https://dcloud.io/hbuilderx.html
点击DOWNLOAD,选择Windows标准版下载解压即可
2.html常用标签(直接上代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>常用标签</title>
</head>
<body>
<!--
标题标签
h1~h6大小依次递减
尽量减少使用h1标签
会自动换行
块级元素
-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--
段落标签
p标签,会自动换行
块级元素
-->
<p>这是段落1</p>
<p>这是段落2</p>
<!--换行标签
br 单标签
<br> <br/>
-->
hello<br> world
<!--
水平线标签
hr 单标签
常用属性
color颜色
size粗细
width长度
-->
<hr>
<hr color="red" size="3" align="left">
<!--
列表
有序列表
<ol><li></li></ol>
无序列表
<ul><li></li></ul>
-->
<ul type="square">
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
<ol type="square">
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ol>
<!--
div标签
块级元素
默认占全部的宽度,有多少内容高度占多少
可以设置div的宽(width)高(height)
通过align设置内容的对齐方式
-->
<div style="width: 500px;height: 100px;" align="center">这是一个div</div>
<!--
span标签
行内元素(不会自动换行)
-->
<span>这是一个span</span>
<hr>
<!--
格式化标签
font标签
color字体颜色
size字体尺寸
face字体风格
pre
预格式化标签,保留空格和换行
-->
<font size="5" color="blue" face="楷体">你好</font>
<pre>
Hello
world
</pre>
<!--
a标签
超链接标签,用于连接到一个新的url
常用属性:
href:需要跳转的地址(必须属性)
target:窗口打开的方式
_self:当前窗口
_blank:在空白窗口
作为锚点:
a标签的name属性值
<a name="top"></a>
其他的id属性值
<div id="top"></div>
锚点的使用:
<a href="#top"></a>
-->
<!--
img标签
向网页中嵌入一张图标
常用属性:
src:需要引入的图片地址(必须属性)
alt:当图片破损或不存在时,显示文本的内容
title:当鼠标悬停在图片时显示的文本
width:图片的宽度
height:图片的高度
border:图片边框
-->
<img src="img/百度图标.png" width="500"height="200"border="2" title="百度"alt="破损">
<!--
表格标签
table 表格
tr 行
td 标准单元格
th 表头(字体居中,加粗效果)
table的属性:
width: 表格的宽度
border:边框
align: 对齐方式
style="border-collapse: collapse;"合并表格边框
tr的属性:
align 行的内容的对齐方式
-->
<table width="400px" align="center" border="1"style="border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>18</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>19</td>
</tr>
<tr align="center">
<td>3</td>
<td>王五</td>
<td>20</td>
</tr>
</table>
</body>
</html>