Java学习：来认识一下HTML中的标签~

么现在咱们

就进入JavaE部分了~

HTML、CSS和JS又被称为“前端三剑客”~虽然Java主要是做后台服务端开发的，但是毕竟是要和前端合作,的多少要了解一下~~总之技多不压身~多学一点东西总归是好的~嗯~咱们开始今天的内容吧~

HTML

什么是HTML？

HTML 全称是 Hyper Text Markup Language:超文本标记语言。超文本意味着功能比普通文本更加强大。标记语言则是：使用一组标签对内容进行描述的一门语言(注意：它不是编程语言)

HTML的语法和规范

1）HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。

2）HTML文件分为头部分(<head></head>)和体部分(<body></body>)

3）HTML标签一般是由开始标签和结束标签组成。

（大部分是成对存在的，有个别标签是单着的~）

4）HTML标签不区分大小写，建议使用小写。

HTML相关标签学习

接下来就是重头戏了，来一起看看HTML标签都有什么~

标题标签<hn > </hn>

n的取值从1到6逐渐变小，独占一行加粗加黑显示，与其他行有一定的行间距

水平线标签 <hr />

里面有一些属性象颜色（color）、大小（size）等等就不详细介绍了，伙伴们自己去摸索一下哈~

段落标签<p></p>

字体标签<font></font>

换行标签<br/>

其中有些属性：

size:指定内容的大小

color：指定内容的颜色

face：指定内容的字体

加粗：<b></b>

斜体：<i></i>

下划线：<u></u>

图片标签

<img />

src:指的是图片显示的路径(位置)

width:指定图片的宽度，取值可以是像素值，也可以是百分比

height：指定图片的高度，取值可以是像素值，也可以是百分比

alt：当图片无法正常显示的时候给出的提示信息(该属性的显示效果与浏览器以及浏览器版本有关)

路径分为两种：

绝对路径：

从盘符开始的到图片位置的完整描述：

类似~C:\Program Files\Img.jpg

相对路径：

①同一级：直接写文件名称或者./文件名称

②上一级：../文件名称

③下一级：写上目录名称/文件名称

列表标签

有序列表：

type：可以选择数字、字母及阿拉伯数字作为前面的序号，

start： 从哪里开始计数

reversed： 表示颠倒顺序

无序列表：

type：可以选择前面的样式实心圆、空心圆和方块

超链接标签

href:指定跳转的位置

target：指定跳转页面显示的位置(取值：_self 、_blank)

表格标签

border：边框的宽度

width：表格的宽

height：表格的高

align：元素的位置居中、上、下、左、右

bgcolor：背景色

cellpadding：边框与边框间的距离

cellspacing：表格内容到边框的距离

跨行跨列操作

跨行：rowspan

跨列：colspan

今天先说这么多了

剩下的小伙伴们自己摸索吧~

拜拜~

我是萌新娜娜

立志做一个不翻车的老司机

学习Java的路上请多多指教

大家如果想要更深入了解java相关知识，私信我回复：【Java】即可知道你们想要知道的java相关问题

我们在浏览网页的时候，看到喜欢的网页，总想研究下它的代码是怎样写的，值得借鉴参考来修改自己的网站源码。你知道如何查看网页源代码吗？

网页源代码是什么？

网站源码，也称源代码，源程序，是指未编译的文本代码或一个网站的全部源码文件，是一系列人类可读的计算机语言指令。通过浏览器或服务器翻译后才是用户最终看到的效果。

网站源码可分为两种，一种是动态源码，如ASP，PHP，JSP，.NET等，另一种是静态源码如HTML等。网页源代码是指网页的html代码，这里可以将CSS代码也称为CSS源代码。

如何查看网站源代码？

今天飞飞主要和你们分享三种方法查看网页源代码，希望可以帮助到你们！

1、鼠标查看源代码

任意打开一个网页，鼠标右击会看到“查看网页源代码”，这个网页的源代码就出现在你眼前了。

网页源代码查看竟然有这么多方法！你都知道吗？

2、快捷键Ctrl+U查看源码

为了方便快捷，小伙伴们可以使用快捷键Ctrl+U来查看源码，同样可以实现。

补充：

想要看一个页面的局部样式，可以鼠标右键，点击审查元素。还可以用快捷键F12或者快捷键Ctrl+Shift+I调用或者关闭开发者工具，以此来查看源代码。

3、网页地址栏前面加上入view-source:

也可以在你想要查看的网页地址栏前面加上入view-source:

比如：view-source:https://www.idc02.com/就可以查看驰网官网源代码文件。

感谢您的阅读，加个关注不迷路~

、垂直对齐

如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：

.verticalcenter{
 position: relative;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
}

2、伸展一个元素到窗口高度

在具体场景中，你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度，我们需要伸展顶层元素：html和body:

html,
body {
 height: 100%;
}

然后将100%应用到任何元素的高：

div { height: 100%;}

3、基于文件格式使用不同的样式

