html评价(html评价页面)
华为云服务器特价优惠火热进行中! 2核2G2兆仅需 38 元;4核4G3兆仅需 79 元。购买时间越长越优惠!更多配置及优惠价格请咨询客服。
合作流程: |
本篇文章给大家谈谈html评价,以及html评价页面对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
微信号:cloud7591如需了解更多,欢迎添加客服微信咨询。
复制微信号
本文目录一览:
html是什么意思?
什么叫HTML
HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面.哈哈.
也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面;你所需要的只是一个文字处理器(如McrosoftWord\记事本\写字板等等)以及HTML的工作常识。其实你很快就会发现,基础的HTML语言简直容易死了。
HTML只不过是组合成一个文本文件的一系列标签。它们很乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂.
HTML标签通常是英文词汇的全称(如块引用:blockquote)或缩略语(如“p”代表Paragragh),但它们的与一般文本有区别,因为它们放在单书名号里。故Paragragh标签是p,块引用标签是blockquote。有些标签说明页面如何被格式化(例如,p开始一个新段落),其他则说明这些词如何显示(b使文字变粗)还有一些其他标签提供在页面上不显示的信息--例如标题。
关于标签,需要记住的是,它们是成双出现的。每当使用一个标签--如blockquote,则必须以另一个标签/blockquote将它关闭。注意“blockquote”前的斜杠,那就是关闭标签与打开标签的区别。
基本HTML页面以html标签开始,以/html结束。在它们之间,整个页面有两部分--标题和正文。
标题词--夹在head和/head标签之间--这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在body和/body之间--即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。
那么让我们建立一个简单的范例吧,非常容易的。第一步,当然是要建立一个新的文本文件(记住,如果你在使用比较复杂的文字处理器,就应该用“纯文本”或“普通文本”来保存),将它命名为“xxxx.html”。(随便你起一个什么名字,但记住,要用英文)
然后你可以用浏览器将它打开,你会看见最简单的自己做的页面。
.html/html
2.head/head
3.body/body
4.title/title
Html是英文 HyperText Markup Language 的缩写,中文意思是“超文本标志语言”,用它编写的文件(文档)的扩展名是.html或.htm,它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件,既简单又方便,它通常使用标志名/标志名来表示标志的开始和结束(例如html/html标志对),因此在Html文档中这样的标志对都必须是成对使用的。在此教程中,我先讲一下Html的基本标志:
1.html/html
html标志用于Html文档的最前边,用来标识Html文档的开始。而/html标志恰恰相反,它放在Html文档的最后边,用来标识Html文档的结束,两个标志必须一块使用。
2.head/head
head和/head构成Html文档的开头部分,在此标志对之间可以使用title/title、script/script等等标志对,这些标志对都是描述Html文档相关信息的标志对,head/head标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。
3.body/body
body/body是Html文档的主体部分,在此标志对之间可包含p、/p、h1、/h1、br、hr等等众多的标志,它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。body标志中还可以有以下属性:属性
用途
示例
body bgcolor="#rrggbb" 设置背景颜色。 body bgcolor="red"红色背景
body text="#rrggbb" 设置文本颜色。 body text="#0000ff"蓝色文本
body link="#rrggbb" 设置链接颜色。 body link="blue"链接为蓝色
body vlink="#rrggbb" 设置已使用的链接的颜色。 body vlink="#ff0000"
body alink="#rrggbb" 设置正在被击中的链接的颜色。 body alink="yellow"
说明:以上各个属性可以结合使用,如body bgcolor="red" text="#0000ff"。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色,如#ff0000对应的是红色。此外,还可以使用Html语言所给定的常量名来表示颜色:Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal,如body text="Blue"表示body/body标志对中的文本使用蓝色显示在浏览器的框内。
4.title/title
使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息,那些信息一般是网页的“主题”,要将您的网页的主题显示到浏览器的顶部其实很简单,只要在title/title标志对之间加入您要显示的文本即可。注意:title/title标志对只能放在head/head标志对之间。
下面是一个综合的例子,仔细阅读,您便可以了解以上各个标志对在一个Html文档中的布局或所使用的位置。
例1 Html文档中基本标志的使用
html
head
title显示在浏览器最上边蓝色条中的文本/title
/head
body bgcolor="red" text="blue"
p红色背景、蓝色文本/p
/body
/html
1.p/p
2.br
3.blockquote/blockquote
4.dl/dldt/dtdd/dd
5.ol/olul/ulli/li
6.div/div
上一个教程中我们讲了Html文档的基本标志,但我们还不知道怎样在浏览器中显示文本之类的东西,这正是我们在教程二中将要谈到的。在学习之前,必须强调一下,我们这个教程中所讲的格式标志统统都是用于body/body标志对之间的。
1.p/p
p/p标志对是用来创建一个段落,在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外,p标志还可以使用align属性,它用来说明对齐方式,语法是:p align=""/p。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。如p align="Center"/p表示标志对中的文本使用居中的对齐方式。
2.br
br是一个很简单的标志,它没有结束标志,因为它用来创建一个回车换行,这么一说我想您该会使用了吧。在br的使用上还有一定的技巧,如果您把br加在p/p标志对的外边,将创建一个大的回车换行,即br前边和后边的文本的行与行之间的距离比较大,若放在p/p的里边则br前边和后边的文本的行与行之间的距离将比较小,您不妨试试看。
3.blockquote/blockquote
在blockquote/blockquote标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。
4.dl/dldt/dtdd/dd
dl/dl用来创建一个普通的列表,dt/dt用来创建列表中的上层项目,dd/dd用来创建列表中最下层项目,dt/dt和dd/dd都必须放在dl/dl标志对之间。看一下下边的例子您就会明白了:
例2 创建一个普通列表
html
head
title一个普通列表/title
/head
body text="blue"
dl
dt中国城市/dt
dd北京 /dd
dd上海 /dd
dd广州 /dd
dt美国城市/dt
dd华盛顿 /dd
dd芝加哥 /dd
dd纽约 /dd
/dl
/body
/html
此例在浏览器中的显示如下:
中国城市
北京
上海
广州
美国城市
华盛顿
芝加哥
纽约
5.ol/olul/ulli/li
ol/ol标志对用来创建一个标有数字的列表;ul/ul标志对用来创建一个标有圆点的列表;li/li标志对只能在ol/ol或ul/ul标志对之间使用,此标志对用来创建一个列表项,若li/li放在ol/ol之间则每个列表项加上一个数字,若在ul/ul之间则每个列表项加上一个圆点。请看下边的例子:
例3 标有数字或圆点的列表
html
head
title/title
/head
body text="blue"
ol
p中国城市 /p
li北京 /li
li上海 /li
li广州 /li
/ol
ul
p美国城市 /p
li华盛顿 /li
li芝加哥 /li
li纽约 /li
/ul
/body
/html
此例在浏览器中的显示如下:
中国城市
北京
上海
广州
美国城市
华盛顿
芝加哥
纽约
6.div/div
div/div标志对用来排版大块Html段落,也用于格式化表,此标志对的用法与p/p标志对非常相似,同样有align对齐方式属性,读者可以自己试试看。

