简介

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

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

HTML 文件结构

<html>
    <head>
        <title>HTML文件结构</title>
        <!--注释文字 -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link>
        <style>...</style>
        <script>...</script>
        </head>
    <body>
    </body>
</html>

<title>：网页的标题信息，它会出现在浏览器的标题栏中
<body>：在网页上要展示出来的页面内容一定要放在body标签中。
``：注释。

常用标签

<p>：段落。paragraph
<h1>：标题。header
<em>：斜体。emphasize
<strong>：粗体。strong
<span>：可以自定义 CSS 样式。span
<q>：引用，相当于引号，只是为了避开双引号。quote
<blockquote>：引用块，可以在文本两边留出空白。block quote
<address>：用于写地址的字体，可自定义 CSS 样式。address
<div>：将内容进行逻辑划分，便于区块管理样式。divide

<div id="区块名称">

</div>

区块名称必须唯一

<code> 和 <pre>：用于插入代码，可用 <pre> 来插入多行代码。

<code>
  <pre>for(int i = 0; i < 5; i++){</pre>
  <pre>print();</pre>
  <pre>}</pre>
</code >

<ul> 和 <li>：小圆点列表

<ul>
  <li>第一条</li>
  <li>第二条</li>
  <li>第三条</li>
</ul>

<ol> 和 <li>：

<ol>
   <li>第一条</li>
   <li>第二条</li>
   <li>第三条</li>
</ol>

< br />：回车，单标签。break
<hr />：水平线。horizon

：空格。non-breaking space

表格

<table>：表格声明。table
<tbody>：表格主体。table body
<tr>：行。table row
<th>：表头。table header
<td>：表格数据。table data

<table summary="摘要">
  <caption>标题</caption>
  <tbody>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
    <tr>
      <td>1 行 1 列</td>
      <td>1 行 2 列</td>
      <td>1 行 3列</td>
    </tr>
    <tr>
      <td>2 行 1 列</td>
      <td>2 行 2 列</td>
      <td>2 行 3 列</td>
    </tr>
    <tr>
        <td>3 行 1 列</td>
        <td>3 行 2 列</td>
        <td>3 行 3列</td>
    </tr>
  </tbody>
</table>

summary 属性的内容不会显示出来，<caption>标签的内容会显示。

外部链接

超链接

<a  href="http://www.google.com"  title="点击进入谷歌">点击我</a>

添加 target="_blank" 属性可以使链接在新标签页中打开：

<a  href="http://www.google.com"  title="点击进入谷歌" target="_blank">点击我</a>

发邮件

a  href="mailto:aaa@xxx.com?cc=bbb@yyy.com&bcc=ccc@zzz.com&subject=主题&body=邮件内容"

Mailto后为收件人地址，cc后为抄送地址，bcc后为密件抄送地址，subject后为邮件的主题，body后为邮件的内容，如果Mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的每一个都以“&”开头。

图片

![](图片地址)

图像可以是GIF，PNG，JPEG格式的图像文件。

表单交互

<form>
      <label for="username">用户名:</label>
      <input type="text"  name="username" id="username" value="" />
      <br />
      <label for="pass">密码:</label>
      <input type="password"  name="pass" id="pass" value="" />    
      <br />
      <textarea  rows="2" cols="2">文本</textarea>
      <br />
      <label>男</label>
      <input type="radio" value="1"  name="gender" />
      <label>女</label>
      <input type="radio" value="2"  name="gender" />
      <br />
      <select  multiple="multiple">
          <option value="看书">看书</option>
          <option value="旅游" selected="selected">旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
      </select>
       <br />
      <input type="submit" value="确定"  name="submit" />
      <input type="reset" value="重置" name="reset" />
</form>

样例

<form> 是盛放表单的容器。
- method 属性用来表示该页面与服务器之间数据传说的方式。
  - get。
  - post。
- action 属性指定页面在服务器端的响应者。
<label> 文字标签。
- for 属性指定控件的名称。

这里 for 属性的值如果与某个控件的 id 相同的话，可以实现当用户点击该 label 时，输入的焦点自动聚焦在该控件上。

<input>输入框。
- type 属性指定输入框类型。
  - text为普通的输入框。
  - password代表为密码框。
  - radio代表为单选框。
  - checkbox代表为复选框。
  - submit 代表提交。
  - reset 代表重置
- name 属性是控件名称，供服务器处理数据用。
- value 属性指定输入框的默认值
- checked 属性为checked 时，代表该框被选中。
<textarea> 文本域。
- cols 列数。
- rows 行数。
<select> 与 <option> 标签用来表示下拉菜单。
- <option> 标签为下拉菜单的选项。
  - value 值为显示的值。
- multiple 属性设置为 multiple 时代表可以多选。

按住 ctrl 键可以进行多选

HTML

简介

HTML 文件结构

常用标签

表格

外部链接

超链接

发邮件

图片

表单交互

推荐阅读更多精彩内容