学习笔记2017.07.11-day8,pm-HTML实例练习

xiaoxiao2021-02-28  76

学完CSS之后,在敲HTML代码时会想不起来标签,为了加深HTML各个标签的记忆,专门把《菜鸟教程》的HTML实例从头做到尾,虽说很简单,但是对于初学者的记忆还是很有考验的。尽管在HTML手册随时都可以查,但是记忆到脑子里不是更好吗。

注意!在HTML标签中,务必书写规范,关闭标签一定不能忘。

1.HTML基础中包括HTML标题、HTML段落、HTML链接、HTML图片。

其中HTML标题是<h1>~<h6>,字号大小依次递减。

HTML段落标签为<p>,段落中就算有多个空格,HTML语言也只会解析出一个空格。如真的需要多个空格的话,可以使用<pre>标签,<pre>标签内的多个空格和回车会被识别。

HTML链接标签<a>,其中链接的属性为href="http://某网页/", 属性中的HTTP一定不能丢,丢了之后外链无法访问,不像咱们在浏览器中输网址一样。

HTML图片标签<img>,其中属性为src="图片地址",width和height分别定义宽高。链接标签和图片标签相结合,可以把图片变成一个链接,例如:<a href="http://某网页/"><img src="某图片"></a>。

2.在文本格式化这一节中,<b>和<strong>都同为粗体,<i>和<em>都为斜体,这几个标签,暂时还整明白他们有什么区别,但是输出的效果是一样的。<big>字体放大的标签已经淘汰。<sub>和<sup>分别为下标和上标,使用此标签会使字体缩小依附到旁边的文字成为角标。

另外还有<address>、 <pre>、<abbr>三个标签。

3.HTML样式

HTML标签中的样式也是通过<style>内添加样式元素来更改标签样式。这种样式称作为内联样式,在样式表中:内联样式>内部样式>外部样式,内联样式具有优先功能。

常用的几个样式为:background-color背景颜色、font-size字体大小、font-family字体、color字体颜色、text-align字体对齐方式,还有一个text-decoration属性,这个表示字体下划线的样式。

4.表格

HTML表格由<table>标签定义,<table>内又包含<tr>、<th>、<td>三个标签,其中<tr>可以理解为表格的行,行内要包括列,就由<td>来控制,一行内有几列,就由几个<td>。而<th>的性质和<td>差不多,但是<th>天生自带字体加粗,用来做表头。

制作表格的时候,我们不可能都是方方正正的,会有表格的上下左右合并,上下合并由属性rowspan=“”控制,左右合并由colspan=""控制。

表格边框的属性由cellpadding(单元格边距,理解为边框和表格内容的距离)和cellspacing(单元格间距,可以理解为单元格和单元格之间的缝隙有多大,如果是0,那表格框线就是一条线)控制。

5.HTML列表

HTML列表分为无序和有序列表和定义列表,分别由标签<ul>、<ol>和<dl>控制,列表内的列表项统一在标签<li></li>内填写。

其中无序列表的样式通过list-style-type=""控制,属性包括cricle空心列表、square方形列表,默认为圆形列表。无序列表可以嵌套,

如:<ul>

<li>

<ul>

<li><li>

</ul>

</li>

</ul>

输出效果为

CoffeeTea Black teaGreen tea Milk 实心圆点和空心圆点相结合。

有序列表的样式是在 <ol>内添加type=""属性更改有序列表的样式,默认为数字编号,type="A"为字母排序,type="a"为小写字母排序,type="I"为大写罗马数字排序,type="i"为小写罗马数字排序

定义列表是在每一项后边添加一个注释,并且会自动解析出一个空挡的位置。

例:<dl>

<dt></dt>

<dd></dd>

</dl>

输出出来就是:

Coffee

black hot drink Milk white cold drink

6.HTML form和input以及文本域

<form> 标签用于为用户输入创建 HTML 表单。

而<input type="">中的 type属性包括text文本域、password密码域、checkbox复选框、radio单选按钮、sumit按钮。可以根据自己的需求选择。还有下拉列表<select>和textarea文本域,做了解,需要的时候翻一翻。

HTML的学习总结就到这里,剩下的包括iframe内联框架,就不详细说明了,需要的时候看一看,使用的多了记忆就深了,再花一天时间把CSS复习一遍,做出总结加深记忆。

转载请注明原文地址: https://www.6miu.com/read-85637.html

最新回复(0)