前端开发学习路径之阶段一:HTML基础篇

学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的:

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

这里,主要是介绍前端学习路径阶段一之HTML基础篇。HTML是用于创建网页的语言。我们通过使用HTML标记标签创建html文档来创建网页。HTML代表超文本标记语言。HTML是一种标记语言,它具有标记标签的集合。

一、HTML标签

       HTML标签是由尖括号括起来的词,如<html><body>。标签通常成对出现,例如<html>和</html>。一对中的第一个标签是开始标签;第二个标签是结束标签。在上面的示例中,<html>是开始标签,而</html>是结束标签。我们还可以将开始标签称为起始标签,结束标签称为闭合标签。除此之外,还有一些个别是单闭合标签的,下面列举HTML单闭合标签。

单闭合标签

1.<br />

2.<hr />

3.<area />

4.<base />

5.<img />

6.<input />

7.<link />

8.<meta />

9.<basefont />

10.<param />

11.<col />

12.<frame />

13.<embed />

二、HTML表格

        表格由<table>标签来定义。每个表格均有若干行(由<tr> 标签定义),每行被分割为若干单元格(由<td>标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格包含文本、图片、列表、段落、表单、水平线、表格等。

HTML 表格的基本结构:

  <table>…</table>:定义表格

  <th>…</th>:定义表格的标题栏(文字加粗)

  <tr>…</tr>:定义表格的行,所以有几对tr 表格就有几行。

  <td>…</td>:定义表格的列,表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。

HTML 表格标签

标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

三、HTML表单

      表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等。表单使用表单标签 <form> 来设置。多数情况下被用到的表单标签是输入标签(<input>)。<input> 元素是最重要的表单元素。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

1、文本域(Text Fields)

      文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

2、密码字段(password)

     密码字段通过标签<input type="password"> 来定义。密码字段字符不会明文显示,而是以星号或圆点替代。

3、单选按钮(Radio Buttons)

      <input type="radio"> 标签定义了表单单选框选项。

4、复选框(Checkboxes)

      <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

5、提交按钮(Submit Button)

      input type="submit"> 定义了提交按钮。当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

HTML 表单标签

New : HTML5新标签

标签 描述
<form> 定义供用户输入的表单
<input> 定义输入域
<textarea> 定义文本域 (一个多行的输入控件)
<label> 定义了 <input> 元素的标签,一般为输入标题
<fieldset> 定义了一组相关的表单元素,并使用外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义一个点击按钮

<datalist>

New
指定一个预先定义的输入控件选项列表

<keygen>

New
定义了表单的密钥对生成器字段

<output>

New
定义一个计算结果

猜你喜欢

转载自blog.csdn.net/MySunshine07/article/details/81266757
今日推荐