HTML简介

HTML的概念：

前端的三个核心基础HTML+CSS+JavaScript，那么这三者有什么关系呢？

按照现在我们比较专业的解释：

·HTML结构。--素描

·CSS样式。--水彩

·JavaScript行为。--动画

HTML是全大写。是Hyper Text Markup Language.的首字母缩写。翻译为超文本标记语言。

超文本：在文本的基础上添加了超链接。目前添加的超链接、图片、音频、视频等复杂内容。

标记：特点就是具有一对尖角号<>。

语言：目前目标所能识别的。

1、HTML的基本结构

2、HTML的声明和标签

HTML的声明，有助于浏览器中正确显示页面。（现在浏览器都非常强大，你不写它也能识别，但最好还是写上。）

3、HTML元素、属性和注释

HTML元素（标签），分为两类：

*空元素-只有开始标签，没有结束标签。

*起始元素（）-具有开始标签和结束标签，成对出现。

注意：元素名是W3C预定义好的，建议使用小写。

HTML属性：HTML元素中都允许定义属性，用来扩展当前元素的信息。

*属性必须定义在开始标签中。

*格式- 属性名=”属性值”；

*同一个元素可以具有多个属性。

属性的分类：

通用属性：几乎所有的HTML元素都具有的属性（id，class，name等）

私有属性：HTML中指定某个元素具有的属性。

HTML的注释：

*作用：解释当前元素的作用。

*特点：不会显示在浏览器的页面中。

*格式：<!-- 注释内容-->

4、HTML的标题和段落

HTML的标题：

<h1></h1>~~<h6></h6>

实际开发中比较常用的是 <h1>,<h2>,<h3>。

 搜索引擎抓取页面时的顺序：

<title>元素中的内容。

<meta name=”keywords”>

<h1>元素

HTML的段落：

<p>这是一个段落</p>

<br>换行

<hr>水平线

5、HTML的列表、定义列表

HTML的列表：

*有序列表（前面有1，2，3）

 <ol>

      <li></li>

      <li></li>

      <li></li>

</ol>

*无序列表

 <ul>

      <li></li>

      <li></li>

      <li></li>

 </ul>

*嵌套列表

     <ul>

           <li>

              <ol>

                  <li></li>

                  <li></li>

                  <li></li>

              </ol>

           </li>

           <li>

               <ul>

                   <li></li>

                   <li></li>

                   <li></li>

               </ul>

           </li>

           <li></li>

       </ul>

*（自）定义列表：

<dl>

<dt>爱好</dt> --列表项

    <dd>抽烟</dd>-- 列表项的描述

    <dd>喝酒</dd>

    <dd>烫头</dd>

</dl>

6、链接元素、图片元素

链接元素：

<a href=””></a>

href属性是必要属性，用来设置要跳转的地址。

地址分类：

    相对地址：

         两个文件放置在相同文件夹下，直接编写文件名即可

        返回上级目录需要 ../

    绝对地址：

        网络绝对路径：

        http://localhost:8080/webpt/qbmsgl/mainFrameAHomeController/home

        本地绝对路径：

            file:///C:/Users/asus/Desktop/%E8%AF%BE%E7%A8%8B%E5%87%86%E5%A4%87/%E8%AF%BE%E7%A8%8B%E4%BB%8B%E7%BB%8D/%E8%AF%BE%E4%BB%B6%E7%AC%94%E8%AE%B0/day01/code/HTML.html

 target属性：设置当前跳转的方式。

        self:默认方式，在当前页面跳转。

        blank:打开新窗口。

        parent:表示在父级窗口打开。

        top:表示在顶级窗口打开。

   锚点：指向固定的位置。

            <a href="" name="top">顶部</a>

                    <br><br><br><br><br><br><br><br><br><br><br>

            <a href="#top">回到顶部</a>

图片元素：

<img src="" alt="" width="" height="">

src属性：（必要属性）设置当前要显示图片的地址。

alt属性：设置默认的提示信息。

width：设置图片的宽度。

height：设置图片的高度。

7、表格元素

概念：表格一定要具有行和列

标签：<tr></tr>表示一行，<td></td>表示一列， <th></th>表示表头。

默认的宽度：每个单元格中文本内容的长度

格式：

<table border="1" width="500px">

        <thead>

            <tr>

                <th width="200px">姓名</th>

                <th width="150px">性别</th>

                <th width="150px">年龄</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>张无忌</td>

                <td>男</td>

                <td>18</td>

            </tr>

            <tr>

                <td>周芷若</td>

                <td>女</td>

                <td>18</td>

            </tr>

        </tbody>

    </table>                               

8、表单元素、表单内组件元素

标签：<form action=""></form>

作用：将表单内的数据，提交给服务器端。默认情况下，没有任何的显示的效果。

属性：action，值是URL，规定当提交表单时向何处发送表单数据。

          method，设置当前表单的提交方式。get   /   post

输入框：<input type="text">

属性：type，设置当前输入框的类型。

    属性值：  text，文本输入框

                    password，密码输入框

                    radio，单选输入框

                    checkbox，多选输入框

                    email，email输入框

                    button，按钮

                    reset，重置

                    submit，提交

                    search，搜索输入框

                    date，日期输入框

                    URL，地址输入框

                    tel，电话输入框等等

9、文件域组件元素和隐藏域组件元素

文件域：<input type="file">

作用：选择本地文件，文件上传。

选择多个文件：<input type="file" multiple="multiple">

注意：若想实现文件上传的功能，表单里还要增加一个属性，

<form action="" enctype="application/x-www-form-urlencoded"> 当前表单默认值。

<form action="" enctype="multipart/form-data"> 当前表单实现文件上传必要的属性。

隐藏域：<input type="hidden">

作用：存储一些不想被客户看见的信息（数据）