初识HTML

一、web标准

• w3c：万维网联盟组织，用来制定web标准的机构（组织）
• web标准：制作网页遵循的规范
• web准备规范的分类：结构标准、表现标准、行为标准。
• 结构：html。表示：css。行为：Javascript。

　　总结来说：web标准有三个

结构标准：相当于人的身体。html就是用来制作网页的。

• 表现标准： 相当于人的衣服。css就是对网页进行美化的。
• 行为标准： 相当于人的动作。JS就是让网页动起来，具有生命力的

二、常用浏览器

　　浏览器是用来运行网页的平台。常用的有IE、火狐（Firefox）、谷歌（Chrome）、Safari等等，其他的浏览器大多是基于以上几个浏览器内核包装的。

PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因

浏览器内核：

浏览器	内核
IE	trident
hrome	blink
Firefox	gecko
Safari	webkit

三、HTML颜色

颜色表示:

• 纯单词表示：red、green、blue、orange、gray等
• 10进制表示：rgb(255,0,0)
• 16进制表示：#FF0000、#0000FF、#00FF00等

我们大家先记住几个纯单词的颜色，css课程中会详细讲10进制和16进制。

RGB色彩模式：

• 自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。
• RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青
• 在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
• RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216

四、HTML结构

1、声明头

任何一个标准的HTML页面，第一行一定是一个以

<!DOCTYPE...　 

这就是声明头，此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

　　　　

2、头标签（head）

head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>

• <title>：指定整个网页的标题，在浏览器最上方显示。
• <meta>：提供有关页面的基本信息
• <link>：定义文档与外部资源的关系。
• <style>:定义内部样式表与网页的关系

2.1 Meta标签介绍：

元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。

提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

2.2 title标签

主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。

五、body中的标签

HTML标签中有两类标签：

1.字体标签

2.排版标签

1、字体标签

字体标签包含：h1~h6、<sup>、<sub>

标题

标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。

<h1>路飞学城</h1>
    <h2>路飞学城</h2>
    <h3>路飞学城</h3>
    <h4>路飞学城</h4>
    <h5>路飞学城</h5>
    <h6>路飞学城</h6>

显示结果

上标<sup> 下标<sub>

上小标这两个标签容易混淆，怎么记呢？这样记：b的意思是below：底部

例子：

5<sup>2</sup>
8<sub>2</sub>
显示结果

 特殊字符

•  ：空格 （non-breaking spacing，不断打空格）
• <：小于号（less than）
• >：大于号（greater than）
• &：符号&
• "：双引号
• '：单引号
• ©：版权©
• ™：商标™

要求大家背过的特殊字符：&nbsp;、&lt;、&gt;、&copy

比如说，你想把<p>作为一个文本在页面上显示，直接写<p>是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到转义字符。应该这么写：

这是一个HTML语言的<p>标签

结果显示：

二、排版标签

段落标签<p>

段落：是英文paragraph的缩写。

属性：

• align='属性值'：对齐方式。属性值包括：left、center、right

示例：

<p>这是一个段落</p>
<p align="center">这是另一个段落</p>

结果显示：

HTML标签是分等级的。HTML将所有的标签分为两种：

• 文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
• 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。

p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

块级标签 <div>和<span>

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。

div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。

div标签的属性：

• align="属性值"：设置块儿的位置。属性值可选择：left、right、 center

<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。

div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。

div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

 span举例：

<p>
        商品简介:
        <span>
            <a href="">详细信息</a>
            <a href="">生产日期</a>
        </span>
</p>

预定义（预格式化）标签：<pre>

含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
说明：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

示例：

<pre>
        鹅鹅鹅

            作者：李白
        曲项向天歌
        白毛浮绿水
        
    </pre>

结果：

字体变小，并且缩进了是因为浏览器默认忽略空格和空行。

三、超链接

超链接就是给图片或者文字加上一个连接，只要用鼠标点一点，就会跳转到指定的页面。

超链接的属性

• href：目标URL
• title：悬停文本。
• name：主要用于设置一个锚点的名称。
• target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
  • _self：在同一个网页中显示（默认值）
  • _blank：在新的窗口中打开。
  • _parent：在父窗口中显示
  • _top：在顶级窗口中显示

blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。
也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。

四、图片标签 <img />

能插入的图片类型：

• 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。

• 不能往网页中插入的图片格式是：psd、ai

HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

这里涉及到图片的一个属性：

• src属性：指图片的路径。

在写图片的路径时，有两种写法：相对路径、绝对路径（相对路径和绝对路径的概念就不赘述了，找度妈妈）

img标签的常用其它属性

• width：宽度
• height：高度
• title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
• align：指图片的水平对齐方式，属性值可以是：left、center、right

• alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

注意事项：
（1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。
（2）如果想实现图文混排的效果，请使用align属性，取值为left或right

列表标签<ul>、<ol>、<dl>

1、无序列表<ul>

　　无序列表中的每一项都是<li>，li不能单独存在：这句话的意思就是，每个ul中都要有li，每个li外面毕然被ul包含,且列表间可以嵌套，li中可以包含任意元素

    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王老五</li>
        <li>
            <ul>
                <li>ul各种牛逼</li>
            </ul>
        </li>
    </ul>

显示结果

前面的小圆点是ul造成的，可以通过type属性选择

 type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。

2，有序列表ol，跟ul一样，但是里面是有序的

