html_入门
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html_入门相关的知识，希望对你有一定的参考价值。
1 html 简介：
什么是html？全称 HyperText Mark-up Language 是超文本标记型语言，是网页的语言。
*超文本： 超出文本的范畴
*标记： 理解为标签，HTML中所有的操作都是由标签来完成
*HTML是做网页。
2
（2）html程序遵循一定的规范
第一个：html程序以<html>开始，同时</html>结束
* 比如创建java里面方法，public void add() { 方法体 }
第二个：html程序包含两部分内容：head和body
* <html>
<head>设置页面信息</head>
<body>显示到页面上的内容</body>
</html>
第三个：html的标签有开始标签，同时也要结束标签
第四个：html的代码不区分大小写的
第五个：有些标签没有结束标签，需要在标签内结束 <br/>
* 实现换行的操作，使用标签实现的<br>, 没有</br>
（3）html的操作思想
* 在网页中可能有很多的数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来
（封装），通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，
实现容器内数据样式的变化。
2、字体标签
（1）文字标签 <font>
* <font color="设置文字颜色" size="文字的大小">要操作的文字的内容</font>
** 常用两个属性
*** color：设置文字的颜色
**** 有三种表示方式
第一种：直接使用英文单词进行表示 red green yellow......
第二种：使用十六进制数字进行表示 #ffffff，
** 通过RGB
第三种：使用RGB颜色值配置 rgb(255,0,0)
*** size：设置文字的大小
**** 文字大小值范围：1-7，如果值超过了7，使用还是7的效果
（2）标题标签
* <h1></h1> <h2></h2>.......<h6></h6>
** 标题标签可以自动换行，从h1到h6字体的大小依次变小的
（3）水平线标签
* <hr/>
* 属性
** color：表示设置水平线颜色
** size：设置水平线的粗细，范围1-7
（4）注释标签
* 在java里面有几类注释？三类注释
** 单行注释，多行注释，文档注释
* 在html中注释 <!-- 注释的内容 -->
** 使内容不在html页面中进行显示
（5）特殊字符
* 实现空格的操作
3、列表标签
（1）想要实现：
传智播客
java学院
人事部
学工部
* 首先需要使用 <dl></dl>: 定义列表的范围
* 之后在dl标签里面，<dt></dt>: 定义上层内容
* 在dl标签里面， <dd></dd>: 定义下层内容
** 代码
<dl>
<dt>传智播客</dt>
<dd>java学院</dd>
<dd>人事部</dd>
<dd>学工部</dd>
</dl>
（2）有序列表标签
1.java学院
2.人事部
3.学工部
a.java学院
b.人事部
c.学工部
i.java学院
ii.人事部
iii.学工部
* 使用 <ol></ol>: 定义有序列表的范围
** ol标签上面有属性 type：排序的方式
** type属性里面的值 1 a i
* 之后在ol标签里面：<li></li>: 封装具体的内容
** 代码
<ol>
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ol>
（3）无序列表标签
（特殊符号）java学院
（特殊符号）人事部
（特殊符号）学工部
* 首先使用标签 <ul></ul>: 定义无序列表的范围
** ul标签上面有属性 type：设置特殊符号
** type属性里面的值 disc circle square
* 之后在ul标签里面： <li></li>: 封装具体的内容
** 代码
<ul>
<li>java学院</li>
<li>人事部</li>
<li>学工部</li>
</ul>
4、图形标签
（1）在html中显示图片
（2）标签：<img src="图片的路径名称"/>
（3）属性：
* src：图片的路径名称
* width：图片宽度
* height：图片的高度
* border：图片的边框的粗细
* alt: 显示在图片上面的内容
** 鼠标移动到图片上面，稍等片刻出现文字
** 如果图片找不到，显示alt的内容
*** 这个属性在某些浏览器不能显示的
5、超链接标签
（1）什么是超链接：点击打开新的内容
（2）标签：<a href="链接到的地址">显示在页面上的内容</a>
* 代码 <a href="hello.html">显示在页面上的内容</a>
（3）属性
* href：链接到地址
* target：超链接的打开方式
** 在默认的情况下，打开方式在当前的页面打开
** target里面的值：_self,当前页面打开； _blank，在新标签页打开
6、表格标签
操作技巧：
首先数表格里面有多少行，数每行里面有多少个单元格
（1）什么是表格：对数据进行格式化，使数据显示更加清晰，结构分明
（2）标签
* 首先定义表格的范围：<table></table>
** 属性
*** border：设置表格线
*** bordercolor：设置表格线的颜色
*** cellspacing: 设置单元格之间的距离
*** cellpadding: 设置文字和单元格之间的距离
*** width: 设置表格的宽度
*** height：设置表格的高度
* 在table标签里面表示行： <tr></tr>
** 属性
*** align：设置对齐方式，值 left center right
* 在tr标签里面表示列： <td></td>
** 属性
*** align：设置某个单元格对齐方式
* 在tr标签里面也可以表示单元格：<th></th>
** 实现居中和加粗的效果
（3）合并单元格
* 是在td标签上面进行的操作，使用两个属性
** rowspan：跨行
*** 代码 <th rowspan="4">人员信息3人</th>
** colspan：跨列
*** 代码 <td colspan="3">统计信息3人</td>
（4）标题标签：<caption>标题内容</caption>
今天的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="0" width="1300" height="600" cellspacing="0">
<tr height="100px">
<td><img src="../img/logo2.png" />
<img src="../img/header.png" />
<a href="超链接.html">登陆</a>
<a href="列表.html"> 注册</a>
<a href="图片导入.html">购物车</a>
</td>
</tr>
<tr height="50px" bgcolor="black">
<td>
<a><font size="5" color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">育婴保健</font></a>
<a href="#"><font color="white">鞋衣箱包</font></a>
</td>
</tr>
<tr>
<td><img src="../img/1.jpg" width="1300px"/></td>
</tr>
<tr>
<td>
<font size="5" face="微软雅黑">最新商品</font>
<img src="../img/title2.jpg" />
</td>
</tr>
<tr>
<td>
<table border="1px" width="1300px" cellspacing="0">
<tr>
<td rowspan="2" width="180px"><img src="../img/big01.jpg"/></td>
<td colspan="3" width="400px" height="90px"><a><img src="../img/middle01.jpg" width="100%"/></a></td>
<td align="center"><img src="../img/small05.jpg" /><br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small03.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small04.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
</tr>
<tr>
<td align="center"><img src="../img/small06.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td >
<td align="center"><img src="../img/small07.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small08.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small09.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small09.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small01.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
</tr>
</table >
</td>
</tr>
<tr>
<td height="50px"><img src="../img/ad.jpg" width="100%"/></td>
</tr>
<tr>
<td>
<font size="5" face="微软雅黑">最新商品</font>
<img src="../img/title2.jpg" />
</td>
</tr>
<tr>
<td>
<table border="1px" width="1300px" cellspacing="0">
<tr>
<td rowspan="2" width="180px"><img src="../img/big01.jpg"/></td>
<td colspan="3" width="400px" height="90px"><a><img src="../img/middle01.jpg" width="100%"/></a></td>
<td align="center"><img src="../img/small05.jpg" /><br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small03.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small04.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
</tr>
<tr>
<td align="center"><img src="../img/small06.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td >
<td align="center"><img src="../img/small07.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small08.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small09.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small09.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</td>
<td align="center"><img src="../img/small01.jpg" />
<br />
<a href="#"><font >电饭锅</font></a>
<p><font color="FF0000">499</font></p>
</tr>
</table >
</td>
</tr>
<tr>
<td><img src="../img/footer.jpg" width="100%"/></td>
</tr>
<tr>
<td align="center"><a href="">关于我们</a>
<a href="#">联系我们 </a>
<a href="#">招贤纳士</a>
<a href="#">法律声明 </a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a></td>
</tr>
<tr>
<td align="center">Copyright © 2005-2016 传智商城 版权所有</td>
</tr>
</table>
</body>
</html>
以上是关于html_入门的主要内容，如果未能解决你的问题，请参考以下文章