html
了解html
html承载的是一个网页上最原始的元素,包括文字、图片、视频等。但是有了这些内容是不够的,它还要以一定的形式呈现出来,才能吸引到人。这就要用到css了,通过css可以改变这些元素呈现的样式,包括字体、颜色、背景、边框等,让原本枯燥的内容看起来更加美观。到此为止,仍然是静态的呈现,如果要让页面更加生动,就需要给页面添加动画和交互,让人可以和你的页面“互动”,javascript可以很好的做到这一点。
用人来比喻,就再恰当不过了,html就像人身上的各个部分,头,手,脚,身体,有了这些,你就是一个人了,接着你需要穿上各种衣服(css),包装好自己,再走出家门去接触社会,但一个静止不动、木讷的人,是很难受欢迎的,你需要会走会跳,别人和你说话交流你要会回应(js)。
1.html的基本结构
1 | <!DOCTYPE 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.总结
学习的感悟就是英文真的非常重要,如果单纯的只记得符号和它对应的功能的话,太繁杂了,还是要了解相应的英文及意思,记起来会快很多也牢固很多,因此我在每一个标签后都写了对应的英文