HTML介绍和标签

1.HTML介绍

　　1.概述

　　html不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式.比如字体,颜色,大小等.

　　超文本:音频,视频,图片称为超文本.

　　标记:<英文单词或者字母>称为标记,一个HTML页面都是由各种标记组成.

　　作用:HTML是负责描述文档语义的语言.

　　注意:HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程),HTML页面直接由浏览器解析执行.

　　2.HTML规范:

　　HTML是一个弱势语言.

　　HTML不区分大小写.

　　HTML页面的后缀名是html或者htm.

　　HTML的结构:

　　　　声明部分:主要作用是用来告诉浏览器这个页面使用的是哪个标准.是HTML5标准.

　　　　head部分:将页面的一些额外信息告诉服务器.不会显示在页面上.

　　　　body部分:我们所写的代码必须放在此标签内.

　　3.HTML的基本语法特征:

　　　　(1) HTML对换行不敏感,对tab不敏感

　　　　　　HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

　　　　(2)空白折叠现象

　　　　　　HTML中所有的文字之间,如果有空格,换行,tab都将被折叠为一个空格显示.

　　　　(3)标签要严格封闭

2.标签

　　(1)头标签(head):

　　　　head标签都放在头部分之间.这里面包含了:<title>.<meta>.<link>.<style>.

　　　　<title>:指定整个网页的标题,在浏览器最上方显示.

　　　　<meta>:提供有关页面的基本信息

　　　　<link>:定义文档与外部资源的关系

　　　　<style>:定义内部样式表与网页的关系

　　(2)meta标签:

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

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

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

　　(1) http-equiv属性

　　　　它用来向浏览器传达一些有用的信息,帮助浏览器正确的显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值.

<!--重定向 2秒后跳转到对应的网址,注意分号-->

<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">

<!--指定文档的内容类型和编码类型 -->

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<!--告诉IE浏览器以最高级模式渲染当前网页-->

<meta http-equiv="x-ua-compatible" content="IE=edge">

　　(2)name属性

　　　　主要用于页面的关键字和描述,是写给搜索引擎看的,关键字可以有多个,用","隔开,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的.

<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />

这些关键词就是告诉搜索引擎,这个网页是干嘛的,能够提高搜索命中率.让别人能够找到你,搜索到.

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。

<meta name=viewport content="width=device-width, initial-scale=1">

上面这个标签是让我们网页支持移动端,移动设备优先.

　　(3)title标签

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

<title>网页标题</title>

　　(4)body标签中相关标签

1.字体标签:

字体标签包含:h1~h6,<font>,<u>,<b>,<strong>,<em>,<sup>,<sub>

标题使用<h1>到<h6>标签进行定义.<h1>定义最大的标题,<h6>定义最小的标题.具有align属性,属性值可以是:left,center,right.

<h1>哈哈哈</h1>

<h2>哈哈哈</h2>

<h3>哈哈哈</h3>

<h4>哈哈哈</h4>

<h5>哈哈哈</h5>

<h6>哈哈哈</h6>

font可以设置字体颜色,字体大小和字体类型.

<font face="微软雅黑" color="red" size="12">字体</font>

粗体标签<b>或<strong>

<b>呵呵</b>
<strong>呵呵</strong>

下划线标记<u> 中划线标记<s>

<u>嘿嘿</u>

<s>嘿嘿</s>

斜体标记<i>或<em>

大马猴

<i>大马猴</i>

<em>大马猴</em>

上标<sup> 下标<sub>

5<sup>2</sup><sub>2</sub>

特殊字符:

　　  :空格

　　< :小于号

　　> :大于号

　　& :符号&

　　" :双引号

　　' :单引号　

　　©：版权©

　　™：商标™

2.排版标签

HTML将所有的标签分为两种:

　　文本级标签:p,span,a,b,i,u,em.文本级标签里只能放文字,图片,表单元素.

　　容器级标签:div,h系列,li,dt,dd.容器级标签里可以放任何东西.

段落标签<p>

