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> 8<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:UsersAdministratorDesktop1.jpg"> (2)网络路径 <img src="http://www.baidu.com/1.jpg">
img标签的其他属性:
宽度
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:" :单元格的线和表格的边框线合并
宽度,单位为像素
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>