一、 HTML
什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) Html包含静态html和动态html
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title> 网页学习 </title>
</head>
<body>
<h2>hello world</h2>
<p> 好好学习</p>
<p> 天天向上 </p>
</body>
</html>
1.1、 标签
• HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
• HTML 标签是由尖括号包围的关键词，比如 <html>
• HTML 标签通常是成对！出现的，比如 <b> 和 </b>
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签
1.2、解析
• <html> 与 </html> 之间的文本描述网页,标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体
• <head>与</head>标签之间用于定义文档的头部，它是所有头部元素的容器。
• <body> 与 </body> 之间的文本是可见的页面内容
• <h1> 与 </h1> 内容里面文本标题
• <p> 与 </p> 之间的文本被显示为段落
更多标签参考网站：https://www.w3school.com.cn/html/index.asp
二、常见基本标签
标题 是通过 <h1>-<h6> 等标签进行定义的
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h6>标题4</h6>
2.1、head
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容... ...
</body>
</html>
2.2、段落
HTML 段落是通过 <p> 标签进行定义的。
<p>段落一啊</p>
<p>段落二</p>
2.3、链接
HTML 链接是通过 <a> 标签进行定义的。
<a> 标签定义超链接，用于从一张页面链接到另一张页面。
<a> 元素最重要的属性是 href 属性，它指示链接的目标。
<a href="http://www.baidu.com">百度一下> 点击这里</a>
2.4、 图像
HTML 图像是通过 标签进行定义的。
<img src="C:Users51678DownloadsIMG_1029.JPG" width="104" height="142" />
2.5、 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
<!-- 在此处写注释 -->
2.6、 换行
如果您希望在不产生一个新段落的情况下进行换行（新行），使用 <br /> 标签
<p>这是一行 <br />第二行<br />结束行</p>
2.7、 div
<div> 可定义文档中的分区或节（division/section）。 <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
<h1>新闻网站</h1>
<p>一些 内容 一些内容</p>
...
<div class="news">
<h2>新闻标题1</h2>
<p>新闻内容 新闻内容 新闻内容</p>
...
</div>
<!-- 加颜色 设置了高和宽-->
<div style="background-color:red; height:100px;300px">
<h2>新闻标题2</h2>
<p>新闻内容 新闻内容 新闻内容</p>
...
</div>
二、 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以 名称/值 对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
如：name 属性用于指定标签元素的名称。 <a> 标签内必须提供 href 或 name 属性
<a href="http://www.baidu.com">百度一下</a>
<a name="value">
2.1、id 属性
id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 属性可通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--以下定义一个js方法，主要是根据id来改变内容-->
<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader_1").innerHTML="恭喜发财";
}
</script>
</head>
<body>
<h1 id="myHeader">正在学习前端基础</h1>
<h1 id="myHeader_1">选择大于努力</h1>
<button onclick="change_header()">点击这里</button>
</body>
</html>
id 或 name 属性的值可以是引号引起来的任何字符串。字符串必须是唯一的标记，不能在同一文档中的其他 name 或 id 属性中重复使用，但是可以在不同的文档中再次使用。
2.2、style 属性
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
背景颜色：background-color 属性为元素定义了背景颜色
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">这是一个标题</h2>
<p style="background-color:green">这是一段内容，这是一段内容</p>
</body>
</html>
字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
<html>
<body>
<h1 style="font-family:verdana">一个标题</h1>
<p style="font-family:隶书;color:red;font-size:20px;">一段内容</p>
</body>
</html>
文本对齐
<html>
<body>
<h1 style="text-align:center">这是一个标题</h1>
<p>内容lll手动释放速度士大夫士大夫地方</p>
</body>
</html>
更多属性：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
三、CSS
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
3.1、CSS作用
样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
3.2、CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
如：将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
h1 {color:red; font-size:14px;}
3.3、Css外部样式引用
<head>
<link rel=stylesheet type=text/css href=mystyle.css>
</head>
更多css内容请参考
http://www.w3school.com.cn/css/index.asp