心得感悟
HTML真的好简单，都说女生比较适合搞网页的确是真的，感觉网页设计虽然有点麻烦，但是它好看啊！不像搞源程序开发只能面对一团黑...不过正因为网页如此简单，可能大家基本都会，还是要好好学程序开发的。由于篇幅太长，HTML将分为两篇文章讲解。
内容简概
- 一、安装配置Apache
- 二、安装配置PHP
- 三、HTML的基本语法
- 四、使同一局域网的用户可以访问该网页
具体内容
一、安装配置Apache
☟ 这片文章已经讲得很详细了，良心推荐。
| Apache |
|---|
二、安装配置PHP
☟ 这片文章同样讲得很详细，良心推荐。
| PHP |
|---|
三、HTML的基本语法
我这里使用的是subline编辑器，当然你可以使用电脑自带的记事本，但是会麻烦很多啊喂！
1. 中文乱码解决办法
如果你的网页出现中文乱码，有以下两种解决办法：
（1）更换浏览器
亲测☹Internet Explorer、Microsoft Edge会出现乱码，但是☺QQ浏览器、Chrome浏览器均可正常显示。
（2）在<html>前面加一行代码：
< meta http-equiv="Content-Type" content="text/html; charset=utf-8">
2. 大体格式
当你敲出<h时，它已经会提示html了，选中后再回车就会自动写完以下代码，这个就是一个完整的网页的主体框架了。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3. 网页标签页名字
标签页的编写格式如下。如果连<head></head>都不要，只有<html></html>的话，它的标签页名字会默认是你的文件名。
<!-- 头部信息 -->
<head>
<title>我的第一个网页</title>
</head>
显示效果
4.页面内容
还有插入背景音乐等语法就不写了，语法太多，想制作更加精美的网页，还是买本书看吧。
| 语法 | 中间存放的内容 |
|---|---|
| <body></body> | 所有内容，包括文字、图片、表格等 |
| <h1 ></h1> | 一级标题 |
| <h2 ></h2> | 二级标题 |
| <br >或<br /> | 换行，后者更加规范 |
| <p></p> | 普通文本 |
| <table></table> | 插入表格 |
| <tr></tr> | 表格的一行数据 |
| <td></td> | 一行表格的分格 |
| <video src="地址"type="video/格式"></video> | 插入视频 |
| <video src="地址"> <source src="地址" type="video/格式"></source> </video> |
插入视频（要设置视频大小，播放方式时首选） |
| <img src ="地址"> | 插入图片 |
| <a href="链接">网页中显示的名字</a> | 插入链接 |
| 扩展语法： |
|---|
| ①整体内容居中（仅对表格无效） |
<style>body{text-align:center}</style> |
| ②部分内容居中 |
<内容类型(img) align="center"> |
| ③音频、视频自动播放 |
autoplay="autoplay" |
| ④音频、视频播放控件 |
controls="controls" |
| ⑤设置内容大小、边框粗细 |
width="500" height="300"border="1"
|
| ⑥链接打开方式 |
原网页：target="_patent"新网页： target="_blank"
|
三、制作一个网页
运用上面的基本语法，我们已经可以制作出一个简单的网页了，具体代码如下：
网页效果请拉到最后查看
<!DOCTYPE html>
<html>
<!-- 头部信息 -->
<head>
<title>我的第一个网页</title>
</head>
<!-- 具体内容 -->
<style>
body{text-align:center}
</style>
<body>
<!-- 显示文字 -->
<h1 align="center">一剪梅·红藕香残玉蕈秋</h1>
<h2 align="center">[宋] 李清照</h2>
<p>
红藕香残玉蕈秋，<br />
轻解罗裳，独上兰舟。<br />
云中谁寄锦书来？<br />
雁字回时，月满西楼。<br />
<br />
花自飘零水自流。<br />
一种相思，两处闲愁。<br />
此情无计可消除。<br />
才下眉头，却上心头。<br />
</p>
<img src ="C:/Users/ASUS/Pictures/有空画画/20131108104858_uGFa5.jpeg" width = "500" height="500">
<!-- 插入表格 -->
<table border="1" align="center">
<!-- tr表示一行数据 -->
<tr>
<td>姓名</td>
<td>班级</td>
<td>成绩</td>
</tr>
<tr>
<td>小王</td>
<td>4班</td>
<td>99</td>
</tr>
</table>
<video width="500" height="300" autoplay="autoplay" controls="controls">
<source src="C:/Users/ASUS/Videos/垂钓/1557839808675.mp4" type="video/mp4"></source>
</video>
<!-- 插入链接 -->
<br />
<a href="https://www.baidu.com/?tn=98010089_dg&ch=15" target="_blank" >打开百度搜一搜</a>
</body>
</html>
6. 保存并用浏览器查看
按照下面的步骤保存好后，就可以直接点开该文件查看了。网页效果请拉到最后查看。
四、使同一局域网的用户可以访问该网页
如果需要不同网络下的用户都能访问，则需要购买服务器，在入门时我们可以通过使用Apache实现局域网用户的访问。
在上面例子的前提下，我们对代码稍作修改。
1. 更改代码
①首先，将网页文件（html）、网页中的图片、视频复制到Apache服务器工作路径，如下图。
②然后用subline打开并编辑网页文件（html），将图片、视频地址的前缀地址删除，只保留文件名和类型，代码如下：
<img src ="20131108104858_uGFa5.jpeg"width = "500" height="500">
<video width="500" height="300" autoplay="autoplay" controls="controls">
<source src="1557839808675.mp4" type="video/mp4"></source>
</video>
③保存修改!!!!
2. 开启服务器
①找到Apache的工作路径，再找到bin文件夹。
②打开bin文件夹，
双击ApacheMonitor。
③查看电脑界面的右下角，找到ApacheMonitor，右键点击它，选择
Open Apache Monitor。
④在控制版面
选择start开启服务器，同理当我们使用完毕后也在这里关闭服务器。成功开启服务器后，localhost前的红点变成绿色。
3. 在浏览器访问我们制作的网页
在浏览器的地址栏输入127.0.0.1/你的网页文件名，记得加后缀!!!我的是http://127.0.0.1/test.html，然后按下回车键就可以访问啦！局域网可以是同一个WiFi、热点，如果你希望别人也能访问，尝试让你和他处于同一局域网下，记得开启服务器！
网页效果整体预览
网友评论