寒假前端学习day2
HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写，因为大部分程序员都以小写为准。
1.<!DOCTYPE html>:文档类型声明，表示该文件为 HTML5文件。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前
2. <html></html>标签对：<html>标签位于HTML文档的最前面，用来标识HTML文档的开始；</html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。
3.<head></head>标签对：标签包含有关HTML文档的信息，可以包含一些辅助性标签。如<title></title>，<link /><meta />，<style></style>，<script></script>等，但是浏览器除了会在标题栏显示<title>元素的内容外，不会向用户显示head元素内的其他任何内容。
4.<body></body>标签对：它是HTML文档的主体部分，在此标签中可以包含<p><h1><br>等众多标签，<body>标签出现在</head>标签之后，且必须在闭标签</html>之前闭合。
head部分
1、文档的头部描述了文档的各种属性和信息，包括文档的标题等，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
2、head标签表示头部标签,通常用来嵌套meta、title、style等标签。
3、<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
就是最上方的title。有图有真相。
4、<meta charset="UTF-8">设置当前文件字符编码
meta可以深入了解一下。
5、style标签：双标签中设置当前文件样式
body部分
段落标签<p>
<h1>~<h6>
<img>
<span></span>容器概念
用法：
现在<head></head>之间声明
<style>
span{
};
</style>
再在该用的地方用<span>和</span>包围文字。
这一小节讲解<span>标签，这个标签是没有语义的，它的作用就是为了设置单独的样式用的。
span可以用任何非关键标签取代。
某大佬的个人理解：span是html5（超文本标记语言的第五个版本，也有其他说法，可自行百度）制定的规范标签，既然是规范就是用来形成统一标准的，就好比钱（比如：span）是目前的流通货币，而不是贝壳、钻石等（比如：spa1n,spannn等）其他事物。
span和div的区别：都作为容器使用，最大的区别在于，span是行内元素，div是块级元素，span只占用页面中自身大小的一小块地方，div在页面中占满整行
多重span的使用：<span id="id"><span> 给想要影响的那个加个id，然后用id选 #id {font-size:px}
<div></div>
确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。
区域划分
<header>页首
<footer>页尾
<section>正文部分
<aside>侧边栏
这些标签名只是增加它的语义化，并不是这样命名它的展示效果就出来了，效果还是要通过css来设置。
换行标签（break）
xhtml1.0写法：
<br />
html4.01写法：
<br>
现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。
与以前我们学过的标签不一样，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。
水平分割线（horizontalrule）标签
html4.01版本 <hr>
xhtml1.0版本 <hr />
注意：
1. <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
2. <hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
3. 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。
若用输入空格格式，只会显示一个空格
因此用 空格
无序列表（Unordered List）
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
有序列表（Ordered List）
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
序号默认从1开始（也就是说存在不默认的情况，可以修改哒）
注释方法。
<!--注释文字 -->
不是//或者/**/
再讲img
语法：
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
举例：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
可以放本地文件也可以放网上的链接地址。
再谈超链接
a是锚点的意思
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如右侧案例代码（11-13行）。
a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。
创建表格的四个元素：table、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
4、<th>…</th>：表格的头部的一个单元格，表格表头。
5、表格中列的个数，取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框，属性值为数字。
注意：
1、table标签用来定义整个表格，为双标签，必须有结束标签。
2、table标签里面可以放caption标签和tr标签。
3、caption标签用来定义表格的标题。
4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。
5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。
6、td同来设置表格的列，一组td标签代表一列。
7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。
<caption>和<th>的区别：
<th></th>里的内容在表格里，是表头，<.caption></caption>的内容没在表格里，是整个表的标题
如何理解各种各样的title：
网页的存在即是为了传递所谓的信息。
title使得搜索引擎更容易在茫茫互联网上捕获到它的信息。
浙公网安备 33010602011771号