笔记与代码来源:https://www.bilibili.com/video/BV1Mx411m7fd
<IDOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML基础</title>
</head>
<body>
jikexueyuan
hello
<h1>标题h1</h1>
<h2>标思h2</h2>
<h3>标题h3</h3>
<h4>标题h4</h4>
<h5>标题h5</h5>
<h6>标题h6</h6>
<p>hello jikexueyuans</p>
hello
</body>
</html>
1、HTML基础标签
head、body
2、HTML标题
<h1>…<h6>等标签进行定义等
3、HTML段落
<p>标签定义段落
4、HTML链接
<a>标签定义链接
5、HTML图像
<img>标签定义图像
1、标签可以拥有属性为元素提供更多的信息
2、属性以键/值对的形式出现
如:href=“www.jikexueyuan.com'
3、常用标签属性:
<h1>:align对其方式
<body>:background背景颜色
<a>:target规定在何处打开链接
4、通用属性:
class :规定元素的类名
id :规定元素唯一ID
style :规定元素的样式
title:规定元素的额外信息
1、标签:
<style>: 样式定义
<link>:资源引用
2、属性:
rel="stylesheet":外部样式表
type="text/css":引入文档的类型
margin-left:边距
1、三种样式表插入方法:
外部样式表:
<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>
<IDOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML基础</title>
<link rel="stylesheet" type="text/css"href="mystyle.css">
<style typew"text/css">
p{
color:#ffidee;
}
</style>
</head>
<body> I
<h1>标题h1</h1>
<p>欢迎来到极客学院:www.jikexueyuan.com</p>
<a href="http://www.jikexueyuan.com"style="color:chartreuse">点击胶跳转到极客学院</a>
</body>
</html>
<table> 定义表格
<caption> 定义表格标题
<th>定义表格的表头
<tr>定义表格的行
<td>定义表格的单元
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义表格的列属性
<ol> 有序列表
<ul>无序列表
<li>列表项
<dl>列表
<dt>列表项
<dd> 描述
1、无序列表
使用标签:<ul>、<li>
属性:disc、circle、square
2、有序列表
使用标签:<ol>、<li>
属性:A、a、I、i、start
3、嵌套列表
使用标签:<ul>、<ol>、<li>
4、自定义列表
使用标签:<dl>、<dt>、<dd>
1、HTML块元素
块元素在显示时,通常会以新行开始
如:<hl>、<p>、<ul>
2、HTML内联元素
内联元素通常不会以新行开始
如:<b>、<a>、<img>
3、HTML<div>元素
<div>元素也被成为块元素,其主要是组合HTML元素的容器
4、HTML<span>元素
<span>元素是内联元素,可作为文本的容器
<IDOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局</title>
<style type="text/css">
body{
margin: @px;
}
div#container{
width: 100%;
height:95@px;
background-color:darkgray;
}
div#heading{
width:100%;
height: 10%;
background-color:gold;
}
div#content_menu{
width:108%;
height: 20%;
background-color:greenyellow;
}
div#content_body{
width:108%;
height: 40%;
background-color:ghostwhite;
}
div#footing{
width:108%;
height: 20%;
background-color:plum;
}
</style>
</head>
<body>
<div id="container">
<div id="heading">头部</div>
<div id="content_menu">内容菜单</div>
<div id="content_body">内容主体</div>
<div id="footing">di部</div>
</div>
</body>
</html>
<IDOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>布局</title>
</head>
<body marginheight="@px" marginwidth="@px">
<table width="100%" height="950px"style="background-color: darkgray;">
<tr>
<td colspan="3"width="100%"height="10%"style="background-color: aqua;">这是头部</td>
</tr>
<tr>
<td width="20%"height="80%"style="background-color: blue;">做菜单</td>
<td width="60%"height="80%"style="background-color: blueviolet;">这是主体</td>
<td width="20%"height="80%"style="background-color: darkgreen;">这是有菜单</td>
</tr>
<tr>
<td width="100%"height="10%"colspan="3"style="background-color: darkgray;">这底部</td>
</tr>
</table>
</body>
</html>