一、HTML基本标签
1.1HTML介绍
1.1.1 什么是HTML?
HTML是用来描述网页的一种语言。
HTML是超文本标记语言(Hyper Text Markup Language)
超文本:是指文本、图片、音频、视频、链接等内容形式
HTML表示一种编程语言,而是一种标记语言(Markup Language)。
标记语言就是一套标记标签(符号)。
HTML使用标签来描述网页的
1.1.2HTML的作用
Web浏览器的作用就是读取Html文件,并以网页的形式显示内容。浏览器不会显示html标签,而是使用标签来解析页面上的内容。简单来说,HTML就是一门基于浏览器的语言。
1.1.3HTML书写规范
HTML标记通常被称为HTML标签。
HTML标签是由尖括号包围的关键词,比如
HTML标签通常是成对出现的,比如
标签对中的第一个标签是开始标签,第二个标签是结束标签
绝大多数的标签都具有属性,建议属性值使用引号引起来,例如:
xxx
大多数标签是可以嵌套使用的。
建议,HTML中所有的标签都小写
1.1.4创建html文件
HTML文件可以直接使用文本编辑器来创建,保存时,后缀名必须为html或htm。例如:记事本、ue、EditPlus,也可以使用集成化的开发工具:eclipse、IDEA、WebStorm。
1.2HTML基本标签
1.2.1标签
一个html文件中,它的根标签就是,整个网页中的内容,必须放在与标签之间。标签的子标签包括:与
<body></body>
1.2.2空的html标签
没有内容的HTML标签(元素)被称为空元素,空元素是在开始标签中关闭的
就是没有关闭标签的空元素(
标签定义换行)
在开始标签中添加斜杠,比如:
是关闭空元素的正确方法。
即使
在所有的浏览器中都是有效的,但使用
是更好的选择。
1.2.3HTML大小写
HTML标签对大小写不敏感,
等同于
,在实际的开发过程中,标签大写和小写都能够被浏览器正确的识别并解析。
W3School使用的是小写的标签,因为万维网联盟(W3C)作为HTML规范的指定者,推荐使用小写,而在未来的(xhtml)版本中必须使用小写。
1.2.4文件标签
A)html标签
整个文件都处于标签中
B)head标签
标签用于加载一些重要的咨询,它的内容不会被显示,只有标签中的内容才会在浏览器中显示。 C)title标签<body>
html是一门用来描述网页的语言!
</body>
常用属性: text:用于设定文字颜色 bgcolor:用于设定背景颜色 background:用于设定背景图片
<body text="red" background="1.jpg" bgcolor="blue">
html是一门用来描述网页的语言!
</body>
说明:bgcolor和background两者同时使用,background优先级高
关于html中颜色取值:
颜色由红色、绿色、蓝色混合而成(rgb)
有三种取值方式:
1、rgb(0,0,0) 值是在0-255之间。
2、#000000、#ff00dd、#0000ff、#ffffff
3、red、blue、green
1.2.5排版标签
A)注释
在html中注释是
注意:在浏览器中查看网页源代码时,能够看到html注释的内容
B)p标签
标签是段落标签,可以将html文件分隔为若干段落,浏览器会自动在段落前后添加空格。
标签常用属性:align:用于设定对齐方式,可选值:left、right、center默认是left
C)br标签
标签是换行标签,因为浏览器会自动的忽略空白与换行,因此
标签成为了浏览器中用来换行的。
D)hr标签
标签会生成一条水平线。 常用属性: align:设置水平线的对齐方式,可选值:left、right、center size:设置水平线厚度,以像素为单位,默认为2px width:设置水平线长度,可以是绝对值或相对值,默认为100% color:设置水平线的颜色,默认为黑色
关于html中数值单位
Html的数值默认单位为像素 px
在有些位置中可以使用百分比来设置
描述网页的语言!
<hr align="center" width="50%" color="blue"/>
<p align="center">段落一</p>
<p align="right">段落二</p>
</body>
1.2.6字体标签
A)font
标签用于规定文本的字体、大小、颜色
常用属性:
face:规定文本的字体
size规定文本的大小
color规定文本的颜色
张三李四王五赵六田七
B)
…
标题
Html中定义了6级标题,标签分别是:
、
、
、
、
、
标题最大
标题最小
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
1.2.7列表标签
a)ul
-
标签标示的是一个无序列表 常用属性: type规定列表的项目符号类型,可取值:disc、square、circle默认为disc
b)li
c)ol
-
标示的是一个有序列表 常用属性: type:这个属性规定列表中使用的标记类型,可取值: 1、A、a、罗马数字 start这个属性规定列表的起始数据
<ul type="circle">
<li>张三</li>
<li type="square">李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<ol type="a" start="a">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ol>
1.2.8图形标签
是一个图片标签,用于在页面上引入一个图片。
常用属性:
src:用于设定要引入图片的url
alt:用于设定图片的替代文字
width:用于设定图片的宽度
height:用于设定图片的高度
border:设定图片的边框厚度
align:用于设定图片和文字的对齐方式,可选值:top、bottom、middle
title:图片的标题
<img src="1.jpg" alt="这是一张图片" width="100px" hegith="100px" border="1px"
title=“html图片标签” align=“middle” />这是一张很不错的图片
1.2.9链接标签
标签用于定义超链接,用于从一个页面链接到另一个页面。常用属性:
href:用于设定链接指向的页面url
target:用于设定在何处打开页面,可选值: _blank、_self
name:用于设定锚的名称,例如:页面中的回到顶部
<a href="#top">回到顶部</a>
1.2.10表格标签
A)table标签
B)tr标签
标签用于定义表格的行,包含一个或多个th或td元素 常用属性: align:用于设定表格中行的内容对齐方式 bgcolor:用于设定表格中行的背景颜色C)td标签
标签用于定义表格单元(列) td标签中的文本一般显示为正常字体其左对齐 常用属性: align:用于设定单元格内容的对齐方式 bgcolor:用于设定单元格的背景颜色 height:用于设定单元格的高度 width:用于设定单元格的宽度 colspan:用于设定列合并 rowspane:用于设定行合并D)th标签
用于定义表格的表头(列标题),内部文本通常程序为剧中加粗文本E)caption
标签用于定义表格标题 标签必须紧随标签之后,一个表格只能有一个标题,通常这个标题会被居中于表格之上。F)thead
标签用于定义表格的页眉 标签用于组合html表格的表头内容 标签应用与和元素结合起来使用 注意:内部必须有标签G)tbody
标签用于定义表格的主体 标签用于组合HTML表格的主体内容H)tfoot
标签用于定义表格的页脚<head>
<title>html表格标签</title>
</head>
<body>
<h3>html表格标签</h3><hr/>
<table border="1px" align="center" width="100%">
<caption>html中的表格示例</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>住址</th>
<th>分数</th>
</tr>
<tr align="center">
<td>张三</td>
<td>22</td>
<td>男</td>
<td>北京</td>
<td>96.69</td>
</tr>
<tr align="center">
<td>李四</td>
<td>22</td>
<td>男</td>
<td>北京</td>
<td>96.69</td>
</tr>
<tr align="center">
<td>王五</td>
<td>22</td>
<td>男</td>
<td>北京</td>
<td>96.69</td>
</tr>
<tr align="center">
<td colspan="4" rowspan="2">
占五列
</td>
<td>
abc
</td>
</tr>
<tr align="center">
<td>
123456
</td>
</tr>
</table>
<h3>thead、tbody、tfoot标签</h3><hr/>
<table>
<thead>
<tr>
<td>aaaaaaaaaaaaaaaaa</td>
</tr>
</thead>
<tfoot>
<tr>
<td>4564645613213212313</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>bbbbbbbbbbbbbbbbbbbbb</td>
</tr>
</tbody>
</table>
</body>
表格练习:
1.3HTML表单标签
关于表单的标签,无论我们使用什么语言来完成web项目的开发,必然会使用到form表单,索引这是必须掌握的。
1.3.1form标签
标签代表一个表单,表单用于向服务器传送数据。 标签能够包含,可以是文本字段,复选框,单选框或者提交按钮等。 还可以包含,等 常用属性: name:用于定义表单的名称 action:用于规定提交表单时向何处发送表单数据 method:用于规定提交的方式,一般取值POST或GET1.3.2input标签
标签用于搜集用户信息
根据不同的type属性值,输入字段拥有很多中形式,输入字段可以是文本字段,复选框,密码框,单选按钮、按钮等。
关于标签type属性值的说明:
text
定义单行的输入字段,用户可以在其中输入文本、默认宽度为20个字段,其它常用属性:
name:定义标签的名称
value:定义标签的初始值
size:定义输入字段的长度
maxlength:定义输入最大字符的个数
password
定义密码框,其它常用属性:
name:定义标签的名称
value:定义标签的初始值
size:定义输入字段的长度
maxlength:定义输入最大字符的个数
radio
定义单选按钮,其它常用属性:
name:定义标签的名称,注意,对于单选按钮,如果要想做到单选的效果,多个radio的name值必须一样。
value:定义标签的值,或者说当发送表单数据到服务器时,单选按钮会把value属性的值发送到服务器端。
checked:定义该标签默认被选中
checkbox
定义复选框,其它常用属性:
name:定义标签名称,一组的checkbox它们的name值必须是一样的。
value:定义标签值,也就是要发送到服务器端的值
checked:定义默认被选中的复选框
button
定义一个可点击的按钮,普通按钮,其它常用属性:
name:定义标签名
value:定义按钮显示的内容
hidden
定义隐藏的输入字段,常用属性:
name:定义标签名
value:标签值
file
定义文件域,常用属性:
name:标签名称
submit
定义提交按钮,提交按钮会把表单的数据发送到服务器端。常用属性:
name:标签名
value:按钮显示的内容
reset
定义重置按钮,重置按钮会清除表单中的所有数据。常用属性:
name:定义标签名
value:按钮显示的内容
image
定义图片形式的提交按钮,这个标签主要用于替换submit按钮,因为默认产生的提交按钮并不美观,这个标签允许你采用指定的图片作为提交按钮。常用属性:
name:标签名
src:定义图片的url
alt:定义图片的替代文本
1.3.3select标签
标签用于定义一个下拉列表,常用属性:
name:定义标签名
size:定义下拉列表中可见选项的个数
multiple:定义是否可以选择多个选项
1.3.4textarea标签
标签用于定义一个多行文本框也就是文本域,常用属性:
name:标签名
cols:定义多行文本框可见宽度
rows:定义多行文本框的行数
wrap:规定多行文本框中的文字如何换行
1.4前端开发工具 WebStorm
前端开发工具,其实有很多,Eclipse,DW,WebStorm。。。
1.5HTML框架及特色字符
1.5.1其它标签和特殊字符
1.5.1.1其它标签
meta标签
link标签
标签定义文档与外部资源的关系 标签最长见的用途是引入CSS样式表 标签只能存放于标签之间,不过它可以出现任何次数 常用属性: type:定义被连接的文档的MIME类型 MIME类型是互联网中标准的数据类型,任何形式的内容都有标准的MIME类型.例如:网页的MIME类型:text/html 、image/jpg、image/jpeg、image/gif href:定义被链接的文档的URL rel:定义当前文档与被链接文档之间的关系 关于标签的详细用法,我们会在CSS中介绍。1.5.1.2特殊字符
空格
< < 小于号
> > 大于号
&req; ® 已注册的商标
© © 版权
学习网站: http://www.runoob.com
1.5.2框架标签
所谓框架就是将页面划分成几个窗框,就可以让我们在同一个浏览中显示不止一个页面。
是框架标签,它定义放置在每个框架中的页面。常用属性 Src:定义词框架要显示的页面url Name:定义词框架的名称 Frameborder:定义框架的边框,其值可以有0和1,0表示不显示边框,1表示显示边框 Framespacing定义框架与框架的间距 bordercolr:定义框架边框的颜色 Scrolling:定义是否显示卷轴(滚动条) yes表示显示 no表示不显示,AUTO自动 Noresize:定义框架大写不可以改变