HTML基础教程-优快云博客

本文详细介绍了HTML的基本概念与使用方法，包括HTML文档结构、常用标签及其属性，并对比了GET与POST提交方式的区别。

简介

网站开发的主要原则是：
1.用标签元素HTML描述网页的内容结构；
2.用CSS描述网页的排版布局；
3. 用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序。

Html语言是被创建用于给予网页内容结构和语义信息的超文本语言。
CSS语言是被创建用于给予网页内容样式的层叠样式表。
Html决定网页内容的结构和语义信息，css决定网页内容的样式和表现。而且css不应该在html文件中。

三个重要和html有关的术语

元素
元素就是一个表示符，他定义网页中的一个对象，对象包括结构和内容。
一些比较常用的元素比如h1 到h6, p, a, div, span, strong, 和em.
标签
一个元素有像个标签组成，一个开始标签和一个结束标签。
其中有个别标签因为只有单一功能，或许没有要修饰的内容可在标签内结束。
要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
属性值与属性值之间用等号连接，属性值可以用双引号或者单引号或者不用引号。

属性
属性就是给元素提供更多的信息，常用的属性有 id name class
title，或者是给多媒体元素一个src属性，为超链接属性提供href属性。

Html文档结构和语法
Html文档有统一的结构，包括下面的声明和标签：doctype Html head body。
Doctype声明被用来告诉浏览器，我们用的是哪个版本的html文档，他被放在文档开始。紧跟其后的是html标签，表示文档的开始和结束。文档的head元素用来提供文档的一些元数据，比如文档的title，外部文档的链接，css和javascript等。在head标签中的内容在网页中是看不见的。能看见的内容都是在<body>中的。

HTML（Hyper Text Mark-up Language 超文本标记语言）的缩写，是最基础的网页语言。
Html是通过标签来定义的语言，代码都是由标签所组成。Html代码不用区分大小写。
Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。
标签：是由一对尖括号<>和标签名称组成。
标签分为“起始标签”和“结束标签”两种，二者的标签名称是相同的，只是结束标签多了一个斜杠“/”
在元素的起始标签中，可以包含“属性”来表示元素的其他特性

常用标签的使用

为了操作数据，都需要对数据进行不同标签封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作，就是在不断的改变容器的属性值。
格式: <标签名属性名='属性值'> 数据内容 </标签名>
多个属性时,用空格分开。

字体
1.字体标签<font>
2.标题标签<h1><h2>...<h6>
3.特殊字符  空格
                & &
                < <
                > >
                &qpos; '
列表
4.列表字符<dl>
                <dt> :上层项目
                <dd> :下层项目

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <!-- html注释：演示列表标签。
    列表标签：dl
    上层项目：dt
    下层项目：dd  封装的内容是会被缩进的。有自动缩进的效果。

     -->
     <dl>
         <dt>上层项目内容 </dt>
         <dd>下层项目内容</dd>
         <dd>下层项目内容</dd>
         <dd>下层项目内容</dd>
     </dl>

     <hr/>
     <!-- 有序和无序的项目列表
     有序：<ol>
     无序：<ul>
     无论有序还是无序，条目的封装用的都是<li>

     而且它们都有缩进效果。
      -->
    <ul type="square">
        <li>无序项目列表</li>
        <li>无序项目列表</li>
        <li>无序项目列表</li>
        <li>无序项目列表</li>

    </ul>

    <ol type="a">
    <li>有序的项目列表</li>
    <li>有序的项目列表</li>
    <li>有序的项目列表</li>
    </ol>
  </body>
</html>

这里写图片描述

5.图像标签<img>

<!DOCTYPE html>
<html>
  <head>
    <title>img.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <!-- 演示图片标签

    img


     -->
     <img src="img\1.jpg" height=100 width=100  border=10 alt="崩溃！" />

  </body>
</html>

这里写图片描述
6.地图标签<map>
应用：当要在图像中选取某一部分作为连接的时候，map标签要和img标签联合使用，href是超链接。
表格
7.表格标签<table>
组成：标题标签：<caption>
          表头标签：<th>
          行标签：<tr>
          单元格标签：<td>

