心得感悟

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、热点，如果你希望别人也能访问，尝试让你和他处于同一局域网下，记得开启服务器！

【Java学习】HTML入门（上）——创建相同局域网的用户可以访问的网页