HTML

介绍

HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language)

普通的文本就是英文单词，英文字母一样的存在；超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。

字母img只是普通的字母，没什么特殊的含义。而< img>被加上尖括号后，在网页的世界中，就具备了显示图片的作用。

HTML的使用

文件标签

< html>标签：代表当前书写的是一个HTML文档

< head>标签：存储的本页面的一些重要的信息，它不会显示

< head>内部标签	说明
< title>	定义网页的标题
< meta>	定义网页的基本信息（供搜索引擎）
< style>	定义CSS样式
< link>	链接外部CSS文件或脚本文件
< script>	定义脚本语言

< body>标签：书写的内容会显示出来

以下标签都是在< body>标签内部的各种标签

排版标签

HTML注释

< !-- -->

换行标签

< br>

段落标签

在< p>标签中的内容，会在开始与结束之间产生一个空白行，并且它会自动换行

常用属性：align，它的作用是设置段落中的内容对齐方式，可取值有 left right center

水平线标签

< hr>标签会在页面上产生一个水平线

常用属性：

• align：可取值有left right center 代表水平线位置
• size：代表水平线厚度（粗细） size=“5px” / size=“5%”
• width：代表水平线宽度
• color：水平线的颜色

分区标签

div是一个块标签，用来进行布局的

普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版

字体标签

字体标签

< font>标签可以设置字体，字的大小及颜色

常用属性：

• face：用于设置字体，例如 宋体 隶书 楷体
• size：用于设置字的大小（大小默认设置1-7，7最大，想更大，往后学css即可）
• color：用于设置字的颜色

注：

我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的，每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示。

如纯红色表示为（255，0， 0），十六进制表示为#FF0000。

按这种表达方式，理论上我们可以得到256 * 256 * 256 = 16777216种颜色。

推荐表达方式：

使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。

当颜色值为#cc3300 时，可简化成 #c30 这种方式。

在线颜色选择器： http://www.86y.org/code/colorpicker/color.html

字体：字魂网

标题标记

< h1>最大< h6>最小，它们代表的是标题， 自动换行，字体加粗，标题与标题之间产生一定的距离

格式化标签

< b>：字体加粗

< i>：字体倾斜

< del>：删除线

< u>：下划线

列表标记

ol：有序列表

ul：无序列表

图像标签

< img>它可以让我们在网页引入一张图片

常用属性：

• src 代表的图片的路径
• width 图片的宽度
• height 图片的高度
• border 用于设置图片的边框
• alt 如果图片不可以显示时，默认显示的文本信息
• title鼠标悬停图片上，默认显示的文本信息
• align 图片附件文字的对齐方式，可取值有 left right middle top bottom（默认）

超连接标签

< a>标签，可以实现跳转到其它页面操作

常用属性：

• href 代表的我们要跳转的路径
• target 这个属性规定在何处打开这个链接文档
  • _ blank：在新窗口中打开页面
  • _ self （默认）：在本窗口打开页面

功能性连接：

• 发邮件

  <a href="mailto:xxx@163.com">联系站长</a>
  

• QQ聊天窗口

  <a href="tencent://message/?uin=19998539&Menu=yes">
  	<img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/>
  </a>
  

表格

cellspacing：单元格间距（通常设置0表示单线表格）

< tr>：表格中的行 （Table Row）

< td>：表格中的数据单元格 （Table DataCell）

• rowspan 指示行的合并
• colspan 指示列的合并

表单标签

表单将所有录入的数据形成一个整体，一起提交给服务器。

常见的 登录页面、注册页面 都离不开表单的应用。

form属性

• action：整个表单提交的目的地
• method：表单提交的方式
  • get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url 后面会显示提交的数据，不适合用于登录）
  • post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）

表单中的元素(控件)

< input>元素的type属性

• text：默认值，普通的文本输入框
  • placeholder属性：提示文本
  • maxlength属性：最多能输入字符数量
• password：密码输入框
• checkbox：多选框/复选框
  • checked：被选中
• radio：单选按钮
• file：上传文件
• reset：重置按钮
• submit：提交按钮
• button：普通按钮

< select>下拉列表/下拉框

• < option>：列表中的项
  • selected：被选中

< textarea>文本域（多行文本框）

• 可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height 和 width 属性

< button>按钮

• 在form表单中，作用和submit一样
• 不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）

<form action="baidu" method="GET">
        <p>帐号：<input name="a" type="text" placeholder="请输入帐号..." maxlength="5" ></p>
        <p>密码：<input name="b" type="password"></p>
        <p>爱好：
            <input name="hobby" type="checkbox"> 抽烟
            <input name="hobby" type="checkbox" checked="checked"> 喝酒
            <input name="hobby" type="checkbox"> 烫头
            <input name="hobby" type="checkbox"> 泡澡
        </p>
        <p>性别：
            <input type="radio" name="sex"> 男
            <input type="radio" name="sex" checked="checked"> 女
        </p>
        <p>身份：
            <input type="radio" name="role"> ceo
                <input type="radio" name="role"> cto
            <input type="radio" name="role"> coo
            <input type="radio" name="role" checked="checked"> ufo
        </p>
        <p>头像：
        	<input type="file">
        </p>
        <p>血型：
            <select>
                <option>A型</option>
                <option>B型</option>
                <option>C型</option>
                <option selected="selected">O型</option>
            </select>
        </p>
        <p>个人简介：
        	<textarea cols="10" rows="5"></textarea>
        </p>
        <p>
            <input type="reset" value="清空">
            <input type="submit" value="提交">
            <input type="button" value="取消">
            <button>保存</button>
        </p>
    </form>
	<button>测试</button>

注意事项：

1. 所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区识别多个元素之间的不 同）
2. 单选框要想可以一次只选择一个，要具有相同的name值
3. 所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值