HTML和CSS |青训营HTML 是用来描述网页的一种语言,HTML 是一种在 Web 上使用的通用标记语言,HTML

html : 用来描述网页的一种语言
首先 <! DOCTYPE html> 声明为 HTML5 文档

< html > 元素是 HTML 页面的根元素
< head > 元素包含了文档的元（meta）数据，如
< title> 元素描述了文档的标题
< body > 元素包含了可见的页面内容
< h1 > 元素定义一个大标题 //一共6级标题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
 
</body>
</html>

< p > 元素定义一个段落

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
 
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
 
</body>
</html>

HTML 链接是通过标签 < a > 来定义的

<html>
<head>
<meta charset="utf-8">
<title>cxy</title>
</head>
<body>
 
<a href="[写文章 - HTML - 掘金 (juejin.cn)](https://juejin.cn/editor/drafts/7260458223235842104)">这是一个链接使用了 href 属性</a>
 
</body>
</html>

HTML 图像是通过标签 < img> 来定义的

<html>
<head>
<meta charset="utf-8">
<title>cxy</title>
</head>
<body>
 
<img src="cxy.jpg" width="640" height="640" />
 
</body>
</html>

无序列表&有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

<dl>
  <dt>项目1</dt>
    <dd>描述项目 1</dd>
  <dt>项目2</dt>
    <dd>描述项目 2</dd>
</dl>

表格

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

......html标签

CSS : Cascading Style Sheet 层叠样式表（美化页面外观）

1、CSS语法

选择器：要修饰的对象（东西）
属性名：修饰对象的哪一个属性（样式）
属性值：样式的取值

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		    }
	</style>
</head>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			color:red;
			background: #FFFFFF;
		}
		h3{
			color:yellow;
		}
	</style>
</head>
<body>
	<p>CSS从入门到精通</p>
	<h2>主讲：hector</h2>
</body>
</html>

2 、CSS三种引用方式：内部样式、行内样式、外部样式

行内样式

<head>
   <div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div>
</head>

内部样式

<head>
    <meta charset="utf-8" />
    <title>内部</title>
    <style type="text/css">
        div {
            width: 64px;
            height: 22px;
            border: 2px;
            background: green;
        }
    </style>
</head>

外部样式

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

当然学习到的html标签和css样式远远不止笔记这些，这些只是我整理基础框架一小部分笔记，学习还在继续，代码还需继续敲~

2023/7/27
cxy