HTML学习笔记一

1.设置背景图片的方式

<body background = "img/图片.jpg">

2.HTML中添加下面所示代码就不会出现中文乱码

 <meta charset = "utf-8"/>

3.在script中获取时间。使用

<script>
funcction myTime(){
document.getElementById("clock").innerHTML = new Date().toLocalTimeString();
}
setInterval(myTime,1000);

</script>
<body>
<p id = "clock">
</p>
</body>
funcction myTime(){
document.getElementById("clock").innerHTML = new Date().toLocalTimeString();
}
setInterval(myTime,1000);

</script>
<body>
<p id = "clock">
</p>
</body>

4.css中的position属性。

position属性规定元素的定位类型，有absolute、fixed、relative、static。

absolute和fixed：绝对定位。fixed 生成的是相对于浏览器窗口进行定位；absolute根据left,top,reght,bottom进行定位。

例如：

<style type = "text/css">
h2.pos_abs{
position:absolute;
left:100px;
top:150px;
}
</style>
<body>
<h2 calss = "pos_abs">
生成位置
</h2>
</body>

感觉自己目前还是比较喜欢用relative。

5.首行缩进

p{
text-indent:2cm
}

6.利用div设置背景图片拉伸自适应：

<div style = "position : fixed;z-index = -1;width:"100%";height:"100%;">
<img src = "img/sea.jpg" width = 100% height = "100%>
</div>

z-index表示图片在文字的下方，仅能在定位元素上奏效（例如 position:absolute;）

7.利用div设置内容位置

<div style = "position:absolute; font-family:'黑体';font-size:20px";width:100px;height:100px;top:100px;left:100px;">
<p class = "pos.p">
</p>
</div>

8.表格的知识

建立表格使用<table></table>

行是<tr></tr>

列是<td></td>

初始状态

border 表示的是表格的外层边框的大小。

在<table>中加入boder属性，效果如下：（此时border = "8"）

cellspacing 表示的是表格内部格子间的空隙大小,当cellspacing = 0时，效果如下：

cellpadding 表示的是表格内部格子的大小，当cellpadding = "10"时，效果如下：

可以为表格设置背景，使用background设置背景的效果如下：

完整代码如下：

<html>
	<head>
		<meta charset="utf-8" />
	</head>
	<body>
		<table border="8" cellspacing="0" cellpadding="10" background="../img/sea.jpg">
			<tr>
					<td>哈哈哈</td>
					<td>哈哈哈</td>
					<td>哈哈哈</td>
			</tr>
		
			<tr>
					<td>哈哈哈</td>
					<td>哈哈哈</td>
					<td>哈哈哈</td>
			</tr>	
		</table>
	</body>
</html>

9.使用<a href>添加链接

<a href="https://baike.baidu.com/item/%E5%BC%A0%E5%9B%BD%E8%8D%A3/6804?fr=aladdin" target="_blank">张国荣</a>

运行效果如下：

点击即可跳转到百度百科的张国荣页面。

猜你喜欢