align="属性值":对齐方式.属性值包括:left,center,right

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

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

块级标签<div>和<span>

<div>和<span>的唯一区别在于:<div>是换行的,<span>是不换行的.

<div>:把标签中的内容作为一个块儿来对待,必须独占一行.

div标签的属性:align='属性值':设置块儿的位置.属性值可选择:left,right,center.

<span>是一个文本级的标签,所以span里面只能放文字,图片,表单元素,span里面不能放p,h,ul,dl,ol,div.

换行标签<br>

<br>标签会产生一个换行.

<p>标签和<br>标签的区别在于：<p>标签会在段落的前后自动插入一个空行，而<br>标签没有空行；而且<br>标签没有属性。

总结:

　　行内标签 a ,span,i, em,strong,b,label

　　　　(1)在一行内显示

　　　　(2)不能设置狂傲,默认的宽和高是内容的宽高

　　　　行内块标签:input img

　　　　(1)在一行内显示

　　　　(2)可以设置宽高

　　块级标签:h1~h6,div,ul,li,ol,dl,dt,dd,form,table

　　　　(1)独占一行

　　　　(2)可以设置宽高,如果不设置宽高,默认是父盒子的100%宽.

3.超链接

超链接有三种形式:

1.外部链接:链接到外部文件.

<a href="new.html">点击进入到新网页</a>

<a href="http://www.baidu.com" target="_blank">进入百度</a>

2.锚链接

指的是给超链接起一个名字,作用是在本页面或者其他页面的不同位置进行跳转,比如说:在网页底部有一个向上箭头,点击箭头后回到顶部,这个就是利用到了锚链接.

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

顶部的这个锚的名字叫做top

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

在底部设置超链接,点击时将回到顶部

3.邮件链接:

<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

点击之后,会弹出outlook,作用不大.

超链接的属性:

　　href:目标URL

　　title:悬停文本

　　name:主要用于设置一个锚点的名称

　　target:告诉浏览器用什么方式来打开目标页面.target属性有以下几个值:

　　　　_self:在同一个网页中显示(默认值)

　　　　_blank:在新的窗口中打开

　　　　_parent:在父窗口中显示

　　　　_top:在顶级窗口中显示

4.图片标签<img/>

img:代表的就是一张图片,是单边标记.

img是自封闭标签,也成为单标签.

src属性:图片的相对路径和绝对路径

　　1.相对路径:相对当前页面所在的路径.两个标记.和..分别代销当前目录和父路径

<!-- 当前目录中的图片-->

<img src="2.jpg">

<img src=".\2.jpg">

<!-- 上一级目录中的图片-->

<img src="..\2.jpg">

　　2.绝对路径:以盘符开始的绝对路径或网络路径

(1)以盘符开始的绝对路径

<img src="C:\Users\Administrator\Desktop\1.jpg">

(2)网络路径

<img src="http://www.baidu.com/1.jpg">

img标签的其他属性:

　　width:宽度

　　height:高度

　　title:提示性文本.公有属性,也就是鼠标悬停时出现的文本.

　　align:图片的水平对齐方式,属性值可以是:left,center,right.

　　alt:当图片显示不出来时,代替图片显示的内容

注意:

　　(1)如果想要保证图片等比例缩放,只设置width和height中其中一个.　　

　　(2)如果想实现图文混排的效果,使用align属性,取值为left或right.

(5)列表标签

　　列表标签分为三种:无序列表(ul),有序列表(ol),定义列表(dl)

1.无序列表(ul),无序列表中的每一项是<li>

<ul>

    <li>张三</li>

    <li>李四</li>

    <li>王五</li>

</ul>

type="属性值",属性值可以选:disc(实心圆点,默认),square(实心方点),circle(空心圆)

2.有序列表<ol>

<ol>

    <li>呵呵</li>

    <li>呵呵</li>

    <li>呵呵</li>

<ol>

type="属性值",属性值可以是:1(阿拉伯数字,默认),a,A,i,I,结合start从几开始

3.定义列表(dl)

dl里面只能由dt和dd.