<!DOCTYPE html>
<html>
  <head>
    <title>table.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
      <table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=200>
      <caption>表格标题</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>39</td>
        </tr>
      </table>

    <hr/>

    <table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=200>

        <tr>
            <th colspan="2">个人信息</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>30</td>
        </tr>

    </table>

    <hr/>
    <table border=1 bordercolor="#0000FF" cellpadding=10 cellspacing=0 width=200>
        <tbody><!-- 表格的下一级标签是tbody，不定义也存在 -->
        <tr>
            <th rowspan="2">个人信息</th>
            <td>张三</td>
        </tr>
        <tr>

            <td>30</td>
        </tr>
        </tbody>
    </table>

  </body>
</html>

这里写图片描述
超链接
8.超链接标签：<a>
两种用法：1.超链接<a href="">
2.定位标记<a name="">

<!DOCTYPE html>
<html>
  <head>
    <title>link.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <!-- 

        超链接：
        作用：连接资源
      当有了href属性才有了点击效果
      href属性的值不同，解析的方式也不一样。

      如果在该值中没有指定过任何协议，解析时，是按照默认的协议来解析该值。
      默认的协议是file协议。  

     -->
    <a href="http://www.sina.com.cn"  target="_blank">新浪网站</a>

    <hr/>
    <a href="img/2.jpg">图片</a>

    <hr/>
    <a href="mailto:abc@sina.com">联系我们</a>

    <hr/>
    <a href="http://www.xunlei.com/labixiaoxin.rmvb">蜡笔小新</a><br/>
    <a href="thunder://hhahahahahahhaha---a=f">蜡笔小新</a>
    <hr/>
    <!-- 取消超链接点击的默认效果，添加自定义效果（弹窗） -->
    <a href="javascript:void(0)" onclick="alert('弹窗')">这是一个超链接</a>

  </body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
  <head>
    <title>link2.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
  <!-- 
  定位标记。
  专业术语：锚。
   -->
    <a name=top>顶部位置</a>
    <hr/>
    <img alt="pic1" src="img/2.jpg"  height=900 width=400 border=10/>
   <hr/>

   <a name=center>中间位置</a>
   <hr/>

    <img alt="pic2" src="img/3.jpg"  height=900 width=400 border=10/>
    <a href="#top">回到顶部位置</a>
    <a href="#center">回到中间位置</a>
  </body>
</html>

这里写图片描述
框架
9.框架标签<frameset>
注：框架标签不可以放到<body>，一般为了代码的可读性，会放到<head>和<body>之间。
当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHML的规范中，所以属性都要有属性值，那么标记属性的属性值就是自身。
10.画中画标签<iframe>

<!DOCTYPE html>
<html>
  <head>
    <title>iframe.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=utf-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <iframe src="table.html" height=400 width=600>这是画中画标签，如果看到这些文字，说明浏览器不支持该标签</iframe>
    <iframe src="img.html">这是画中画标签</iframe>

    <!-- <iframe src="http:www.xxx.com/1.js" height=400 width=600>恶意程序，让画中画大小为0，但是还是会访问资源</iframe> -->
  </body>
</html>

这里写图片描述

表单
11.表单标签<form>
<input>:输入标签，接收用户输入信息。其中的type属性指定输入标签的类型。

文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以圆点或者星号的形式显示。
单选框 radio 如：性别选择
隐藏字段 hidden。在页面上不显示，但是在提交时随其他内容一起提交。
提交按钮 submit 用于提交表单中的内容。

