HTML的基本结构
<!--
HTML的基本结构
HTML的文档类型，常用的有两种：xhtml 1.0和html5->
sublime安装emmet插件后可以快速生成html5和xhtml代码，快捷键分别是：！+ tab和html:xt + tab
两种文档的区别：文档声明和编码声明，html5新增了标签元素以及元素属性
-->
<!--下面是一个html5的基本结构-->
<!--文档声明-->
<!DOCTYPE html>
<!--lang="zh-CN"定义网页语言，一般作为统计用，不定义没有影响 -->
<html lang="en">
<!--<head>定义标题及对网页进行一些设置，包括编码格式，外链css样式和javascript文件等，除标题外，设置的内容不会显示在网页上-->
<head>
<meta charset="UTF-8">
<title>个人主页</title>
</head>
<!--网页上显示的内容-->
<body>
你好！欢迎访问我的网页！
</body>
</html>
<!--下面是一个xhtml文档的基本结构-->
<!--文档声明-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<!--编码声明-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!--
HTML标题标签
<h1>到<h6>定义六种级别的标题。表示文档的6级目录层级关系，<h1>用做主标题。搜索引擎会使用标题将网页结构和内容编制索引，所以网页上使用标题是很重要的。
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>标题标签</title>
</head>
<body>
<h1>HTML简介</h1>
<p>
<P>标签是定义一个段落 ，p标签不建议嵌套p标签，否则应用样式可能出现问题。在行首用&+nbsp; 这种空格不精确，一两个空格时可以用，更精确的空格用样式控制，样式甚至可以设置空多少个像素。<br /> <br>是一个换行标签，规范的写法是在br标签中加一个空格，再加一个\。如果直接敲空格键，那么在段落开头没有效果，在中间的话，无论敲多少空格，实际显示只有一个。这里讲一下三个字符实体：空格、大于号、小于号。空格是 &+nbsp; 大于号是 &+gt；小于号是 &+lt； 注意：后面的分号不能少。
</p>
</body>
</html>
<!--
HTML块标签、含样式的标签
1、<div>标签，块元素，没有具体语义，嵌套使用最多的标签，表示一个块
2、<span>标签，行内元素，表示一行中的一小段内容，没有具体语义。
含样式和语义的标签【这四个标签语义只在面试有用，实际用时不用在意】
1、<em>标签，行内元素，表示语气中的强调词
2、<i>标签，行内元素，表示专业词汇
3、<b>标签，行内元素，表示文档中的关键字或者产品名称
4、<strong>标签，行内元素，表示非常重要的内容
语义化的标签，就是在布局时多使用有语义的标签，搜索引擎能认识这些标签，方便收录，比如h1标签是标题，p是段落，
ul、li表示列，a标签表示连接，dl、dt、dd表示定义列表等。语义化的标签不多。
HTML图像标签<img>
<img>有两个属性，src是图片引用地址，alt是图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片，盲人读屏软件会读这个文字，所以此属性很重要。
<img src="./images/002.jpg" alt="产品图片" />
HTML链接标签<a>
定义一个链接地址，常有属性：
href 定义跳转的地址
title 定义鼠标悬停时弹出的提示文字
target 定义链接窗口打开的位置
target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
target="_blank" 新页面会再打开一个浏览器窗口
<a href="#"></a> #表示链接到页面顶部
<a href="http://www.aaa.com/" title="跳转到aaa.com">aaa</a>
<a href="2.html" target="_blank">测试页面2</a>
HTML列表
1、有序列表，在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现：
<ol>
<li>列表文字一</li>
<li>列表文字二</li>
</ol>
在网页上生成的列表，每条项目上会有1、2、3的编号，有序列表在实际开发中较少使用，sublime快捷键创建列表：
ol>li*3 tab 创建3个<li >
2、无序列表
在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现：
<ul>
<li><a href="#">新闻标题一</a></li>
<li><a href="#">新闻标题二</a></li>
<li><a herf="#">新闻标题三</a><li>
</ul>
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同的浏览器上显示不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标。实际开发中一般使用这种列表。上面可以用快捷键生成：
ul>(li>a{"新闻标题"})*3
3、定义列表
通常用于术语的定义。<dl>标签表示列表的整体。<dt>定于题目，<dd>定义术语的解释：
<dl>
<dt>html</td>
<dd>负责页面的结构</dd>
<dt>css</tdt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
快捷键：dl>(dt+dd)*3 tab
HTML表格
1、<table>声明一个表格
常用属性：
border 定义表格的边框，设置值是数字
cellpadding 定义单元格内容与边框的距离，设置值是数值
cellspacing 定义单元格与单元格之间的距离
align 设置整体表格相对于浏览器窗口的水平对齐方式：left center right
2、<tr> 定义一行
3、<td> <th> 定义一行中的一个单元格，<td>代表普通表格，<th>表示头单元格，常用属性：
align：设置单元格中内容的水平对齐：left center right
valign:设置单元格中内容的🔨对齐：top middle bottom
colspan:设置单元格水平合并，设置值是数值
rowspan:设置单元格垂直合并，设置值是数值
示例，快捷键创建一个6行5列的表格：
table>(tr>td*5)*6 tab
<table border="1" width="600" height="300" align="center ">
<tr>
<td colspan="5"></td> #合并第一行
</tr>
<tr>
<td width="15%"></td>
<td width="100"></td>
<td rowspan="5"></td> #第二行最后一个单元格纵向合并5个,合并后下方的行会多出一个格子，删掉
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
-->
浙公网安备 33010602011771号