这是之前自己的网页学习笔记，贴在这里。如果使用WordPress系统或其他模板快速建站，可以不必学习本篇内容。
一个简单的HTML网页代码：
<html>
<head>
<title>这是网页标题</title>
</head>
<body>hello world，这是网页内容</body>
</html>其中，<html>与</html>之间的文本描述网页；<body>与</body>之间的文本是可见的页面内容；<head>和</head>之间是所有头部元素的容器，可包含脚本、指示浏览器在何处可以找到样式表、提供元信息等。
打开记事本，将以上代码复制粘贴，保存为a.html文件（注意后缀是.html格式）。然后用浏览器打开文件查看结果。除了用记事本，软件推荐Webstorm或VS Code，有缩进等辅助功能，写起来比较方便和清楚。
一、HTML基础
1. 常用的几个标签
把以下内容直接放在a.html文件中（可以不写<html>、<head>、<body>）：
<!-- 这是注释 -->
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p>这是一个段落。</p>
<p>a和b之间有个空格：a b</p> <!-- 代表空格，注意后面有个分号 -->
<a href="https://www.guanjihuan.com">这是一个链接：https://www.guanjihuan.com</a>
<br /> <!-- 这是换行-->
<img src="图片的链接" />
<ul>
<li>无序列表 内容1</li>
<li>无序列表 内容2</li>
</ul>
<ol>
<li>有序列表 内容1</li>
<li>有序列表 内容2</li>
</ol>
参考资料：
[1] https://www.runoob.com/html/html-basic.html
[2] https://www.runoob.com/html/html-lists.html
2. <div>和<span>
<div>是块级元素，有换行的效果。<div>和<p>有点像，但<p>描述的是段落，<div>描述的是块。<span>为行内元素，没有换行的效果。span可以作为div的子元素，但div不能是span的子元素。
例子：
<div>
<p> 内容1 </p>
</div>
<div>
<p> 内容2 <span>内容3</span> </p>
</div>这里的<span>看起来没什么效果，但可以单独设置CSS样式。
参考资料：
[1] https://www.w3school.com.cn/html/html_blocks.asp
[2] https://zhidao.baidu.com/question/128649143.html
3. 网页布局
通过以上代码可实现网页布局，参考：https://www.w3school.com.cn/html/html_layout.asp。这时候，网页的基本雏形就已经有了。关于字体颜色、字体大小、背景颜色、对齐方式等是CSS的内容。
二、CSS基础
CSS (Cascading Style Sheets)是用于渲染HTML元素标签的样式。
1. CSS样式的三种方法
这里先给出两种方法的例子：
<html>
<head>
<style type="text/css">
p{
background: green;
}
</style>
</head>
<body>
<p>这是内部样式</p>
<p style="background: red">这是内联样式，内联样式优先级高于内部样式</p>
</body>
</html>除了内联样式内部样式，还有外部样式，即把style中的内容写在.css文件中，然后通过以下语句进行调用：
<link rel="stylesheet" type="text/css" href="style.css">推荐一开始使用“内联样式”，比较直观直接，设计也方便。在设计中当遇到重复的样式多了，就可以采用“内部样式”和“外部样式”的方式，可多次调用。
参考资料：
[1] 使用CSS样式的三种方法
[2] https://www.runoob.com/w3cnote/html-import-css-method.html
2. 样式内容
字体大小和颜色、居中等内容参考：https://www.runoob.com/html/html-css.html。
3. class和id
通常会定义一个class，然后重复调用样式，详细内容参考：CSS中的class与id区别及用法。对于专业或经常写网页的，可能会调用别人已经写好的CSS内容，即CSS框架。
三、其他
1. 调用公共内容
当一个网站建起来时，会发现不同HTML文件会有很多重复的部分，如网站logo，导航栏，版权声明等。这时候建议采用调用模板的方式，以免当要修改这些公共区域时需要修改多个HTML文件，而且容易遗漏修改。
一种调用的方法是：
<!--使用jquery调用公用html模板文件-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="page1"></div>
<script>
$("#page1").load("templates/template1.html");
</script>2. HTML和PHP混合编程时的注释
在HTML中的注释方法为<!--和-->：
<!-- 内容1 -->在PHP中的注释方法为双斜杠：
<?php
// 内容2
?>两者混合编程时，可以采用if判断来注释：
<?php if (0) { ?>
内容1
内容2
<?php } ?>3. 注意事项
- 换行最好用<br />，比较标准，而不用</br>、<br>、<br/>，虽然都有效果。
- 公共模板里的链接时最好使用网站的绝对路径，不然很多链接会失效，因为默认的起始路径变成当前文件夹了。
- 如果网页出现乱码，可以在头部增加编码方式：<meta charset="utf-8">。
【说明：本站主要是个人的一些笔记和代码分享，内容可能会不定期修改。为了使全网显示的始终是最新版本，这里的文章未经同意请勿转载。引用请注明出处：https://www.guanjihuan.com】
