Java知识整理（十五）之HTML

最新推荐文章于 2023-03-21 10:07:17 发布

qq619771478

最新推荐文章于 2023-03-21 10:07:17 发布

阅读量369

点赞数

分类专栏： Java基础知识整理文章标签： html

本文链接：https://blog.csdn.net/qq619771478/article/details/48573013

版权

Java基础知识整理专栏收录该内容

25 篇文章 0 订阅

订阅专栏

HTML:用HTML编写的文件,以.html或html为后缀
HTML5：是最宽松的版本,不用严格遵守XML语法,已经简化为<!DOCTYPE html>
<head>
<title>标题</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //改编码
<style type="text/css">
#body1 th{border-bottom:1px solid #848484;}
</style> //设置样式
//类型为javascript,用javascript语言写(js脚本)
<script type="text/javascript" language="javascript"></script>
<link></link>
</head>
<body>
<div> //块分区元素
//标题元素h1~h6;<p>段落元素
<h1>
<p><span>行内分区元素&lt&gt(<>)&nbsp(/s)&copy(@)</span></p><br/>
<img src="images/img.png"/> //加图片
//target="_blank"转到一个新开网页,不加就在原网页转
<a href="http://tmooc.cn" target="_blank">
<a href="#s1">第一章</a> //锚点,#代表返回到顶部
</h1>
<table><tr><td colspan="2" rowspan="2">表格单元</td></tr><tr><td></td></tr></table>
<thead></thead><tbody></tbody><tfoot></tfoot>
<ol><li></li></ol> //有序列表<ol>;无序列表<ul>;列表项<li>
</div>
</body>
CSS样式表:内联样式,内部样式,外部样式表;
特征:
继承性:大多数CSS的样式规则可以被继承
层叠性:可以定义多个样式表,不冲突时,多个样式表中的样式可层叠为一个
优先级:样式定义冲突时,按照不同样式规则的优先级来应用样式,相同的样式,如果重复定义,
以最后一次的定义为准(就近原则)
width和height指内容区域(element)的宽度和高度,增加padding和margin不会影响element尺寸,但会增加元素框总尺寸
元素选择器(div),id选择器(#id),类选择器(.class)
padding:内边距,border:边框,margin:外边距
CSS(Cascading Style Sheets)
外部样式:.css文件
{background-color:silver;background:red;
border-top/right/bottom/left:1px solid black(width style color);border-width/style/color:10px;
padding-top/right/bottom/left:10px; padding(margin):1px(top) 1px(right) 1px(bottom) 1px(left)(顺时针);
margin:0 auto(设置居中);background-image:url("image/img1.jpg");
background-repeat:repeat/repeat-x(水平重复)/repeat-y/(垂直重复)no-repeat(显示一次);
background-position:x% y%/x y/left/center/right/top/bottom;font-family:value1,value2(指定字体);font-size:1.2em;
font-size:35pt;font-weight:normal/bold;color:#ff0000(文本颜色);text-align:center/left/right(文本排列);
text-decoration:none/underline(文字修饰);line-height:25px(字体垂直居中用);text-indent:20px(首行文本缩进);
vertical-align:top/middle/bottom(表单垂直对其方式);border-collapse:separate/collapse(表单边框合并);
border-spacing:10px 20px(边框边距);float:none/left/right(div浮动);clear:none/left/right/both(元素哪边不允许出现浮动元素);
display:none/block/inline;cursor:default/pointer/crosshair/text/wait/help(光标属性);
(列表项标志)list-style-type:(无序列表)none(无标记)/disc(实心圆)/circle(空心圆)/square(实心方块)/
(有序列表)none(无标记)/decimal(数字)/lower-roman(小写罗马数字)/upper-roman(大写罗马数字);
list-style-image:url(img.jpg)(图像代表列表项标记);position:static/relative/absolute/fixed(定位);top/bottom/left/right:1px;
z-index:2(堆叠顺序,数值越大,在越上面);
}
伪类选择器:用于向某些选择器添加特殊的效果,使用冒号(:)作为结合符,结合符左边是其他选择器,右边是伪类
常用伪类:link,active,visited,hover,focus; #d1:hover{}
overflow:当内容溢出元素框时如何处理
{overflow:hidden(隐藏文本不显示);scroll(显示滚动条);auto(不超出不显示,超出显示滚动条)}