学习html小总结

桃扇骨 2022-05-26 12:38 230阅读 0赞

首先来认识html:

![20180502183427529][]

**作用**是可以用来制作网页，但是html编写的网页都是通过浏览器访问的。

想要编写HTML网页，直接在本地创建一个txt文件，然后把后缀名改成  .html 或者.htm都可以。

编写网页的标准规范是W3C组织制定的。

![20180502183304292][]

HTML 结构标准

<! DCOTYPE HTML>  声明文档类型

<html>                      根标签

<head>           头标签

<title></title>  标题标签

</head>

<body>                      主题标签

</body>

</html>

HTML语言的语法就是标签，学会了标签的使用，那么就学会了html语言，并且这么标签是预定义的，不可以扩展。

标签分类有两种:

1.单标签  <! DCOTYPE HTML>

2. 双标签  <html></html>

前端的开发工具：

webstorm：很强大实际开发主流选择

DW：历史很悠久了

sublime ：也是主流的企业级首选开发工具。

hbuider：号称最快的前端开发工具。

（单标签）换行标签 和 水平线标签<hr />

段落标签，上下自动生成空白行。

<h1></h1>从h1-h6 字体逐渐变小，h1一个网页中只能出现一次。（标题标签）

字体标签

文本格式化标签:

表示加粗

：加粗

倾斜

<del></del><s></s>删除线

<ins></ins> 下划线

使用前面的，因为标签名称更加有意义。

**图片标签:**

![20180502184356422][]

相对路径：imgs/anta.PNG

绝对路径：D:/HBuilder/hworksapce/html01/imgs/anta.PNG

![20180502184449827][]

![2018050218455596][]

**列表分为有序列表、无需列表、和自定义列表:**

## 无序列表 ##

<table> 
 <tbody> 
 <tr> 
 <td>&lt;!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 无序列表 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; --&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul type="circle" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;苹果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;香蕉&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;桃子&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;火龙果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul type="disc" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;苹果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &lt;li&gt;香蕉&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;桃子&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;火龙果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ul type="square" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;苹果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;香蕉&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;桃子&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;火龙果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;</td> 
 </tr> 
 </tbody> 
</table>

##     有序列表 ##

<table> 
 <tbody> 
 <tr> 
 <td>&lt;!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 有序列表 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;--&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ol type="1" start="10" &gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;苹果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;香蕉&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;桃子&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;火龙果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ol&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ol type="A"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;苹果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;香蕉&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;桃子&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;火龙果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ol&gt; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;ol type="i"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;苹果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;香蕉&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;桃子&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;火龙果&lt;/li&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ol&gt;</td> 
 </tr> 
 </tbody> 
</table>

## 自定义列表 ##

引入样式表

<table></table>   表格

<tr></tr>行

<td></td>列

border="1"  边框

width="500" 宽度

height="300" 高度

cellspacing="0"单元格与单元格之间的距离

cellpadding="15"内容与边框的距离

align="center"align="left"align="right"可以设置表格在网页中的位置。

如果给tr或者td使用，tr或者td的内容居中。

bgcolor="pink"：设置背景颜色

表格的标准结构:

<thead></thead>表头

<tbody></tbody>身体默认在网页中会加上

<tfoot></tfoot>脚部

colspan 行合并

rowspan 列合并

valign="bottom"  topcenter 垂直对齐方式

[20180502183427529]: /images/20220526/a7df60b8560c49deaffdd2feb348847e.png
[20180502183304292]: /images/20220526/9186b9a6e1fb4b92b52f76382b3f3cb1.png
[20180502184356422]: /images/20220526/437d830276c84100b98504c9e792e566.png
[20180502184449827]: /images/20220526/a5109eb033d54b74ab44e976f1f86266.png
[2018050218455596]: /images/20220526/1e436746beb34dc28a26046ba9d4ecf5.png