为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标，对不同的资源使用不同的图标或图片：

a[href^="http://"]{
 padding-right: 20px;
 background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
 padding-right: 20px;
 background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
 padding-right: 20px;
 background: url(pdf.png) no-repeat center right;
}

4、创建跨浏览器的图像灰度

灰度有时看起来简约和优雅，能为网站呈现更深层次的色调。在示例中，我们将对一个SVG图像添加灰度过滤：

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
 <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter></svg>

为了跨浏览器，会用到filter属性：

img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
 filter: gray; /* IE6-9 */
 -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */}

5、背景渐变动画

CSS中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。

button {
 background-image: linear-gradient(#5187c4, #1c2f45);
 background-size: auto 200%;
 background-position: 0 100%;
 transition: background-position 0.5s;
} 
button:hover {
 background-position: 0 0;
}

6、CSS：表格列宽自适用

对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给td元素添加 white-space: nowrap;能让文本正确的换行

td { white-space: nowrap;}

213126486编号：悟空

7、只在一边或两边显示盒子阴影

如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位:after伪类。实现底边阴影的代码如下：

.box-shadow {
 background-color: #FF8020;
 width: 160px;
 height: 90px;
 margin-top: -45px;
 margin-left: -80px;
 position: absolute;
 top: 50%;
 left: 50%;
}
.box-shadow:after {
 content: "";
 width: 150px;
 height: 1px;
 margin-top: 88px;
 margin-left: -75px;
 display: block;
 position: absolute;
 left: 50%;
 z-index: -1;
 -webkit-box-shadow: 0px 0px 8px 2px #000000;
 -moz-box-shadow: 0px 0px 8px 2px #000000;
 box-shadow: 0px 0px 8px 2px #000000;
}

8、包裹长文本

如果你碰到一个比自身容器长的文本，这个技巧对你很有用。在这个示例中，默认时，不管容器的宽度，文本都将水平填充。

简单的CSS代码就能在容器中调整文本：

pre { white-space: pre-line; word-wrap: break-word;}

9、制造模糊文本

想要让文本模糊？可以使用color透明和text-shadow实现。

.blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}

10、用CSS动画实现省略号动画

这个片段将帮助你制造一个ellipsis的动画，对于简单的加载状态是很有用的，而不用去使用gif图像。

.loading:after {
 overflow: hidden;
 display: inline-block;
 vertical-align: bottom;
 animation: ellipsis 2s infinite;
 content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
 from {
 width: 2px;
 }
 to {
 width: 15px;
 }
}

11、样式重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 outline: none;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

12、典型的CSS清除浮动

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

13、新版清除浮动（2011）

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

14、跨浏览器的透明

.transparent { filter: alpha(opacity=50); /* internet explorer */
 -khtml-opacity: 0.5; /* khtml, old safari */
 -moz-opacity: 0.5; /* mozilla, netscape */
 opacity: 0.5; /* fx, safari, opera */}

15、CSS引用模板

blockquote {
 background: #f9f9f9;
 border-left: 10px solid #ccc;
 margin: 1.5em 10px;
 padding: .5em 10px;
 quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
 color: #ccc;
 content: open-quote;
 font-size: 4em;
 line-height: .1em;
 margin-right: .25em;
 vertical-align: -.4em;
}
blockquote p {
 display: inline;
}

16、个性圆角

#container {
 -webkit-border-radius: 4px 3px 6px 10px;
 -moz-border-radius: 4px 3px 6px 10px;
 -o-border-radius: 4px 3px 6px 10px;
 border-radius: 4px 3px 6px 10px;
}
/* alternative syntax broken into each line */
#container {
 -webkit-border-top-left-radius: 4px;
 -webkit-border-top-right-radius: 3px;
 -webkit-border-bottom-right-radius: 6px;
 -webkit-border-bottom-left-radius: 10px;
 -moz-border-radius-topleft: 4px;
 -moz-border-radius-topright: 3px;
 -moz-border-radius-bottomright: 6px;
 -moz-border-radius-bottomleft: 10px;
}

17、自定义文本选择

::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }

18、为logo隐藏H1

h1 {
 text-indent: -9999px;
 margin: 0 auto;
 width: 320px;
 height: 85px;
 background: transparent url("images/logo.png") no-repeat scroll;
}

19、图片边框偏光

img.polaroid {
 background:#000; /*Change this to a background image or remove*/
 border:solid #fff;
 border-width:6px 6px 20px 6px;
 box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
 -webkit-box-shadow:1px 1px 5px #333;
 -moz-box-shadow:1px 1px 5px #333;
 height:200px; /*Set to height of your image or desired div*/
 width:200px; /*Set to width of your image or desired div*/
}

20、锚链接伪类

在线咨询

上一篇：HTML Unicode（UTF-8）参考手册
下一篇：我用HTML5工具，做了一个支付宝9.9版的原型

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Java学习：来认识一下HTML中的标签~

您的项目需求