HTML基础标签
注释快捷键:CTRL+/
<html>
<head>
<title>这里是网页标题</title>
</head>
<body>
</body>
</html>
HTML标题
- <h1>……<h6>标题定义，字号越来越小
HTML段落
<p>我是一个段落</p>
*HTML链接
<a herf="http://www.jikexueyuan.com"></a>
HTML图像
<img src="图片路径">
HTML元素
1、单独成段
2、另起一行
<p></p>
<br/>
HTML属性
1、标签通过属性可以为元素提供更多信息
2、属性以键值形式出现
- 如：href=“http://www.jikexueyuan.com”
3、常用标签属性
<h1> : align对齐方式
<body>:bgcolor背景颜色
<a>:target*规定在何处打开链接
4、通用属性
- class:规定元素类名
- id:规定元素唯一ID
- style:规定元素样式
- title：规定元素额外信息
练习片段如下
<html>
<head>
<title>这里是网页标题</title>
</head>
<body bgcorlor="#000000">
<h1 align="center">标题h1居中</h1>
<h2>标题h2</h2>
<a href="http://www.jikexueyuan.com">极客学院</a>
</body>
<p>这是单独一行</p>
<br/>另起一行
</html>
HTML格式
<body bgcolor="#FF7F00">
常规：欢迎来到前端开发第一步<br/><br/>
<b>加粗：欢迎来到前端开发第一步</b><br/><br/>
<big>变大：欢迎来到前端开发第一步</big><br/><br/>
<i>斜体：欢迎来到前端开发第一步</i><br/><br/>
<em>着重：欢迎来到前端开发第一步</em><br/><br/>
<small>缩小：欢迎来到前端开发第一步</small><br/><br/>
<strong>加重：欢迎来到前端开发第一步</strong><br/><br/>
<sub>下标：欢迎来到前端开发第一步</sub><br/><br/>
<sup>下标：欢迎来到前端开发第一步</sup><br/><br/>
<ins>插入：欢迎来到前端开发第一步</ins><br/><br/>
<del>删除线：欢迎来到前端开发第一步</del><br/><br/>
</body>
HTML样式
-
标签：
<style>:样式定义
<link>:资源引用 -
属性：
rel=“stylesheet”
type=“text/css”:引入文档类型
margin-left:边距
HTML三种样式表插入方法
- 外部样式表 :
<link rel="stylesheet " type="text/css" href="mystyle.css">
- 内部样式表 :
<style type="text/css">
body{
background-color:red }
p{margin-left:20px}
</style>
- 内联样式表:
<p style="color :red">
代码练习区
<html>
<head lang="en">
<meta charset="utf-8">
<title>这里是网页标题</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">
p{ color: crimson}
</style>
</head>
<body bgcolor="#FF7F00">
<a herf="http://www.jikexueyuan.com">打开极客学院</a><br/><br/>
<p>这是内部样式表方式：欢迎来到html样式表</p>
<h4>这是css外部设置样式：欢迎来到html样式表</h4>
<p style="color: lemonchiffon;">
这是内联样式表：欢迎来到html样式表</p>
<br/><br/>
</body>
</html>
HTML链接
-
链接数据
文本链接 图片链接 -
属性
href属性：指向另一个文档的链接 name属性：创建文档内的链接 -
img标签属性
alt:替换文本属性 width:宽 height：高
代码练习区
<html>
<body>
<a href="http://www.jikexueyuan.com">点击我跳转</a>
<a href="http://www.jikexueyuan.com">
<img src="html5.png" width="200px" height="200px" alt="html5logo">
</a>
<br/><br/>
<a name="tips">hello</a>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#tips">跳转到hello</a>
</body>
</html>
HTML表格
<*table*>定义表格
<*caption*>定义表格标题
<*th*>定义表格的表头
<*tr*>定义表格的列的单元
<*td*>定义表格的横的单元
<*thead*>定义表格的页眉
<*tbody*>定义表格的主体
<*tfood*>定义表格的页脚
<*col*>定义表格的列属性
HTML的几种表格练习
- 没有边框的表格
- 表格中的表头
- 空单表格
- 带有标签的表格
- 表格内的标签
- 单元格边距
- 单元格间距
- 表格内的背景颜色和图像
- 单元格内容排序
- 跨行和跨列单元格
代码练习区
<body>
<table border="1">
<caption>表格标题</caption>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</body>
HTML列表
- 无序列表
使用标签：<ul>、<li>
属性：disc(实心黑圆点)、circle(空心圆点)、square(黑心正方形)（eg:type=“disc”） - 有序列表
使用标签：<ol>、<li>
属性：A、a、l、i、start(序号开始的数) - 嵌套列表
使用标签：<ul>、<ol>、<li> - 自定义列表
使用标签：<dl>、<dt>、<dd>
代码练习区
<html>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<ul type="square">
<li>夏天到了</li>
<li>秋天到了</li>
</ul>
<ol>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>脐橙</li>
</ol>
<ul>
<li>水果</li>
<ol start="10">
<li>西瓜</li>
<li>西瓜</li>
</ol>
<li>水果</li>
<ul>
<li>西瓜</li>
<li>西瓜</li>
</ul>
</ul>
<dl>
<dt>hello word!</dt>
<dd>每一个学习编程入门的都会打一个helloWord!</dd>
<dt>hello word!</dt>
<dd>每一个学习编程入门的都会打一个helloWord!</dd>
<dt>hello word!</dt>
<dd></dd>
</dl>
</body>
</html>
结果页面示例：
HTML块元素标签
- HTML块元素
块元素在显示时，通常会以新行开始
如：<hl>，<p>,<ul> - HTML内联元素
内联元素在显示时，通常不会以新行开始
如：<b>,<a>,<img> - HTML<div>元素
<div>元素也被称为块元素，其主要是组合HTML元素的容器 - HTML块<SPAN>元素
<span>元素是内联元素，可以作为文本的容器（和div比较，明确指定是文本）
代码练习区
暂时放着，原因：引用css时出错。
<html>
<head lang="en">
<meta charset="utf-8">
<title>块元素</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<p>今天天气不太好</p>
<div id="div1">
<p>今天天气不太好</p>
<a>点击这里带你飞</a>
</div>
</body>
</html>
HTML布局的使用
- 使用<div>元素布局
- 使用<table>元素布局
代码练习区
使用<table>元素布局
<html>
<head lang="en">
<meta charset="utf-8">
<title>使用table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: darkgrey;">
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: darkorange;">头部</td>
</tr>
<tr>
<td width="30%" height="70%" style="background-color: deeppink;">1</td>
<td width="30%" height="70%" style="background-color:deepskyblue">2</td>
<td width="40%" height="70%" style="background-color:gold">3</td>
</tr>
<tr>
<td colspan="3" width="100%" height="20%" style="background-color: greenyellow;">底部</td>
</tr>
</table>
</body>
</html>
使用<div>元素布局
<html>
<head lang="en">
<meta charset="utf-8">
<title>div布局</title>
<style type="text/css">
body{
margin:0px;
}
div#container{
width: 100%;
height: 950px;
background-color: grey;
}
div#heading{
width: 100%;
height: 10%;
background-color: khaki;
}
div#content_menu{
width: 30%;
height: 70%;
background-color:lavender;
float: left;
}
div#content_body1{
width: 30%;
height: 70%;
background-color:lightcyan;
float: left;
}
div#content_body2{
width: 40%;
height: 70%;
background-color:lightsteelblue;
float: left;
}
div#footing{
width: 100%;
height: 20%;
background-color:lightgoldenrodyellow;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="heading">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body1">内容主体1</div>
<div id="content_body2">内容主体2</div>
<div id="footing">底部</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
