html
了解html
html承载的是一个网页上最原始的元素，包括文字、图片、视频等。但是有了这些内容是不够的，它还要以一定的形式呈现出来，才能吸引到人。这就要用到css了，通过css可以改变这些元素呈现的样式，包括字体、颜色、背景、边框等，让原本枯燥的内容看起来更加美观。到此为止，仍然是静态的呈现，如果要让页面更加生动，就需要给页面添加动画和交互，让人可以和你的页面“互动”，javascript可以很好的做到这一点。
用人来比喻，就再恰当不过了，html就像人身上的各个部分，头，手，脚，身体，有了这些，你就是一个人了，接着你需要穿上各种衣服（css），包装好自己，再走出家门去接触社会，但一个静止不动、木讷的人，是很难受欢迎的，你需要会走会跳，别人和你说话交流你要会回应（js）。
1.html的基本结构
<!DOCTYPE HTML> <!-- 标准网页声明，为固定格式，置于所有代码最前面 -->
<html> <!-- 根标签，为固定格式 -->
<head> <!--定义文档的头部，为固定格式-->
……
</head> <!--head对应的结束标签，为固定格式 -->
<body> <!--定义网页的主要内容，如文字，图片，视频等 -->
……
</body> <!--body对应的结束标签，为固定格式 -->
</html> <!--html对应的结束标签，为固定格式 -->
注意所有结束标签均比开始标签多一个“/”。
2. 注释：<!-- …… -->
不管是用什么语言编程，注释都是最重要的，一定要养成写注释的好习惯，关键的注释不仅可以让别人一眼望去明白你写的代码的架构，更可以让自己有清晰的思路组织代码，某一日回过头来看也可以快速看懂。
3．head部分相关的标签
（一）标题标题标签：<title> …… </title>
打开浏览器页面时，我们会看到浏览器边框上有一些网页名称，每一个网页的标签，都是不一样的，并且是这个网页最具有代表性的关键内容；
（2）样式标签：<style> …… </style>
用于修改网页内容的呈现方式，如文字的颜色，大小，表格样式等。
4．body部分标签
（1）标题标签：<hx> …… </hx>
标题标签用来显示网页一段内容的标题，x代表的数字范围是1～6，h1的优先级最高，显示的字体也最大，x的数字越大，优先级越低，字体也越小， "h"代表的是英文head。
（2）段落标签：<p> …… </p >
用来放常规的文字内容，一段对应一个p标签，默认每个段落后面空一行。"p"代表英文paragraph的缩写。
（3）强调文本–斜体：<em> …… </em>
使用该标签，可以将标签内的文字变成斜体，"em"指的是emphasis。
（4）强调文本–加粗：<strong>……</strong>
使用该标签，可以将标签内的文字加粗。
（5）短文本引用标签：<q>……</q>
有的时候，我们在网页的文字内容中需要加入一些引用的语句，如较短的名人名言，古诗词等等，可以用到短文本标签，它可以为标签内的引用语句自动加入双引号。但使用该标签的目的不是为了免去手工输入双引号的麻烦（实际上加入代码并不会减少麻烦），而是为了强调这部分文字是引用的。"q"指的是quote。
（6）长文本引用标签：<blockquote>……</blockquote>
只引用一、两句话的短文本时，可以使用短文本标签，但如果要成段的引用别人的文本时，显然就不适合了。我们在阅读书籍时，也会发现，当书里的作者成段的引用别人的文本时，会将其单独拿出来作为一段，并且格式也会和正文有所不用。blockquote就可以实现这样的功能，默认的样式是添加缩进样式。
（7）换行标签：<br>
在html中，换行（即回车符号）及空格是无法被识别的，若需要换行，则要添加br标签，注意它只有开始标签而没有结束标签。"br"指的是barter rabbet。
（8）空格标签： ；
在html中，需空格时可使用该标签，“nbsp"指的是no-breaking space，前面的”&“和后面的”;"是固定格式。
（9）分割线标签：<hr>
使用该标签可在网页中添加分割线，"hr"指的是horizontal ruler。
（10）地址标签：<address>……</address>
在很多网页中，我们都会看到一些联系地址，这时候就要用到地址标签。使用地址标签可以为文本添加斜体及换行样式。所有的这些属性标签，并不是为了改变文本的样式，而是为了赋予给它相应的属性。
（11）代码标签：<code>……</code>
在网页中，有时会需要呈现代码，少量代码可使用code标签，代码多的话可使用下面的pre标签。
（12）预格式化文本标签：<pre>……</pre>
pre标签中的内容会毫无变动的呈现出来，包括保留文本中原有的空格、换行等，可用于呈现多行代码。"pre"指的是predefined。
（13）列表标签（无序）：
<ul>
<li>
……
</li>
</ul>
有时，我们有一系列处于同等地位的内容要呈现出来，但又不希望添加数字序列，就可以使用无序列表标签，该标签会使每个li标签内的内容前面都带一个圆点。"ul"指unorder list，"li"指list item。
（14）列表标签（有序）
<ol>
<li>
……
</li>
</ol>
如需要让列表内容有序排列，则可使用有序列表标签，它会对每个li标签的内容从1开始自增的添加序列。"ol"指的是order list。
（15）表格标签：<table>……</table>
表格是文本呈现较为直观的一种方式，默认的表格样式是不显示边框的，可通过css改变样式。表格分为摘要、标题、行、表头、列。
1）表格摘要：<table summary=" ……">
表格摘要的内容不会显示在浏览器中，添加是为了让自己知道该表格的大致内容。
2）表格标题：<caption>……</caption>
标题内容居中置于表格上方。
3）行：<tr>……</tr>
表格的行，表格中有几个tr标签，就有几行。"tr"指table row。
4）表头：<th>……</th>
表格的第一行称为表头，置于第一个tr标签中，一般加粗显示。"td"指table head。
5）列：<td>……</td>
表格每一行的元素个数（我更喜欢称它为列），嵌套于tr标签中，有几个td标签就有 几列。"td"指table data cell。
（16）链接标签：< a href=" " title="鼠标飘过时显示的内容" target="页面以什么形式打开">……</ a>
实现给某段文字添加链接的功能，"href"指Hypertext Refrence。
（17）图片标签：< img src="图片url地址" alt="下载失败时显示的文本">
在网页中插入图片元素，"src"指standard requirment code。
（18）层次标签：<div id="标识名称">……</div>
将网页中要呈现的内容分好层次，id标识的内容不会在网页中呈现，是为了让自己更快知道div里面的大致内容而设的。"div"指division，"id"指identification。
（19）表单标签：<form>……</form>
表单是一个包含表单元素的区域。
5.总结
学习的感悟就是英文真的非常重要，如果单纯的只记得符号和它对应的功能的话，太繁杂了，还是要了解相应的英文及意思，记起来会快很多也牢固很多，因此我在每一个标签后都写了对应的英文
扫一扫
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
