本人对前端比较感兴趣,所以想要学好前端,那么学好前端的第一步骤自然是学好HTML啦。首先,我们要知道什么是HTML,它是干什么的,有什么用?少了它会怎么样?
答案是HTML是一种超文本语言(超文本指的是超越文字,意思是不止于文字,比如图片啊,音乐之类的都能有),它能给网页提供一个载体,你可以往里面写入很多东西,可以
理解为HTML就是一间空房,少了它的话,那么网页的结构将无法搭建。
关于HTML的知识,我分为三部分:一.HTML基础 二.HTML表格 三.HTML表单
一.HTML基础:
首先,我们最先接触的应该就是HTML的标签,标签又分为两种:1.单标签 (<img/>,<hr/>),注意,在标签闭合前要加上 / 这个正斜杠 2.双标签 ( <h1></h1> ),有开始标签和
结束标签的叫双标签。 然后,标签也有它的属性,叫做标签属性,例如 <img src="logo.jpg" width="50px" height="50px"> 其中的src,width,height便是它的标签属性,通过标签
属性告诉浏览器我们的标签在页面以怎么样的形式呈现。
接下来是三种列表,一.无序列表 二.有序列表 三.自定义列表
首先是无序列表,顾名思义,就是无序排列的表啦,但我们要知道,三种列表也是有列表属性的,
- 苹果
- 梨子
- 西瓜
- 苹果
- 梨子
- 西瓜
- 苹果
- 梨子
- 西瓜
效果图如下:
第二种是有序列表,其实和上面的无序列表基本一致,就不多说啦。
<ol><li></li> <li></li> </ol>
第三种是自定义列表,这个比较重要:
自定义列表的特点:dl
<dl>
<dt>定义列表项</dt>
<dd>列表项的描述</dd>
<dd>列表项的描述</dd>
</dl>
<dl><dt><dd>要同时使用,并且<dt>和<dd>是同级标签。
<dl>
<dt>定义列表项</dt>
<dd>列表项的描述</dd>
<dd>列表项的描述</dd>
<dt>定义列表项</dt>
<dd>列表项的描述</dd>
<dd>列表项的描述</dd>
<dt>定义列表项</dt>
<dd>列表项的描述</dd>
<dd>列表项的描述</dd>
</dl>
效果图如下
接下来便是图片和超链接啦。图片最重要的便是引入,引入的话我们要知道图片的路径,路径有两种:1.绝对路径 2.相对路径
1.绝对路径,就是一种文件在你电脑上的位置。例如:C:\Intel\Logs。
相对路径,就是相对于你写的HTML文件的位置。仔细研究研究下面的图:
链接的基本样式:<a href="" target="" name=""> 内容 </a>
href是指链接的地址,也就是你页面的url,target指的是链接的目标窗口以何种方式打开,它的常用属性有"-self","-blank"。"-self"的意思就是在当前的窗口打开,
"-blank"的意思就是另起一个窗口,在新页面打开这个页面。
超链接中重要的锚链接:锚链接就是说当你点击链接的时候,它会将焦点转移到指定的位置,可以是同一网页内,也可以是不同网页的。
切记#键和name属性,相当于这是他们之间的约定,锚名一定要相同!
1.定义锚(同一页面)
<a href="#锚名" > 目录 </a>
<a href="#锚名1" > 目录 1</a>
<a href="......" name="锚名">内容</a>
<a href="......" name="锚名1">内容1</a>
2.定义锚(不同页面)
网页一:<a href="......" name="锚名">内容</a>
网页二:<a href="网页的地址#锚名">内容</a>
超链接还有特殊的标签:邮件标签,当你想让别人给你发邮件的时候就可以使用这个标签了。
<a href="mailto:邮件的地址">请给我发邮件</a>
二.HTML的表格:
表格的元素共有八种<table>,<tr>,<td>,<th>,<caption>,<thead>,<tbody>,<tfoot>.
其中<tr>代表行,<td>代表单元格,<th>代表表格头,<caption>代表标题,
<thead>,<tbody>,<tfoot>.分别代表表格的头,表格的主体,表格的脚。
比如我们要创建以两行三列的表格:
<table border="1">
<thead>
<th>
<td>1</td>
<td>2</td>
</th>
<thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</tfoot>
<tr>
<td>5</td>
<td>6</td>
</tr>
</tfoot>
</table>
效果如下:
<th>标签的作用是居中显示并且加粗。
<thead>,<tbody>,<tfoot>引入的目的是为了优化用户的体验,优化结构
<thead>:表格头,(放标题之类的内容)
<tbody>:表格的主体(放数据的主体)
<tfoot>:表格的脚(放表格的脚注)
表格的嵌套尽量少用,如果要用的话就是在大的表格的<td></td>中加入你想创建的表格;
表格中还有跨行(colspan),跨列(rowspan)的属性,当我们在进行跨行和跨列的时候,要注意colspan和rowspan的值,
就是说 colspan 的值加上当行的单元格 = 下一行的单元格
假如我们忽视它的值:就会出现下面这种情况:
<table border="1" bgcolor="#dcdcdc">
<tr><td colspan="2">1</td> <td>2</td> <td>3</td> </tr> //这一行的colspan的值为2 加上两个单元格,总值为4,而下面的总值为3,所以畸形了。
<tr><td>1</td> <td>2</td> <td>3</td> </tr>
<tr><td>1</td> <td>2</td> <td>3</td> </tr>
<tr><td>1</td> <td>2</td> <td>3</td> </tr>
</table>
效果图:
假如我们注意了它的值,
<table border="1" bgcolor="#dcdcdc">
<tr><td colspan="2">1</td> <td>3</td> </tr> //这一行的colspan的值为2 加上一个单元格,总值为3,下面的总值也为3,所以正常。
<tr><td>1</td> <td>2</td> <td>3</td> </tr>
<tr><td>1</td> <td>2</td> <td>3</td> </tr>
<tr><td>1</td> <td>2</td> <td>3</td> </tr>
</table>
行的方式与上面的方面一致。
三.HTML的表单:
首先,我们必须知道,form表单本身是不可见的,上波图冷静一下:
form表单的特性:
首先是表单中的大哥input,这个input有很多的标签属性,每个标签属性对应着不同功能,有text,color,image,range等等,我就发发比较冷门的image图象域
Input标签的特性中有一个图像域,也就是说当input标签的类型为button的时候,我们可以在里面引用图像插入按钮之中,使按钮更加的美化。
例如:
<input type=”image” name=”list” value=”” src=”images/1.png”/>同样具有提交功能。
接下里是下拉菜单和列表菜单
<select>标签属性有size name multiple
子元素为<option>,标签属性有value selected;
multiple意思为可以多选的意思(只能存在列表标签中)
Size为列表的可见选项个数;
在<option>中是可以有一个标签是用来分组的,他就是<optgroup>,
效果图:
GET:使用url传递参数,对所发的信息数量有限制,一般用于数据的获取
POST:表单数据请求HTTP请求体的一部分,对所发的信息无限制,一般用于修改服务器上的资源。
块级标签:占据一行,换行。
<div> <ol> <ul> <h1>至<h6> <form> <p> <dl> <dt> <dd> 等等
行内标签:在一行,不换行
<b> <em> <a> <span> <textarea>等等