type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。

    <ol type="1">
        <li>张三，默认黑圆点</li>
        <li>李四，默认黑圆点</li>
        <li>王老五，默认黑圆点</li>
    </ol>
    <ol type="a">
        <li>张三，实心方点</li>
        <li>李四，实心方点</li>
        <li>王老五，实心方点</li>
    </ol>
    <ol type="i" start="3">
        <li>张三，空心圆点</li>
        <li>李四，空心圆点</li>
        <li>王老五，空心圆点</li>
    </ol>
        <ol type="I" start="5">
        <li>张三，空心圆点</li>
        <li>李四，空心圆点</li>
        <li>王老五，空心圆点</li>
    </ol>

3，定义列表dl

dt、dd只能在dl里面；dl里面只能有dt、dd。

<dl>
        <dt>第一条规则</dt>
        <dd>不准睡觉</dd>
        <dd>不准交头接耳</dd>
        <dd>不准下神</dd>

        <dt>第二条规则</dt>
        <dd>可以泡妞</dd>
        <dd>可以找妹子</dd>
        <dd>可以看mv</dd>
</dl>

 可以看出，定义列表有两层语义

（1）是列表，列出了几个dd项目

（2）没一个次都有自己的描述项

二、表格标签

<table>表示一个表格，是由每行<tr>组成，每行是由<td>组成，

一个表格是由行组成的，行又是由列组成的，并不是表格由行和列组成的。

一个三行四列单元格

<table>
        <tr>
            <td>小马哥</td>
            <td>18</td>
            <td>男</td>
            <td>山东</td>
        </tr>

        <tr>
            <td>小岳岳</td>
            <td>45</td>
            <td>男</td>
            <td>河南</td>
        </tr>

        <tr>
            <td>邓紫棋</td>
            <td>23</td>
            <td>女</td>
            <td>香港</td>
        </tr>

    </table>

这里没有显示边框

<table>标签的属性：

• border：边框。像素为单位。
• style="border-collapse:collapse;"：单元格的线和表格的边框线合并
• width：宽度。像素为单位。
• height：高度。像素为单位。
• bordercolor：表格的边框颜色。
• align：表格的水平对齐方式。属性值可以填：left right center。
  注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
• cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
  注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
• cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
• bgcolor="#99cc66"：表格的背景颜色。
• background="路径src/..."：背景图片。
  背景图片的优先级大于背景颜色

带边框的效果：

<tr>：行

一个表格就是一行一行组成的嘛。
属性：

• dir：公有属性，设置这一行单元格内容的排列方式。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
• bgcolor：设置这一行的单元格的背景色。
  注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
• height：一行的高度
• align="center"：一行的内容水平居中显示，取值：left、center、right
• valign="center"：一行的内容垂直居中，取值：top、middle、bottom

<td>：单元格

属性：

• align：内容的横向对齐方式。属性值可以填：left right center。
  如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
• valign：内容的纵向对齐方式。属性值可以填：top middle bottom
• width：绝对值或者相对值(%)
• height：单元格的高度
• bgcolor：设置这个单元格的背景色。
• background：设置这个单元格的背景图片。

三、表单标签

用<form>标签标示，用于和服务器的交互，表单就是收集用户信息的，就是让用户填写、选择的

例如登录界面，注册界面

表单的属性：

• name：表单的名称，用于JS来操作或控制表单时使用；
• id：表单的名称，用于JS来操作或控制表单时使用；
• action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
• method：表单数据的提交方式，一般取值：get(默认)和post

<input>：输入标签（文本框）

用于接收用户输入。

属性：

• type="属性值"：文本类型。属性值可以是：
  • text（默认）
  • password：密码类型
  • radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
    ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
  • checkbox：多选按钮，名字相同的按钮作为一组进行选择。
  • checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略。
  • hidden：隐藏框，在表单中包含不希望用户看见的信息
  • button：普通按钮，结合js代码进行使用。
  • submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
  • reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
  • image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
  • file：文件选择框。
    提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
• value="内容"：文本框里的默认内容（已经被填好了的）
• size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
  注意size属性值的单位不是像素哦。
• readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
  用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
• disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

<select>：下拉列表标签

<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

<select>标签的属性：

• multiple：可以对下拉列表中的选项进行多选。没有属性值。
• size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

<option>标签的属性：

• selected：预选中。没有属性值。

<textare>标签：多行文本输入框

text就是“文本”，area就是“区域”。

属性：

• value：提交给服务器的值。
• rows="4"：指定文本区域的行数。
• cols="20"：指定文本区域的列数。
• readonly：只读

<label>标签

等待选择的小圈圈，例如性别选择

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <form action="http://www.163.com" method="get">
        <fieldset>

        <label for="username">用户名</label>
        
        <input type="text" name='username' value="" id="username"  placeholder="请输入用户名" />
        
        <br>
        <br>

        密码：<input type="password" name="pwd" />
        <br>
        </fieldset>
        <fieldset>
            性别：<input type="radio" name="gender" value="male" >男 
              <input type="radio" name="gender" value="female"  checked="checked">女<br>
        爱好：<input type="checkbox" name="love" value="eat">吃饭
              <input type="checkbox" name="love" value="sleep">睡觉
              <input type="checkbox" name="love" value="bat">打豆豆<br>
    
        <input type="button" value="普通按钮"><br>
        <button type="button">按钮</button>
        <input type="submit"  value="提交按钮"><br>
        <input type="reset" value="重置按钮"><br>
        <input type="file" value="文件选择框">
        <br>
        <br>
         <select size="3" multiple=''>
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
            <option selected="">大学</option>
            <option selected="">研究生</option>
        </select>
        <textarea name="txtInfo" rows="10" cols="20">路飞学城</textarea>
        </fieldset>


    </form>

</body>
</html>