一、HTML概述 二、web相关的概念 三、HTML的常用标签

一、HTML概述
###<1>概念
HTML:Hypertext Markup Language,超文本 标记语言,用来描述网页的一种语言。
非编程语言,由浏览器直接解释运行。

###<2>作用
编写网页,显示网页数据

###<3>特点
此语言编写的文件,以html或者htm为后缀。
由一组标签组成,不区分大小写。
XML:标签自定义,存储数据,传输数据
HTML:标签固定,每一个标签具有特定的含义,存储数据,传输数据

标签由开始和结束标签组成,开始标签<标签名> 表示,结束标签使用</标签名>表示


标准的HTML文件的结构:
<!DOCTYPE~> //代表HTML的版本,表明当前的HTML文件使用哪种版本的语法来进行编写
<HTML> //表示页面的开始

<HEAD>
//放置一些页面的设置参数
<TITLE>标题标签</TITLE>
</HEAD>

<BODY background="" bgcolor="">
//网页的主体部分,在浏览器上直接显示的内容
</BODY>

</HTML>

# 二、Web相关的概念
![](1.png)

URL:统一资源定位符,互联网上资源的地址。可以通过URL找到互联网上的某一个具体的资源。
可以标识一张图片,一部电影,或者一个HTML页面

HTTP协议:超文本传输协议,服务器端和客户端请求和应答的标准。

B/S结构:浏览器和服务器模式
统一了客户端,将功能的实现全部交给服务器去实现,简化了开发,维护的成本。

浏览器:解析和显示HTML文件的软件。
HTML文件解析(SAX,DOM)
HTTP请求数据包和响应数据包的封装和解析


# 三、HTML常用标签
###1.标签和属性
标签由开始和结束标签组成,开始标签<标签名> 表示,结束标签使用</标签名>表示
元素指的是包含标签在内整体,除去标签的部分叫做内容。
标签允许嵌套
属性在开始标签中指定,表示标签的性质和特征,通常表示为:属性名=“属性值” ,多个属性使用空格隔开

###2.颜色的指定方式
方式一:使用颜色的名称
方式二:使用十六进制指定,在#后面把RGB三原色的各个数值使用十六进制表示出来。
使用六位:#ffff00 ,黄色
使用三位:#ff0 ,黄色

###3.资源指定方式
在HTML中,使用URL来访问,指定资源

绝对路径:以http://资源路径,或者c://资源的路径
相对路径:以当前位置为标准,指定资源路径
./ 当前位置
../上一级目录位置
../../上一级的上一级目录位置

###4.<meta> 标签
<meta 属性 =“属性值” ...>
设置整个页面的属性
此标签在<head>标签内部使用

例如:
<meta charset="字符编码" /> 表示该HTML文件使用的字符编码
<meta name="keywords" content="五一小长假,春游小长假" />
<meta name="autor" content="作者姓名"/>

<meta http-equiv="refresh" content="秒数;url= "/> 页面倒转功能
content="秒数"
url="跳转的页面"

例如:<meta http-equiv="refresh" content="5;url=demo2.html"/>

###5.<body>标签
<body text="red" bgcolor="green" background="./htmlsrc/k11.jpg">
<!-- 给body指定字体颜色 -->
<!-- 给body指定背景颜色 -->
<!-- 给body指定背景图片 -->

###6. 文本类标签
区域标签:
<fieldset>
<legend>描述信息</legend>
内容
</fieldset>


标题标签:<h1> ...<h6>
<h1>定义最大标题
<h6>定义最小标题

段落标签:<p>段落</p>

保留数据源格式的标签:
<pre></pre>

设置文本格式:
<s></s> ,<del></del> 删除线
<b></b> 加粗
<sup></sup> 上标
<sub></sub> 下标
<u></u> 下划线
<i></i> 斜体
<br> 回车换行

<font 属性>文本</font> 文本标签,face="字体" size="字号" color="颜色"
<big></big>
<small></small>

特殊符号:
&nbsp; 空格
&lt; <
&gt; >
&quot; "
... ...

设置对齐方式:
属性的方式align = "对齐方式"

设置居中的标签:<center>数据</center> ,居中显示数据

超链接标签:<a href="">名称</a>
hreft属性:指定链接的url,位置

跳转到特定的位置:
<a name="位置标识" >
<a href="#位置名称" > 跳转到头部</a>

跳转到其他页面:
<a href="url位置" ></a>
绝对路径:http://www.baidu.com:80/ -----百度服务器----默认的项目------index.html
相对路径:./demo1.html

图片标签:<img/> 显示图片
属性:src="url位置"
width="宽度"
height="高度"
alt="替代文件"
border="边框"
align="对齐方式"

<img src="" alt="加载失败" width="300" height="500"/>

列表标签:<ol> <ul> <li>

<ol>
<li></li>
<li></li>
<li></li>
</ol>

<ul>
<li></li>
<li></li>
<li></li>
</ul>

###7.结构类
表格标签:<table > <tr> <td>
<table border="边框"></table> :整个表格
<tr></tr> :单独一行
<th></th> :单独一行,标题使用
<td>数据</td> :一列

属性:border,设置表格的边框
background,设置背景图片
bgcolor,设置背景颜色

cellspacing,设置单元格之间的距离
cellpadding,设置单元格内部的数据和边框的距离

rowspan,垂直方向合并单元格
colspan,水平方向合并单元格

align ,行的对齐方式
valign,列的对齐方式

<thead></thead>:表头部分
<tbody></tdody>:主体部分,可以有多个
<tfoot></foot>:标底部分

分区标签:<div> <span> 分区

区块标签:<div></div>
<h1> <p> <table> <tr>

内联标签:<span>
<a> <img> <td>

###8.框架类
<frameset rows="" cols="">
<frame src="left.html"></frame>
<frame name="right"></frame>
</frameset>

![](2.png)

###9.表单类(将表单中的数据发送给服务器的)
<form action="服务器的url" method="传输的方式"> 数据</form>
URL:用来接收和处理表单数据的组件,Servlet
method:get、post

制作不同功能的按钮:<input type="按钮的类型" value="按钮上显示的名称" name="名字">
<input type="button" value="按钮上显示的名称" name="名字"> 一个普通按钮
<input type="submit" value="按钮上显示的名称" name="名字"> 一个提交按钮
<input type="reset" value="按钮上显示的名称" name="名字"> 一个重置按钮
<input type="image" value="按钮上显示的名称" name="名字" url=""> 一个图片按钮

制作文本框:
<input type="text" value="输入框中默认的数据" size="宽度" maxlength="字符的最大输入数量" name="标识输入框">
<input type="password" value="输入框中默认的数据" size="宽度" maxlength="字符的最大输入数量" name="标识输入框">

<textarea name="标识输入框" rows="行数" cols="列数" >

制作单选和多选按钮:
男 <input type="radio" name="标识" value="男">

<input type="checkbox" value="男" name="标识">


制作菜单:
<select name="标识">
<option>内容1</option>
<option>内容2</option>
<option selected>内容3</option>
</select>

猜你喜欢

转载自www.cnblogs.com/sumboy/p/9058633.html