HTML5头部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--定义网站的搜索关键字-->
<meta name="keywords" content="HTML,CSS,JS,JQUERY" />
<!--对网站的一个简单概述-->
<meta name="description" content="前端技术开发" />
<meta name="author" content="fugogo" />
<!--Link标签定义了文档与外部资源之间的关系
Link标签通常用于链接到样式表-->
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<title>初页面</title>
<!--
定义网页的内部样式
字体红色，背景灰色，字体20尺寸，文本加粗，文本中间
-->
<style type="text/css">
body{
color:red;
background-color:#A9A9A9;
font-size:20px;
font-weight: bold;
text-align: center;
}
</style>
<!--
页面加载完成弹出的事件
-->
<!--<script>
window.onload=function(){
alert("hello");
}
</script>-->
<!--引用外部js文件-->
<script src="../js/html_js.js"></script>
</head>
<body>
<!--
创建按钮，并给按钮添加点击事件，当点击按钮的时候执行login方法
-->
<button-id="btnLogin" onclick="login()">登录</button>
<p>好好学习</p>
今天天气很好！
<h1>这是我第一个页面</h1>
</body>
</html>
HTML基本标签
标题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<!--h1标题在网页中定义一次，前提是外面没有Hgroup标签-->
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<!--段落特点：p标签-->
<p>白日依山尽，</p>
<p>黄河入海流。</p>
<p>欲穷千里目，</p>
<p>更上一层楼。</p>
<!--链接-->
<!--
title：元素的替换文本
target：属性
_blank：在新窗口中打开链接文档
_top：在整个窗口中打开被链接的文档
_self:默认值 在相同框架中打开被链接文档
-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<!--本网页某区域显示另外网页信息
frameborder:是否显示边框 0不显示 1 显示
-->
<iframe width="500" height="500" src="1HTML.html" frameborder="0">123</iframe>
</body>
</html>
列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--有序列表
type改变序号样式
-->
<ol type="a">
<li>购物</li>
<li>阅读</li>
<li>游泳</li>
</ol>
<!--无序列表-->
<ul type="list-style-type:circle">
<li>购物</li>
<li>阅读</li>
<li>游泳</li>
</ul>
<!--自定义列表
dt标识词条dd描述
-->
<dl>
<dt>小李</dt>
<dd>是个男生，身高1米8</dd>
<dd>很帅气</dd>
</dl>
</body>
</html>
图像
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
height与weidth设置高，宽；
alt为图像定义一串预备可以替换的文本
src：图片路径
title:鼠标放上去，提示文本
-->
<img src="../img/logo.jpg" width="409" height="200"
alt="加载失败" title="百度一下"/>
</body>
</html>
其他
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--换行-->
<p>今天下雨了，<br/>都带伞了吗</p>
<!--水平线-->
<hr />
<!--
HTML区块
1.块元素：以新行来开始和结束
实例<h1>p ul table
2.内联元素不会以新行开始
实例：b td a img
-->
<!--
div:块级，用来组合其他HTML元素的容器 div+css文件布局，独占一行
span：内联：用作文本的容器
-->
<p style="background-color: aquamarine;">欢迎</p>
<span style="background-color: aquamarine;">欢迎</span>
</body>
</html>
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