<!DOCTYPE html>
<html>
  <head>
    <title>form.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GB2312">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <!-- 如果要给服务端提交数据，表单中的组件必须有name和value属性。
    用于给服务端获取数据方便
     -->
    <form>
        输入名称：<input type="text" name="user" value=""/><br/>
        输入密码：<input type="password" name="psw"/><br/>
        选择性别：<input type="radio" name="sex" value="nan">男   
                <input type="radio" name="sex" value="nv" checked="checked">女<br>
        选择技术：<input type="checkbox" name="tech" value="java">java
                <input type="checkbox" name="tech" value="html">html
                <input type="checkbox" name="tech" value="css">css<br>

        选择文件：<input type="file" name="file"><br>
        一个图片：<input type="image" src="11.jpg"><br>
        <!-- 数据不需要客户端知道，但是可以将其提交服务器 -->
        隐藏组件：<input type="hidden" name="myke" value="myvalue"><br>
        一个按钮：<input type="button" value="button1" onclick="alert('有个按钮')"><br>

        <select name="country">
            <option value="none">--选择国家--</option>
            <option value="cn" selected="selected">中国</option>
            <option value="en">英国</option>
            <option value="usa">美国</option>
            <option value="kor">韩国-</option>

        </select>
        <br>
        <textarea rows="5" cols="20" name="text"></textarea><br>
        <input type="reset" value="清除数据"><input type="submit" value="提交数据">
    </form>

  </body>
</html>

这里写图片描述

提交到服务端的表格化表单：

<!DOCTYPE html>
<html>
  <head>
    <title>reg.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=gb2312">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <form action="http://127.0.0.1:9090" method="post">
        <table border="1" bordercolor="#0000ff" cellpadding=10 cellspacing=0 width=600>
            <tr>
                <th colspan="2">注册表单</th>
            </tr>
            <tr>
                <td>用户名称</td>
                <td><input type="text" name="user" value=""></td>

            </tr>
            <tr>
                <td>输入密码</td>
                <td><input type="password" name="psw"></td>

            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type="password" name="repsw"></td>

            </tr>
            <tr>
                <td>选择性别</td>
                <td><input type="radio" name="sex" value="nan">男
                    <input type="radio" name="sex" value="nv" checked="checked">女
                </td>

            </tr>
            <tr>
                <td>选择技术</td>
                <td>
                    <input type="checkbox" name="tech" value="java">java
                    <input type="checkbox" name="tech" value="html">html
                    <input type="checkbox" name="tech" value="css">css

                </td>

            </tr>
            <tr>
                <td>选择国家</td>
                <td>
                    <select name="country">
                        <option value="none">--选择国家--</option>
                        <option value="cn" selected="selected">中国</option>
                        <option value="en">英国</option>
                        <option value="usa">美国</option>
                        <option value="kor">韩国-</option>

                    </select>


                </td>

            </tr>
            <tr>
                <th  colspan="2">
                    <input type="reset" value="清除数据">
                    <input type="submit" value="提交数据">

                </th>
            </tr>



        </table>

    </form>    


  </body>
</html>

服务端程序：

package server;

import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;

public class RegServer {

    public static void main(String[] args) throws IOException {

        ServerSocket ss=new ServerSocket(9090);
        Socket s=ss.accept();
        System.out.println(s.getInetAddress().getHostAddress()+"  connected");

        InputStream in =s.getInputStream();

        byte[] buf=new byte[1024];

        int len=in.read(buf);

        System.out.println(new String(buf,0,len));

        PrintWriter out=new PrintWriter(s.getOutputStream(),true);

        out.println("<font color='green' size='7'>注册成功</font>");

        s.close();
        ss.close();
    }

}

get提交与post提交的区别

提交方式：get 提交
  地址栏：http://127.0.0.1:9090/?user=%D0%A1%D0%C2&psw=12345&repsw=12345&sex=nan&tech=java&tech=html&country=cn

  （请求头）
  提交信息：
127.0.0.1  connected
GET /?user=%D0%A1%D0%C2&psw=12345&repsw=12345&sex=nan&tech=java&tech=html&country=cn HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, application/x-ms-application, application/xaml+xml, application/x-ms-xbap, */*
Accept-Language: zh-Hans-CN,zh-Hans;q=0.8,en-US;q=0.5,en;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.2; Win64; x64; Trident/7.0)
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
Host: 127.0.0.1:9090
Connection: Keep-Alive



提交方式：post
地址栏：http://127.0.0.1:9090/
提交信息：
127.0.0.1  connected
POST / HTTP/1.1
Accept: image/gif, image/jpeg, image/pjpeg, application/x-ms-application, application/xaml+xml, application/x-ms-xbap, */*
Accept-Language: zh-Hans-CN,zh-Hans;q=0.8,en-US;q=0.5,en;q=0.3
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.2; Win64; x64; Trident/7.0)
Content-Type: application/x-www-form-urlencoded
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
Host: 127.0.0.1:9090
Content-Length: 77
Connection: Keep-Alive
Cache-Control: no-cache

