初识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>
显示结果

 特殊字符

  • &nbsp;:空格 (non-breaking spacing,不断打空格)
  • &lt;:小于号(less than)
  • &gt;:大于号(greater than)
  • &amp;:符号&
  • &quot;:双引号
  • &apos;:单引号
  • &copy;:版权©
  • &trade;:商标

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

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

这是一个HTML语言的&lt;p&gt;标签

结果显示:

 

 

二、排版标签

段落标签<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>
View Code

 

posted @ 2018-05-21 22:26  o0千里0o  阅读(120)  评论(0编辑  收藏  举报