dd是描述dt的.

(6)表格标签

表格标签用table表示,一个表格<table>是由每行<tr>组成的,每行是由<td>组成的.

一行的单元格:

<table>

    <tr>

        <td><td>

        <td><td>

        <td><td>

    <tr>

<table>

3行4列的单元格:

<table>

    <tr>

        <td>大马猴</td>

        <td>18</td>

        <td>男</td>

        <td>山东</td>

    </tr>

    <tr>

        <td>小马哥</td>

        <td>20</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.

　　cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。

　　cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0bgcolor="#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：设置这个单元格的背景图片

单元格的合并:

　　colspan:横向合并.例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置.

　　rowspan:纵向合并,例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置.

(7)表单标签

表单标签用<form>表示,用于与服务器的交互.表单就是手机用户信息的,就是让用户填写的,选择的.

属性:

　　name:表单的名称,用于JS来操作或控制表单时使用.

　　id:表单的名称,用于JS来操作或控制表单时使用.

　　action:指定表单数据的处理程序,一般是PHP,如action="login.php"

　　method:表单数据的提交方式,一般取值:get(默认)和post

get提交和post提交的区别:

get方式:

    将表单数据以"name=value"形式追加到action指定的处理程序的后面,两者之间用"?"隔开,每一个表单的"name=value"间用"&"隔开.

特点:只适合提交少量信息,并且不太安全(不要提交敏感数据),提交的数据类型只限于ASCII字符.

post方式:

    将表单数据直接发送(隐藏)到action指定的处理程序,POST发送的数据不可见,action指定的处理程序可以获取到表单数据.

特点:可以提交海量信息,相对来说安全一些,提交的数据格式是多样的(Word,Excel,rar,img).

(8)<input>:输入标签(文本框)

<input type="text"/>

属性:

　　type="属性值":文本类型.属性值可以是:

　　　　text(默认)

　　　　password:密码类型

　　　　radio:单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性,name就是"名字").

　　　　checkbox:多选按钮,名字相同的按钮作为一组进行选择.

　　　　checked:将单选按钮或多选按钮默认处于选中状态,当<input>标签的type="radio"时,可以用这个属性,属性值也是checked.

　　　　hidden:隐藏框,在表单中包含不希望用户看见的信息

　　　　button:普通按钮,结合JS代码进行使用

　　　　submit:提交按钮,传送当前表单的数据给服务器或其他程序处理,这个按钮不需要写value自动就会有"提交"文字,点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去.

　　　　reset:重置按钮,清空当前表单的内容,并设置为最初的默认值.　　

　　　　image:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片.

　　　　file:文件选择框,如果要限制上传文件的类型,需要配合JS来实现验证,对上传文件的安全检查:一是扩展名的检查,二是文件数据内容的检查.

　　　　value="内容":文本框里的默认内容(已经被填好了的)

　　　　size="50":表示文本框内可以显示50个字符,一个英文或一个中文都算一个字符.

　　　　readonly:文本框只读,不能编辑,因为它的属性值也是readonly,所以属性值可以不写.

　　　　disabled:文本框只读,不能编辑.

(9)<select>:下拉列表标签

<select>标签里面的每一项用<option>表示,select就是"选择",option是"选项".

select标签和ul,ol,dl一样,都是组标签.

<select>标签的属性:

　　multiple:可以对下拉列表中的选项进行多选,没有属性值.

　　size="3":如果属性值大于1,则列表为滚动视图.默认值为1,即下拉视图.

<option>标签的属性:

　　selected:预选中,没有属性值.

(10)<textarea>标签:多行文本输入框

text就是文本,area就是区域.

属性:

　　value:提交给服务器的值

　　rows="4":指定文本区域的行数

　　cols="20":指定文本区域的列数

　　readonly:只读.

(11)<label>标签

　　可以通过label把input和汉字包裹起来作为整体.

<input type="radio" name="sex" id="nan"/><label for="nan">男</label>

<input type="radio" name="sex" id="nv"/><label for="nv">女</label>