在html上用 jquery 怎么做评论星星
html部分:
table class="block"
tr
td
span class="label"总体评价em*/em:/span
/td
td
div class="rating-wrap"
ul class="rating-wrap-ul" onmouseout="onUlMouseOut()" onmouseover="onUlMouseOver()"
lia class="one-star" title="很差" data-hint="很差" href="javascript:clickStar(1);" onmouseover="onLiMouseOver(1)" onmouseout="onLiMouseOut()"/a/li
lia class="two-stars" title="差" data-hint="差" href="javascript:clickStar(2);" onmouseover="onLiMouseOver(2)" onmouseout="onLiMouseOut()"/a/li
lia class="three-stars" title="还行" data-hint="还行" href="javascript:clickStar(3);" onmouseover="onLiMouseOver(3)" onmouseout="onLiMouseOut()"/a/li
lia class="four-stars" title="好" data-hint="好" href="javascript:clickStar(4);" onmouseover="onLiMouseOver(4)" onmouseout="onLiMouseOut()"/a/li
lia class="five-stars" title="很好" data-hint="很好" href="javascript:clickStar(5);" onmouseover="onLiMouseOver(5)" onmouseout="onLiMouseOut()"/a/li
/ul
/div
span id="ratingText" class="active-hint" innerText=""/span
/td
/tr
tr
td
span class="label"评价em*/em:/span
/td
td
span class="note"(50-2000个字)/span
span id="textCount" class="note" innerText=""/span
/td
/tr
tr
td
/td
td
textarea name="appraiseText" id="appraiseText" class="form-content-block form-textarea" rows="12"/textarea
/td
/tr
tr
td
/td
td align="right"
input type="button" value="提交" onclick="submitAppraise()"
input type="button" value="关闭" onclick=" "
/td
/tr
/table
CSS:
body {
color: #333;
font: normal normal normal 12px/1.5 Arial, 宋体, sans-serif;
}
.block{
clear: both;
margin-bottom:20px;
margin-bottom: 10px;
zoom: 1;
padding:5px 11px;border:1px solid #F5EEE8;
padding-top:10px;margin:0 10px 0;
padding-bottom:20px;border-bottom:1px dashed #E4E4E4;
margin:10px auto;padding:0;border:none;
}
.label{
float:right;
margin-right: 10px;
text-align: right;
font-weight: normal;
font-style:normal;
width: 94px;
}
em{
margin-right:5px;
color:#c00;
font-weight:bold;
font-style:normal;
margin-left:2px;
}
.note {
color: #999;
}
.form-textarea{
float: left;
font-family: Tahoma, Geneva, sans-serif;
margin-right: 5px;
width: 598px;
zoom: 1;
font-family: inherit;
font-size: 100%;
-webkit-appearance: textarea;
-webkit-box-orient: vertical;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
background-color: white;
border: 1px solid;
cursor: auto;
padding: 2px;
resize: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
.rating-wrap {
display: inline-block;
float: left;
position: relative;
top: -2px;
width: 89px;
height: 20px;
margin-right: 5px;
padding: 4px 0 0 5px;
border: 1px solid #EFE0D7;
background: #FFF9F1;
z-index: 0;
}
.rating-wrap ul,.rating-wrap a:hover {
background-image: url(../images/star_shade.png);
background-repeat: no-repeat;
}
.rating-wrap ul {
-webkit-padding-start: 40px;
display: block;
list-style-type: disc;
margin: 1em 0px;
border: 0px;
margin: 0px;
outline: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 85px;
height: 16px;
background-position: 0 -90px;
z-index: 10;
}
.rating-wrap li {
display: inline;
}
.rating-wrap a {
zoom: 1;
position: absolute;
left: 0;
top: 0;
display: block;
height: 16px;
}
.rating-wrap .five-stars {
width: 84px;
z-index: 10;
background-position: 0 0px;
}
.rating-wrap .four-stars {
width: 68px;
z-index: 20;
background-position: 0 -18px;
}
.rating-wrap .three-stars {
width: 51px;
z-index: 30;
background-position: 0 -36px;
}
.rating-wrap .two-stars {
width: 34px;
z-index: 40;
background-position: 0 -54px;
}
.rating-wrap .one-star {
width: 17px;
z-index: 50;
background-position: 0 -72px;
}
.active-hint{
color: #C00;
float: left;
padding-top:2px;
font-weight: normal;
font-style:normal;
}
JS:
$(document).ready(function(){
$("#appraiseText").bind("keydown", function(){
var count = $("#appraiseText").val().length;
if( count = 200 ){
$("#textCount").html(" 还能输入font color='green'b" + (200 - count) + "/b/font个字");
}else{
$("#textCount").html(" 已超出font color='red'b" + (count - 200) + "/b/font个字");
}
});
});
var starValue=0;
function onUlMouseOut(){
var y = -90 + starValue * 18;
var position = "0 " + y + "px";
$(".rating-wrap-ul").css({
"background-position" : position
});
}
function onUlMouseOver(){
$(".rating-wrap-ul").css({
"background-position" : "0 -90px"
});
}
function onLiMouseOver(grade){
switch(grade){
case 1 : document.getElementById("ratingText").innerHTML="很差";break;
case 2 : document.getElementById("ratingText").innerHTML="差";break;
case 3 : document.getElementById("ratingText").innerHTML="还行";break;
case 4 : document.getElementById("ratingText").innerHTML="好";break;
case 5 : document.getElementById("ratingText").innerHTML="很好";break;
default : document.getElementById("ratingText").innerHTML="";
}
}
function onLiMouseOut(){
onLiMouseOver(starValue);
}
function clickStar(grade){
starValue = grade;
var y = -90 + grade * 18;
var position = "0 " + y + "px";
$(".rating-wrap-ul").css({
"background-position" : position
});
}
希望能帮到你
编写一个HTML文件,要求运用Javascript代码,对用户输入的测试成绩给予评价
htmlhead
script
function prompt(){
var cjObj = document.getElementById("cj");
var xsObj = document.getElementById("xs");
xsObj.value="";
var cj = cjObj.value;
if(cj.length==0 || isNaN(cj) || cj100 || cj0){
alert("输入的成绩错误,请重新输入!");
cjObj.select();
return false;
}
var result;
if(cj60)
result="不合格";
else if(cj70)
result="合格";
else if(cj80)
result="中等";
else if(cj90)
result="良好";
else if(cj100)
result="优秀";
else
result="满分";
xsObj.value=result;
return true;
}
/script
/head
body
成绩录入: input type="text" id="cj"/br/
成绩显示: input type="text" id="xs"/br/
input type="submit" value="提交" onclick="prompt()"/
/body
经测试无误,满意请采纳。
html评价的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于html评价页面、html评价的信息别忘了在本站进行查找喔。
