HTML学习笔记

184 阅读1分钟

HTML

超文本标记语言

作用

提供标记给浏览器,浏览器根据标记来识别。浏览器根据w3c组织规定的标记做出相应的解析。

超文本:体现在文字 图片 视频 数据流

HTML代码基本结构

根节点 两个子节点

graph 
html--> head
html--> body
head-->title
head-->meta

网页编码格式

UTF-8 国际通用编码格式

建立网站基本结构

  • 第一步建立一个文件夹作为网站项目的文件夹

JAVASCRIPT

  • 一种脚本语言,用来控制网页上面的元素,元素是指HTML中的各种标签

  • 前端开发:html5+div+css+js

网站首页

  • index.html页面
  • web服务器上面默认都有配置index.html index.htm来作为首页浏览

网站内容代码基本结构

	`<body>
		<div id="wrappar">
			<div class="header"></div>
			<div class="main"></div>
			<div class="footer"></div>
		</div>
	</body>`

CSS结构规划

  1. 通用的css文件命名common.css 写通用css文件的好处,通过一次书写css,同时在多张页面生效

总结

  1. 掌握网站中css结构规则
  2. 网页开发的基本代码结构,写好后,往结构zhong填充即可 3.可能会出现多张页,这个时候我们应该要有一个相同意识的规划。

a标签

  1. 标签中间写链接的文字
  2. href属性:链接 3.target属性:打开页面的指向

SCRIPT 标记

控制网页上面html标签逻辑,称DOM控制

<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		
	</head>
	<body>
		<div class="wrapper">
			<div class="header">
				<div class="logo" ">
					编程
				</div>
			</div>
			<div class="main">
				<div id="pics">
					<img src= 'img/a (1).jpg'>
				</div>
			</div>
			<div class="fotter"></div>
		</div>
	</body>
</html>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	margin: 0;
}

.logo{
	color: aqua;
    padding: 20px;
	font-size: 18px;
	background-color: darkgray;
}

.pics img{
	width: 100%;
}
var n = 1;
//设置时钟控件
setInterval(function(){
	if(n>4){
		n=1
	}
	pics.innerHTML= "<img src= 'img/a%20("+n+").jpg'>"
	n++
},1000)  //1000毫秒

多写 多实践

function(){}:匿名函数,(没有名字的函数)可以直接被调用

setInterval(){}:定时器,参数一是函数,参数二是时间(毫秒)