一、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相关的概念
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>
特殊符号：
空格
< <
> >
" "
... ...
设置对齐方式：
属性的方式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>
###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的常用标签的更多相关文章
- html5--1.3 元素的概念与3个常用标签
html5--1.3 元素的概念与3个常用标签 学习要点 1.元素的概念 2.3个常用的标签 HTML 元素指的是从开始标签到结束标签的所有代码. 开始标签 元素内容 结束标签 <h1> ...
- 一、JavaScript概述 二、JavaScript的语法 三、JavaScript的内置对象
一.JavaScript的概述###<1>JavaScript的概念 又称ECMAScript,和java没有任何关系 嵌入在HTML元素中的 被浏览器解释运行的 一种脚本语言. ###& ...
- 一、Linux概述 二、Linux的安装 三、Linux的常用命令（重点）
一.Linux概述###<1>操作系统 OS,管理和控制 计算机的 硬件和软件资源的 计算机程序. 最基本的系统软件. 是用户和计算机交互的桥梁,是硬件和软件交互的桥梁. 操作系统:she ...
- Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...
- Spring Framework------>version4.3.5.RELAESE----->Reference Documentation学习心得----->Spring Framework中web相关的知识（概述）
Spring Framework中web相关的知识 1.概述: 参考资料:官网documentation中第22小节内容 关于spring web mvc: spring framework中拥有自 ...
- linux设备驱动归纳总结（二）：模块的相关基础概念【转】
本文转载自:http://blog.chinaunix.net/uid-25014876-id-59415.html linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10 ...
- 【Linux开发】linux设备驱动归纳总结（二）：模块的相关基础概念
linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10.04 开发平台:S3C2440开发板 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- 二 web爬虫，scrapy模块以及相关依赖模块安装
当前环境python3.5 ,windows10系统 Linux系统安装 在线安装,会自动安装scrapy模块以及相关依赖模块 pip install Scrapy 手动源码安装,比较麻烦要自己手动安 ...
- Direct3D11学习：（二）基本绘图概念和基本类型
转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 在正式开始学习D3D11之前,我们必需首先学习必要的基础知识. 在这篇文章中,我们将介绍一下Direct3D ...
随机推荐
- 未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序的解决方法
在win7 操作系统中SQL2008导入excel2007 出现: 未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序 的解决方法: 出现这个原因是office 2007 ...
- 使用Python制作一个简单的刷博器
呵呵,不得不佩服Python的强大,寥寥几句代码就能做一个简单的刷博器. import webbrowser as web import time import os count=0 while co ...
- Node.js学习笔记(七) --- Node.js的静态文件托管、路 由、EJS 模板引擎、GET 、POST
1 . Nodejs 静态文件托管静态 web 服务器封装 2 . 路由 官方解释: 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET.POST 等)组成的, ...
- SqlSerVer 列与逗号分隔字符串 互相转换
在项目中,使用SQLServer数据库,有一个需求,需要将数据库的某一列,转换成逗号分隔的字符串.同时,需要将处理完的字符串,转换成为一列. 经过查阅资料与学习,通过以下方式可以实现如上所述需求: 1 ...
- 去把bilibili的返回顶点锚点扒了下来
今天闲来无事看着刷着bilibili对那锚点标记觊觎已久,下决心将其收为己用,遂动手. 个人主推Firefox+firebug查看网页代码.我用的是夜壶(nightly),就火狐的每日更新版(建议不用 ...
- SpringBoot(三) Core Features: External Configuration(配置文件)
码云: external-configuration 可以使用属性文件,YAML文件,环境变量和命令行参数来外部化配置 一.属性值可以直接注入到bean 系统属性值不可以 // application ...
- ASP.NET MVC传递Model到视图的多种方式总结（一）__通用方式的使用
有多种方式可以将数据传递到视图,如下所示: ViewData ViewBag PartialView TempData ViewModel Tuple 场景: 在视图页面,下拉框选择课程触发事件,分别 ...
- BZOJ4337: BJOI2015 树的同构(hash 树同构)
题意 题目链接 Sol 树的同构问题,直接拿hash判一下,具体流程大概是这样的: 首先转化为有根树,预处理出第\(i\)棵树以\(j\)为根时的hash值. 那么两个树同构当且仅当把两棵树的hash ...
- Difference between 'SAME' and 'VALID' padding
Difference between 'SAME' and 'VALID' padding 'SAME' padding 和 'VALID' padding 的区别 If you like ascii ...
- How to Grid Search Hyperparameters for Deep Learning Models in Python With Keras
Hyperparameter optimization is a big part of deep learning. The reason is that neural networks are n ...