java web应用开发（1）html
目录
从最简单的结构开始
一.头部标记
1.标题title标记
2.元信息标记meta
二、主体body
三、基本语法
1.单个标记
2.成对标记
3.属性
4.注释
5.书写规范
6.html文档类型
关于网页排版
一、初步设计
1.标题字标记
2.特殊符号
3.文本修饰标记
4.字体标记font（html5好像不支持
5.段落排版
二、列表
1.无序列表
2.有序列表
3.定义列表
三、超链接与浮动框架
1.超链接
2.超链接应用
3.浮动框架
四、图像与多媒体
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析
从最简单的结构开始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html><!DOCTYPE html>//声明版本
<html>//网页开始
<head>//网页头部
<meta charset="utf-8">//设置显示编码
<title>我的第一个网页</title>//设置标题
</head>
<body>//网页的可视区域
<h1>我的第一个标题</h1>//h1-h6标题标签
<p>我的第一个段落。</p>//段落标签，上下自带16px外边距
</body>
</html>
对于HTML文档都是，从<html>标记开始，</html>结束，每个文档中有且只有一对html,head,body元素。
一.头部标记
包括页面标题、元信息、样式、脚本、链接标记
一般不显示在网页上
1.标题title标记
<title>页面标题，显示在浏览器的标题栏</title>
2.元信息标记meta
不会显示在页面中
分类：
1.name属性和content属性
| 属性 | 值 | 说明 | 使用方法 |
| name | author | 定义网页作者 | meta name="author" content="信息参数"/> |
| description | 定义网页简短描述 | meta name="description" content="信息参数"/> | |
| keywords | 定义网页关键词 | meta name="keywords"content="信息参数”/> | |
| generator | 定义编辑器 | meta name="generator"content="信息参数”/> |
使用方法：
meta name="copyright" content="信息参数"/>
meta name="robots" content="信息参数"/>//告诉搜索引擎抓取哪些页面
| 值 | 文件是否被检索 | 链接是否被查询 |
| all | 是 | 是 |
| none | 否 | 否 |
| index | 是 | - |
| noindex | 否 | 是 |
| follow | - | 是 |
| nofllow | 是 | 否 |
2.http-equiv属性和content属性
| 属性 | 值 | 说明 | 使用方法 |
| http-equiv | content-type | 内容类型 | <meta http-equiv= "content-type" content="text/html; charset=信息参数" /> |
| expires | 网页缓存过期时间 | <meta http-equiv="expires" content="Fri 12 Jan 2001 18:18:18 GMT" /> | |
| refresh | 刷新与跳转(重定向)页面 | <meta http-equiv=" refresh" content="时间; url=网址参数"> | |
| set-cookie | 如果网页过期，那么存盘的cookie将被删除 | ||
| content | some_text | 定义与http-equiv或name属性相关的元信息 |
<meta http-equiv= "cache-control " content="no-cache">;//表示禁止从缓存中访问页面内容，且无法脱机浏览
二、主体body
<body></body>
1.标记属性
可以改变页面显示效果
| 属性 | 值 | 说明 |
| text |
rgb(r,g,b) rgb(r%,g%,b%) #rrggbb或#rgb colormame |
rgb函数(整数) ,r、g、 b取值范围为0~255。 rgb函数(百分比) ,r g、b的值范围为0~ 100十六进制数据(6 位或3位)，如#rrggbb 或#rgb, r、 g、b为十六进制数，取值范围: 0~9、 A~F。例如#3F0，可转换为#33FF00。 |
| bgcolor | 同上 | 规定文档的背景颜色。不赞成使用 |
| alink | 同上 | 规定文档中活动链接的颜色。不赞成使用 |
| link | 同上 | 规定文档中未访问链接的默认颜色。不赞成使用 |
| vlink | 同上 | 规定文档中已被访问链接的颜色。不赞成使用 |
| background | URL | 规定文档的背景图像。不赞成使用 |
| topmargin | pixel | 规定文档中上边距的大小 |
| leftmargin | pixel | 规定文档中左边距的大小 |
三、基本语法
1.单个标记
可以用/结尾
<br>或者<br/>换行
<hr>水平分隔线
<link>链接标记
2.成对标记
需要开始标记和结束标记，可嵌套，不交叉
<html>描述网页</html>
<body>可见页面内容</body>
<strong>重要文本，会被加粗体显示</strong>
3.属性
为标记添加属性，修改默认效果
<首标记（开始标记） 属性名="属性值"（可以不加“”） ...>
举例：<p align="center">该段落居中显示</p>//如果不写属性，则默认居左对齐
4.注释
<!--信息写在这，不会出现在浏览器-->
<comment>这是一个会显示到部分浏览器的注释方式</comment>
5.书写规范
不区分大小写，最好统一，<>对应，注意结尾，属性值最好加“”，不要有多余空格
6.html文档类型
</DOCTYPE> 其作用就是告诉浏览器使用哪种HTML版本来 显示网页。
代码：</DOCTYPE html>的意思是采用HTML5版本来显示网页
1、<!DOCTYPE>声明位于文档中最前面的位置，处于<html>标签之前
2、<!DOCTYPE>不是HTML标签
关于网页排版
一、初步设计
1.标题字标记
<h1 align="left/center/right/justify">1号标题文字</h1>
h后面的数字越小标题字越大。标题字标记的align属性用来定义标题字的对齐方式，
对齐方式有四种，分别是left、 center、 right、 justify。 但是一般推荐设计者使用CSS样式表来定义对齐方式。
2.特殊符号
| 代码 | 显示 | 含义 |
|---|---|---|
| < | < | 小于号 |
| > | > | 大于号 |
| & | & | 并且 |
| " | " | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
|   | 半方大的空白 | |
|   | 全方大的空白 | |
| |
不断行的空白（显示一个空格） |
3.文本修饰标记
b粗体i斜体u下划线del删除线sup上标sub下标strong着重粗体em加重语气斜体small字变小big字变大
4.字体标记font（html5好像不支持
语法:<font face="黑体，宋体" size="+7" color="#000fff"></font>
5.段落排版
<p></p>段落标记，是一个块级标记（不可以再包含其他块级标记）
<br>换行标记
<hr width="像素或百分比" size="整数单位px" color="rgb函数，十六进制，英文名" align="left/center/right">水平分割线
分别表示设置水平线宽度，设置水平线高度，设置水平线颜色喝设置水平线对齐方式
拼音注释音标ruby和rt标记
段落缩进blockquote标记
预格式化pre标记
二、列表
多种不同的列表可以互相嵌套，但是写的时候不可以交叉
1.无序列表
语法：
<ul type="">
<li type="">项目名称</li> //这个是列表项标记
</ul>
type就是设置前面的形状，可以单独设置也可以在ul处统一设置
有三种属性值，disc实心圆形，circle空心圆形，square实心正方形
2.有序列表
语法：
<ol type="" start="">
<li type="" value="n">项目名称</li>
</oi>
在ol中，type可以设置有序列表的序号形式，有五种类型
1 数字列表 A大写字母列表 a小写字母列表 I大写罗马字母列表 i小写罗马字母列表
start一般默认序号从1开始，但是如果不想从1开始，可以设置一下起始数字
在li中的如果单独改变type只影响这一行的类型，不过要是改变了value,后续的列表编号会随之改变
3.定义列表
格式:
<dl>
<dt>项目1</dt>
<dd>描述</dd>
...
<dt>项目2</dt>
...
</dl>
没有符号也没有序号，我也不知道这是啥
三、超链接与浮动框架
超链接就是能跳转（另一个网站啊，同一个网站的某个地方，甚至图片，文件啥的）的链接吧，浮动框架就是网页里头孤立的小窗（是弹窗广告吗？？）
1.超链接
格式：
<a href="url" name="" title="提示信息" target="窗口名称">超链接标题</a>
a超链接标记
href链接指向的目标文件
name规定锚的名称
title指向链接的提示信息
target指定打开的目标窗口
属性值：
_self 当前框架打开
_blank 在一个全新空白窗口打开
_top 在顶层框架打开
_parent 在当前框架的上一层打开
framename 在指定框架名称打开
超链接路径：
绝对路径：比如http网址，和盘符开始定义的文件路径
相对路径：相对于当前文件路径的位置，同一目录(index.html)或者上一个目录（../index.html）和下一个目录(web/note.html)
根路径：好像和绝对路径中的文件路径差不多，但是人家是相对路径，为啥捏？(一般不使用，服务器多的时候才使用）
在文件中分类，内部链接（是相对链接）和外部链接（是绝对链接）
2.超链接应用
1.下载文件
<a href="url">链接内容</a>
2.访问FTP站点
<a href="ftp://服务器ip地址或域名">链接的文字</a>
3.打开图像
<a href="URL><img src="" alt=""></a>
4.发送邮件的超链接
<a href="mailto:E-mail地址[ ?subject=邮件主题[&参数=参数值]]">链接内容</a>
部件地址必须完整，例如intel@qq.com。参数有cc (抄送)、bec (密送)、subject (主题) body。多个收件人用分号“;”分隔:多个参数用“&”连接，“&”与关键字之间不能留有空格:空格用“%20”替代。
5.页面书签
实现段落中任意跳转
定义书签：<a name="书签名">书签标题</a>
书签链接：<a href="#书签名">书签标题</a> //同一页面内
<a href="URL#书签名">书签标题</a> //不同页面间
3.浮动框架
<iframe 属性名称="value" name="iframename"></ iframe>
<a href="target.html" target="iframename " >链接标题</a>
iframe成对标记，必须插入到body不能插入到frameset标记
浮动框架属性以及其说明
src设置源文件属性
frameborder设置框架边框
name设置框架名称
scrolling设置框架滚动条
width设置浮动框架窗口宽度
marginwidth设置框架左右边距
height设置浮动框架窗口高度
marginheight设置框架上下边距
四、图像与多媒体
1.图像
插入图像：<img src="URL" alt="替代文本">
其他属性为可选属性
| 属性 | 属性值 | 描述 | ||||||||||
| src | URL | 图像的路径 | ||||||||||
| alt | 文本 | 图像不能显示时的替换文本 | ||||||||||
| title | 文本 | 鼠标悬停时显示的内容 | ||||||||||
| width | 像素 | 设置图像的宽度 | ||||||||||
| height | 像素 | 设置图像的高度 | ||||||||||
| border | 数字 | 设置图像边框的宽度 | ||||||||||
| vspace | 像素 | 设置图像顶部和底部的空白（垂直边距） | ||||||||||
| hspace | 像素 | 设置图像左侧和右侧的空白（水平边距） | ||||||||||
| align |
|
|
2.图像的替代文本
<img src="URL" alt="替代文本">
java web应用开发（1）html相关推荐
- java王者归来pdf_《JAVA WEB整合开发王者归来》刘京华.pdf
全书分为9篇,内容层次清晰,难度循序渐进.第1篇为入门篇,内容包括JavaWeb开发概述等:第2篇为基础篇,内容包括Servlet技术.JSP技术.会话跟踪.过滤器Filter.监听器Listener ...
- MyEclipse搭建java Web项目开发环境
MyEclipse搭建java Web项目开发环境 首先,在开始搭建MyEclipse的开发环境之前,还有三步工具的安装需要完成,只要在安装配置成功之后才可以进入下面的java Web项目开发环境的搭 ...
- 面试时，当你有权提问时，别客气，这是个逆转的好机会（内容摘自Java Web轻量级开发面试教程）...
前些天,我在博客园里写了篇文章,如何在面试中介绍自己的项目经验,收获了2千多个点击,这无疑鼓舞了我继续分享的热情,今天我来分享另外一个面试中的甚至可以帮助大家逆转的技巧,本文来是从 java web轻 ...
- Java Web 高性能开发,前端的高性能
Java Web 高性能开发,第 2 部分: 前端的高性能 Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是 ...
- canoe开发从入门到精通pdf_阿里技术官手写801页PDF《精通Java Web整合开发》
基础篇 第1~3章为基础篇,重点讲解基于开源架构Java EE应用开发的优势及其开发运行环境的安装配置,同时对JSP技术体系也进行了详细介绍. 基础篇的主要内容包括: Java Web应用开发技术选用 ...
- 根据实践经验，讲述些学习Java web能少走的弯路，内容摘自java web轻量级开发面试教程...
在和不少比较上进的初级程序员打交道的过程中,我们总结出了一些能帮到合格程序员尽快进阶的经验,从总体上来讲,多学.多实践不吃亏.本文来是从 java web轻量级开发面试教程从摘录的. 1 哪些知识点 ...
- java web轻量级开发面试教程内容精粹：哪些简历得不到面试机会
看到一本较好的实践性比较强的书,java web轻量级开发面试教程,里面的一些内容很有实践意义. 问题点 很难获得面试机会的原因 学历不符,比如要求是本科以上,但学历是大专 学历是硬指标,所以达不到学 ...
- java web应用开发_Java Web应用开发基础
模块1 Java Web应用开发概述 1.1 Web基础知识 1.1.1 Web应用及其开发 1.1.2 动态网页 1.1.3 B/S结构 1.1.4 JSP简介 1.2 创建第一个Web项目 1.2 ...
- java web开发myeclipse_【java项目实战】一步步教你使用MyEclipse搭建java Web项目开发环境（一）...
首先,在开始搭建MyEclipse的开发环境之前,还有三步工具的安装需要完成,只要在安装配置成功之后才可以进入下面的java Web项目开发环境的搭建. 1.安装工具 第一步,下载并安装JDK,到官网 ...
- java web 应用技术与案例教程_《Java Web应用开发技术与案例教程》怎么样_目录_pdf在线阅读 - 课课家教育...
出版说明 前言 第1章 java Web应用开发技术概述 1.1 Java Web应用开发技术简介 1.1.1 Java Web应用 1.1.2 Java Web应用开发技术 1.2 Java Web ...
最新文章
- Canvas 波形图
- JS校验身份证号码的有效性
- hexo在git上搭建个人博客
- DataTable方法 和 性能
- php7 ast,PHP7新特性之抽象语法树(AST)带来的变化详解
- Grunt上手指南(转)
- mysql 内存表 限制_MySQL内存表的弊端
- oracle awrdiff,测试AWR EXTRACTAWR Baseline
- 绿色到黄色到红色的颜色渐变
- 观测云产品更新｜新增阿里云账户结算方式；新增 DQL 查询查看器；新增基础设施网络模块等
- 差动变压器的振动测量实验 思考题
- 可视化GDP动态图表EXCEL也能搞定,如何用Excel做动态图表
- 洛谷P3373 线段树2（乘法加法lazytag）
- MBA都包括哪些课程？有哪些MBA专业书籍值得推荐？
- gms认证流程_申请谷歌GMS认证MADA协议流程
- 三菱fx2n64mr说明书_三菱基本单元 FX2N-64MR-001
- 多元线性回归分析示例
- 三角函数与反三角函数的拓展
- 淘宝客网站为什么会被腾讯拦截
- 推荐一个好用的拍照解题的软件?三款老牌拍照解题的软件在这里