本文链接：https://blog.csdn.net/qq_44834628/article/details/100182169

html基础

1.HTML概念
超文本标记语言：

  文本：像我们在记事本、写字板里面书写的内容都是文本内容！！【普通人】
  超文本：功能比普通文本更加强大【超人】
  标记语言：就是通过一些个标签构成的语言，我们称之为标记语言！！！
  html主要是用于页面显示数据的！！！被浏览器解析执行！！！
  html都是以.html或者.htm结尾的文件！！！！
  整个html文件里面都是由标签构成！比如<html></html>，而且大部分标签都是成对(开始标签和结束标签)出现！！！
  也有少部分只有开始标签，没有结束标签，比如<br/>或者<br>=====>>>这一类标签我们称之为自闭标签！！

2.HTML开发(工具)

  方式一：手动编写(很少这么干，效率低！！！)
  	编写一个以.html结尾的文件！
  	然后在里面编写html标签即可！
  方式二：借助工具
  	Eclipse MyEclispe HBuilder IDEA

3.文本标签(需要记属性标题和字体)
在这里插入图片描述

  ★★★★★标题标签：<hn></hn>  其中n是数字，从1-6逐渐变小！！！！  加粗加黑 自动换行！
  	也有一些属性：(不怎么常用)
  		每一个标签都有这么一个属性 style
  
  ★★★★★水平线标签：<hr>或者<hr/>
  	属性：也不怎么常用(可以使用css来控制)
  		color:设置颜色！
  		size:设置大小(粗细)

  ★★★★★段落标签：<p></p>
  空格标签：&nbsp;
  ★★★★★字体标签：<font></font>  这个标签单独使用没有任何效果！必须通过属性来进行控制！！
  	属性：
  		color：设置文字的颜色(可以使用单词，也可以使用#十六进制，还可以是rgb)
  		size:设置文字的显示大小 (从1-7逐渐变大，超过7的按照7来显示)
  		face:字体！
  加粗：<b></b>或者<strong></strong>
  斜体：<i></i>
  下划线：<u></u>
  换行标签：<br>或者<br/>

在这里插入图片描述

4.图片标签

  标签：<img /> 必须书写属性src(显示某张图片的位置<路径>)
  属性：
  	src:指定图片的路径
  	height:指定图片的高度(单位：像素值px)
  	width:指定图片的宽度(单位：像素值px)
  	alt:当图片无法正常(路径写错了，网速不够！)显示的时候给出的提示信息！
  src书写的路径问题：
  		绝对路径和相对路径！
  		绝对路径：带有盘符！【今天不聊这个】
  		相对路径：必须有参照物！
  			在同一级：直接写图片名称！或者./图片名称
  			在上一级：../图片名称
  			在下一级：目录名称/图片名称

在这里插入图片描述

5.超链接标签

  标签：<a></a> 必须有属性href(关注路径，与src的写法一样！！)
  属性：
  	href：点击这个超链接，跳转的位置！
  	target:跳转之后那个资源显示的位置(取值：默认是_self<覆盖当前选项卡> _blank<打开一个新的选项卡>)

  例如：<a href="http://www.baidu.cn">点我进百度</a>  点击文字，跳转到http://www.baidu.cn 地址！

在这里插入图片描述

6.列表标签

  分为无序列表(重点！)和有序列表
  	无序列表：ul 属性(type：不怎么用！)
  		<ul>
  			<li></li>
  			<li></li>
  			<li></li>
  			<li></li>
  		</ul>
  		注意让多个列表项(li)显示在同一行：  style="display:inline"
  			style="display:none" // 不显示这个列表项
  			style="display:block" // 单独显示一行

在这里插入图片描述

		有序列表：了解！//start 起始   reversed 倒叙  type="A" 字母排序
			<ol start="3" reversed="reversed">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		默认按照阿拉伯数字排序！

在这里插入图片描述

7.块级标签与内联标签

  块级标签：里面的内容单独显示一行   比如<div></div>
  内联标签：里面的内容与其它内容显示在同一行！比如：<span></span>

  div标签：单独使用没有任何效果！一般结合css一起使用！主要用于页面布局！！！
  span标签：单独使用没有任何效果！一般结合css一起使用！主要用于给里面的内容设置样式！！！

在这里插入图片描述

8.表格标签

  标签：<table></table>  单独使用没有任何效果，必须通过子标签和属性来控制效果！
  	子标签：
  		行：<tr>
  		单元格：<td>
  属性：
  	table标签的属性：
  		border：设置表格的边框！单位(px)可写可不写，建议写上！
  		在没有设置表格的宽高的时候，默认是按照整个表格中某个单元格最宽的来显示！(默认：将里面的内容包裹住)
  		height:指定图片的高度(单位：像素值px)
  		width:指定图片的宽度(单位：像素值px)
  		cellspacing:边框与边框的间距(单位：像素值px)
  		cellpadding:内容与边框的间距(单位：像素值px)
  		bgcolor:设置背景颜色
  		algin:设置表格水平对齐方式(默认：left ,取值还有center right)

  	tr属性：
  		bgcolor:设置指定行的背景颜色
  		algin:设置某一行里面的文本内容水平对齐方式

  	td属性：
  		bgcolor:设置指定单元格的背景颜色
  		algin:设置某个单元里面的文本内容水平对齐方式

  跨行跨列操作
  	跨行：rowspan
  	跨列：colspan
  	取值：就是你需要跨几个单元格或者几行!

  标签：
  	<th>：列标题(加粗加黑，居中显示！)

  不怎么用的(了解)
  	<thead>
  	<tbody>
  	<tfoot>
  	<caption> 表格标题

基本表格

在这里插入图片描述

表格嵌套

在这里插入图片描述
上图代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格跨行跨列操作</title>
	</head>
	<body>
		<table border="1px" width="357px" height="160px" cellspacing="0px" cellpadding="0px" bgcolor="cornsilk">
			<tr>
				<td colspan="2">
					<a href="#">点我</a>
				</td>
				<!-- <td>12</td> -->
				<td width="87px" height="37">13</td>
				<td width="87px" height="37">14</td>
			</tr>
			<tr >
				<td width="87px" height="37">21</td>
				<td colspan="2" rowspan="2">
					<table border="1px" width="100%" height="100%" cellspacing="0px" cellpadding="0px" bgcolor="beige">
					<tr>
						<td>11</td>
						<td>12</td>
						<td>13</td>
					</tr>
					<tr>
						<td>21</td>
						<td>22</td>
						<td>23</td>
					</tr>
					</table>
				</td>
				<!-- <td>23</td> -->
				<td width="87px" height="37">24</td>
			</tr>
			<tr>
				<td width="87px" height="37">31</td>
				<!-- <td colspan="2">32</td> -->
				<!-- <td>33</td> -->
				<td rowspan="2" width="88px" height="80px">
					<img src="img/20170222170809_v8XEW.jpeg" / width="100%" height="100%">
				</td>
			</tr>
			<tr>
				<td width="87px" height="37">41</td>
				<td width="87px" height="37">42</td>
				<td width="87px" height="37">43</td>
				<!-- <td>44</td> -->
			</tr>
		</table>
	</body>
</html>

表格其他标签

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>表格跨行跨列操作</title>
	</head>
	<body>
		<table border="1px" width="357px" height="160px" cellspacing="0px" cellpadding="0px" bgcolor="cornsilk">
			<thead>
				<tr>
					<th>学号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td align="center">1</td>
					<td align="center">王希西</td>
					<td align="center">18</td>
				</tr>
				<tr>
					<td align="center">2</td>
					<td align="center">王晓曦</td>
					<td align="center">21</td>
				</tr>
				<tr>
					<td align="center">3</td>
					<td align="center">李熹子</td>
					<td align="center">19</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

9.实体字符

  空格：&nbsp;
  大于号：&gt;
  小于号：&lt;
  &符号：&amp;

HTML基础标签

html基础

基本表格

表格嵌套

表格其他标签