最详细HTML总结笔记一

最新推荐文章于 2024-07-28 20:59:34 发布

幻昱

最新推荐文章于 2024-07-28 20:59:34 发布

阅读量302

点赞数

分类专栏： PHP 前端文章标签： html html5

本文链接：https://blog.csdn.net/weixin_45239587/article/details/106466225

版权

PHP 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

笔记与代码来源：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&apos;
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>

幻昱

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
最详细HTML总结笔记一

笔记与代码来源：https://www.bilibili.com/video/BV1Mx411m7fd<IDOCTYPE html><html><head> <meta charset="UTF-8"> <title>HTML基础</title> </head><body> jikexueyuan hello <h1>标题h1</h1> <h
复制链接

扫一扫

专栏目录