HTML入门
ＨＴＭＬ文件结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
</head>
<body>welcome to my html</body>
</html>
第一行是文件类型申明，ｈｅａｄ里面设置网页标题，编码格式。ｂｏｄｙ里面写上网页信息，结果如下：
标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<!--
标题标签是为了seo，百度的爬虫程序，增加网站权重
-->
<h1>个人主页</h1>
<h2 font color-class="#00dd00">会员中心</h2></font>
<h3>你的世界</h3>
<h4>我的世界</h4>
</body>
</html>
ｔｉｔｌｅ里面设置网页标题，ｈ１设置大标题。。。。结果如下：
段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML简介</title>
</head>[
<body>
<h1>HTML简介</h1>
<!--
空格的字符实体：
换行：<br/>
大于号的字符实体：>(greater then)
小于号的字符实体：<k
-->
<p>
HTML是超文本标记语言，<br/>
很好学。
</p>
<p>11>5</p>
<p>5<8</p>
</body>
</html>
其实ｃｓｄｎ的ｍａｒｋｄｏｗｎ编辑器支持ＨＴＭＬ插入，可以直接把代码段复制下来，然后编辑博客打开，粘贴就能看到运行结果。
块样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块标签、含样式标签</title>
</head>
<body>
<p>
HTML是超文本标记语言，<br/>
很好学。
<p>
HTML是超文本标记语言，<br/>
很好学。
</p><!--不要这样的把p标签嵌套-->
</p>
<div> HTML是超文本标记语言，<br/>
很好学。
</div>
<!--
p标签带有样式的，两个p标签之间有空行，但是div标签不带样式，
两个div标签之间不带空行，div可以嵌套，可以嵌套标题等
span标签，表示一行里面的一小块内容，也没有具体的语义
-->
<!--
em标签：行内标签，表示语气中的强调词,从浏览器查看变成了斜体
i标签：表示专业词汇,和em标签一样也是把文字变成了斜体
b：行内标签，表示文档中的关键字或者产品名,字体变成了加粗一点的字体
strong：行内标签，表示非常重要的内容,字体比b标签更粗一点o
-->
<div>
<h1>html概述</h1>
HTML是<i>超文本</i>标记<b>语言</b>，<br/>
<span><em>很</em>好学。</span>
<p>
<strong>HTML是超文本标记</strong>语言，<br/>
很好学。
</p>
</div>
</body>
</html>
注释里基本解释清楚了，值得注意的是，在实际开发中ｅｍ和ｉ标签区分不是很重要，反正都是让字体变成斜体起到强调作用。并且ｄｉｖ可以嵌套ｄｉｖ，ｐ。。标签，但是ｐ虽然也可以嵌套ｐ表示我们却不这样做，是为了良好的代码风格。
链接标签，图片插入标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML链接标签</title>
</head>
<body>
<!--
href:定义跳转的地址
title：定义鼠标悬停时弹出的提示文字
target：定义链接窗口打开的位置
target=self，缺省值，新页面替换原来页面，在原窗口打开/
target=_blank,在新窗口打开页面
-->
<h1>****</h1>
<a href="https://blog.****.net/" title="****官网" target="_blank" >ｃｓｄｎ</a>
<a href="005图片标签，绝对路径，相对路径.html" target="_self" title="中科大照片">ｋｅｄａ照片</a>
</body>
</html>
定义了两个链接，其中一个转到一个ｈｔｍｌ文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签，绝对路径，相对路径</title>
</head>
<body>
<img src="../images/1.jpg" alt="中科大软件学院"/>
<!--alt属性可以做成无障碍网页，盲人可以使用，人工智能可以读取这个标签-->
<img src="../images/2.jpg" alt="北门"/>
<a href="007链接标签.html" target="_self" title="网页7">ｃｓｄｎ</a>
</body>
</html>
定义了两张图片一个链接，实现了两个页面之间的跳转。参数实现功能在注释写了<a href="www.****.com" target="_blank" title="****官网" ><img src="../images/11.jpg" alt="good"></a>图片做链接
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<h1>有序列表</h1>
<ol>
<!--会自动给下面三项进行编号 ｏｌ>li*3可以再按一下ｔａｂ键就能自动生成三行-->
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ol>
<h1>无序列表</h1>
<ul>
<li><a href="https://blog.****.net/">新闻１</a></li>
<li>新闻２</li>
<li>新闻３</li>
</ul>
<!--定义列表-->
<h3>前段三大块</h3>
<dl>
<dt>html</dt>
<dd>页面结构</dd>
<dt>css</dt>
<dd>页面表现</dd>
<dt>javascript</dt>
<dd>页面行为</dd>
</dl>
</body>
</html>
一种快捷键：比如想生成定义列表，可以这样;
ｄｌ>（ｄｔ＋ｄｄ）×３然后按下ｔａｂ键，就能自动的生成三块区域
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<h1>表格</h1>
<table border="10" width="300" height="200" align="center"> <!--是个像素的边框，３００＊２００的尺寸,align设置
居中-->
<tr><!--th默认的字体是加粗剧中的，为什么不直接用ｔｄ呢，是为了后面给样式-->
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td align="center">1</td><!--这是一个格子,align设置居中，在样式出现之前都是这样设置的-->
<td align="center">2</td>
<td align="center">3</td>
</tr><!--这是一行-->
<tr>
<td align="center">1</td><!--这是一个格子-->
<td align="center">2</td>
<td align="center">3</td>
</tr><!--这是一行-->
<tr>
<td align="center">1</td><!--这是一个格子-->
<td align="center">2</td>
<td align="center">3</td>
</tr><!--这是一行-->
</table>
<table border="10" width="1000" height="500" align="center">
<!--利用单元格合并设计一个表格-->
<tr><!--合并第一行,合并５个格子-->
<td colspan="5">学校</td>
</tr>
<tr>
<td width="15%">基本情况</td>
<td width="25%"></td>
<td width="15%">恩恩</td>
<td width="25%"></td>
<td rowspan="5" width="20%"><img src="../images/2.jpg" alt="anyway" sizes=""></td><!--列合并５个格子-->
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
整体效果如下
ｔａｂｌｅ布局制作简历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人简历</title>
</head>
<body topmargin="0"><!--将简历顶格-->
<table width="800" height="800" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="260" valign="top" bgcolor="#a9a9a9"> <!--针对复杂的布局，可以再单元格里面嵌套表格-->
<table width="200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr height="100">
<td>
</td>
</tr>
<tr>
<td><img src="../images/2.jpg" alt="学校"></td>
</tr>
<tr>
<td align="center">中科大</td>
</tr>
<tr>
<td align="center">合肥</td>
</tr>
<tr>
<td align="center">[email protected]</td>
</tr>
</table>
</td>
<td width="30"></td>
<td width="480" valign="top" bgcolor="#808080">
<table width="480" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right" ><img src="../images/13.jpg" alt="home"></td>
</tr>
</table>
<br>
<hr />
<br>
<table width="480" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" height="50">基本信息</td>
</tr>
<tr>
<td width="240" height="80">地址</td>
<td width="240" height="80">黄山路</td>
</tr>
<tr>
<td width="240" height="80">级别</td>
<td width="240" height="80">技校</td>
</tr>
<tr>
<td width="240" height="80">学生</td>
<td width="240" height="80">1W+</td>
</tr>
<tr>
<td width="240" height="80">面积</td>
<td width="240" height="80">很大</td>
</tr>
<tr>
<td width="240" height="80">ｘｘ</td>
<td width="240" height="80">ｘｘ</td>
</tr>
<tr>
<td width="240" height="80">ｘｘ</td>
<td width="240" height="80">ｘｘ</td>
</tr>
</table>
</td>
<td width="30"></td>
</tr>
</table>
</body>
</html>
ａｕｔｈｏｒ:[email protected],mail.ustc.edu.cn
github:https://github.com/zhangyuespec/HTML_learning