一、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>

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

  1. html5--1.3 元素的概念与3个常用标签

    html5--1.3 元素的概念与3个常用标签 学习要点 1.元素的概念 2.3个常用的标签 HTML 元素指的是从开始标签到结束标签的所有代码. 开始标签 元素内容 结束标签 <h1> ...

  2. 一、JavaScript概述 二、JavaScript的语法 三、JavaScript的内置对象

    一.JavaScript的概述###<1>JavaScript的概念 又称ECMAScript,和java没有任何关系 嵌入在HTML元素中的 被浏览器解释运行的 一种脚本语言. ###& ...

  3. 一、Linux概述 二、Linux的安装 三、Linux的常用命令(重点)

    一.Linux概述###<1>操作系统 OS,管理和控制 计算机的 硬件和软件资源的 计算机程序. 最基本的系统软件. 是用户和计算机交互的桥梁,是硬件和软件交互的桥梁. 操作系统:she ...

  4. Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...

  5. Spring Framework------>version4.3.5.RELAESE----->Reference Documentation学习心得----->Spring Framework中web相关的知识(概述)

    Spring Framework中web相关的知识 1.概述: 参考资料:官网documentation中第22小节内容 关于spring web mvc:  spring framework中拥有自 ...

  6. linux设备驱动归纳总结(二):模块的相关基础概念【转】

    本文转载自:http://blog.chinaunix.net/uid-25014876-id-59415.html linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10 ...

  7. 【Linux开发】linux设备驱动归纳总结(二):模块的相关基础概念

    linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10.04 开发平台:S3C2440开发板 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...

  8. 二 web爬虫,scrapy模块以及相关依赖模块安装

    当前环境python3.5 ,windows10系统 Linux系统安装 在线安装,会自动安装scrapy模块以及相关依赖模块 pip install Scrapy 手动源码安装,比较麻烦要自己手动安 ...

  9. Direct3D11学习:(二)基本绘图概念和基本类型

    转载请注明出处:http://www.cnblogs.com/Ray1024   一.概述 在正式开始学习D3D11之前,我们必需首先学习必要的基础知识. 在这篇文章中,我们将介绍一下Direct3D ...

随机推荐

  1. rails 国际化、validate校验、flash提示

      1.Rails的国际化 根据特定的locale信息,提取相应的内容 通过config/environment.rb,指定应用的转换文件 config.i18n.load_path +=Dir[Ra ...

  2. java 拦截器、过滤器、监听器

    一.理解Struts2拦截器 1. Struts2拦截器是在访问某个Action或Action的某个方法,字段之前或之后实施拦截,并且Struts2拦截器是可插拔的,拦截器是AOP的一种实现. 2. ...

  3. 009.在C#.NET中使用Froms验证

    原文:https://support.microsoft.com/en-us/kb/301240 (Aty表示本人) 这篇文章演示如何通过数据库,实现Froms验证 必需 Mircosoft Visu ...

  4. Recommend ways to overwrite hashCode() in java

    Perface In the former chapter, I talk about topics about hashCode, And I will continue to finish the ...

  5. DDD Quickly - 读书笔记

    读后感:关于领域驱动设计,过去多多少少用到一些.所以,这本精简版看起来很快,很多概念很熟悉,它帮助我把散乱的知识串起来.最后,Eric Evans谈到一点,本来软件的发展是向着处理复杂的业务逻辑走的, ...

  6. .NET4.5新特性async和await修饰符实现异步编程

    开篇 每一个版本的.net都会引入一些新的特性,这些特性方便开发人员能够快速实现一些功能.虽然.net版本一直在更新,但是新版本对旧版本的程序都是兼容的,在这一点上微软做的还是非常好的.每次学一个新内 ...

  7. request获取当前用户

    1.request.getRemoteUser();//获取当前缓存的用户,比如Spring Security做权限控制后就会将用户登录名缓存到这里 request.getRemoteAddr();/ ...

  8. 菜鸟的HTML学习之路

    开发网站流程 确定风格.功能(论坛.留言板.支付.用户登录等). 美工制作网页效果图(首页.列表页.内容页). 制作人员切图排版,排成网页形式. 后台程序开始写程序. 前台与后台结合. HTML注释 ...

  9. css固定广告栏

    <div style="position: fixed; left: 50%; top: 100px; margin-left: -621px;"> <div&g ...

  10. 一步一步pwn路由器之uClibc中malloc&&free分析

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 栈溢出告一段落.本文介绍下 uClibc 中的 malloc 和 ...