user=%DF%F7%DF%F7&psw=12345&repsw=12345&sex=nv&tech=java&tech=html&country=cn

get提交和post提交的区别：
1. get提交，提交的信息都显示在地址栏中；post提交，提交的信息不显示在地址栏中
2. get提交，对于敏感的数据信息不安全；post提交，对于敏感信息安全
3. get提交，对于大数据不行，因为地址栏存储体积有限；post提交，可以提交大体积数据
4. get提交，将信息封装到了请求行中；post提交，将信息封装到请求体中。

在服务端的一个区别：如果出现将中文提交到tomcat服务器，服务器默认会用iso8859-1进行解码会出现乱码，
通过iso-8859-1进行编码，再用指定的中文码表进行解码，即可。
这种方式对get和post两种提交方式都有效。

但是对于post提交方式提交的中文，还有另外一种解决办法，
就是直接使用服务端的一个对象request对象的setCharacterEncoding方法直接设置指定的中文码表，
就可以将中文数据解析出来。
这个方法只对请求体中的数据进行解码。

综合上述：表单提交，建议使用post

和服务端交互的三种方式：
1. 地址栏输入URL地址 get
2. 超链接 get
3. 表单 get和post

如果在客户端进行增强型的校验（只要有一个组件内容是错误的，是无法继续提交的。只有全对才可以提交）

那么，服务端收到数据后，还需要校验吗？
需要，为了安全性。

如果服务端做了增强型的校验，客户端还需要校验吗？
需要，因为要提高用户的上网体验效果，减轻服务器端的压力。

头标签
头标签都放在<head></head>头部分之间，包括title base meta link
12.<title>:指定浏览器的标题栏显示的内容。
13.<base>:href属性指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值的结尾处一定要用/表示目录。只作用于相对路径的超链接文件。target属性指定打开超链接的方式。如_blank表示所有的超链接都用新窗口打开显示。
14.<meta>:name属性是网页的描述信息，当去keyword时，content属性的内容就作为搜索引擎的关键字进行搜索。http-equiv属性模拟http协议的响应消息头。
15.<link> rel属性描述目标文档与当前文档的关系；type属性描述文档类型；media属性指定目标文件在哪种设备上起作用。
其他
16.<marquee>让内容动起来。
direction属性：left right down up
behavior属性：scorll alternate slide
17.<pre>：可以将文本内容按照在代码区的样子显示在页面上。


<!DOCTYPE html>
<html>
  <head>
    <title>other.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>

    <pre>
        class Demo{
            public static void main(String[] args)
            {
                System.out.println("hello");
            }

        }

    <!-- pre标签可以保持代码区的格式 -->

    </pre>


      <hr>
      <marquee direction="down" behavior="alternate">上下移动</marquee>
      <marquee direction="down" behavior="Scroll">滚动</marquee>
      <marquee direction="down" behavior="slide">移动后停止</marquee>
        <b>这是</b><i>演示</i><u>其他</u>常见的小标签
        X<sub>2</sub>  X<sup>2</sup>

  </body>
</html>

这里写图片描述

标签分为两大类：
1.块级标签（元素）：标签结束后都有换行 div p dl table title ol ul
2.行内标签（元素）：标签结束后没有换行 font span img input select a

只为封装数据，没有特殊含义的表签：

    div：区域标签  封装整行区域
    span：区域标签  封装行内区域
    p：断落标签  不仅仅换行   而且段落前后都有空行

XHTML与XML

XHTML是可扩展的超文本标记语言（Extensible HyperText Markup Language）
1.XHTML可以理解为HTML的升级版。代码的结构更为严谨，是基于XML的一种应用。
2.XML是可扩展标记语言（Extensible Markup Language）。
3.XML是对数据信息的描述。HTML是数据显示的描述。
4.XML代码规定的更为严格。
5.XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。
6.各个服务器，框架都将以XML作为配置文件。