前言
这一门课目前是面向零基础的高一新生，你需要通过编程的方式来制作一个属于你自己的网站，我知道，有很多同学是比较迷茫的，你可能自己也不知道自己为什么就选择了这个专业，你甚至不知道这个专业是做什么的，这很正常，请不要焦虑，也不用迷茫，车到山前必有路，不用担心英语不好或者数学不好，你只要知道我们软件专业不就是开发软件而已嘛，请相信这是一门非常简单的课程，学习的过程一定是轻松快乐的，你什么都不用想，反正完成我要求的任务，到最后回过头来看，你会不知不觉制作出以前你想象不到的东西，不信的话可以在平台上看看其他班的的作品。
对于学习软件专业的同学，开发一款属于自己的软件，的确是一件很酷的事情，这是你努力学习的成果，也是你智慧的结晶。可是，我们到底要做一个什么样的东西？每个人都有无数的奇思妙想，各种软件应用千奇百怪，但是你目前需要学习基础的知识，需要跟着我一起做我设计的项目，之后便可触类旁通，将你的想象变成现实。
软件使用
- 打开HBuilderX
- 左上角-文件-新建-项目，选择普通项目中的基本HTML项目，随便取一个项目名称
- 双击项目目录中的
index.html打开网页，并打开右上方的预览，就可以一边写代码，一边看到效果了
提示：代码写好之后，记得同时按下ctrl+s键保存
一、HTML标准结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<!-- 代码写在这里 -->
</body>
</html>各位同学不用纠结如何写出html的标准结构，很多开发者工具都可以一键生成，比如hbuildx新建项目的时候就有，或者输入html也可以，在vs code中，输入!，随后回车即可快速生成标准结构。
<!DOCTYPE html>是HTML 的文档声明，作用是告诉浏览器当前网页的版本，<!DOCTYPE html>就是声明用的最新版的html5，其实不声明也行，现在的浏览器都默认当作html5处理，毕竟html5都推出很多年了。
lang="zh-CN"是设置浏览器的语言为中文，设置这个有什么用呢？其实用户是看不到的，这个设置主要是给浏览器看的，我举一个例子，假如你写的网页是用中文写的，但是你却告诉浏览器你的网站语言是英文，那么用户在打开你的网站的时候，浏览器会问弹一个框出来问你是否要翻译，很烦，所以我们用什么语言写的，就告诉浏览器我们网站用的什么语言，不要欺骗浏览器。
还有一个作用是有利于搜索引擎优化，比如说百度会默认将中文语言的语言排在前面。
<title>网页标题</title>是设置网页的标题，之后还会介绍如何设置网页标题旁边的图标。
<meta charset="UTF-8"/>声明字符的编码，UTF-8也叫万国码，包含世界上所有语言的：所有文字与符号。
补充：注释
注释是程序员记笔记的方式，你如果想在你的程序里写点笔记，我们通常叫做注释，是对我们程序的解释，以防别人看不懂，或者三天之后的我们自己看不懂，你可以加上注释，注释是不会被程序当作代码执行的
注释快捷键：crtl + /
小技巧：在按下crtl + /可以取消注释
二、HTML常用标签
排版标签
| 标签名 | 标签含义 |
|---|---|
| h1-h6 | 标题标签 |
| p | 段落标签 |
| div | 容器标签（通常用于划分区域） |
<body>
<h1>你好</h1>
<h2>你好</h2>
<h3>你好</h3>
<h4>你好</h4>
<h5>你好</h5>
<h6>你好</h6>
<p>你好</p>
<div>你好</div>
</body>练习：在网页中，写出五种不同大小的网页标题，标签内容为：我很帅（内容可以自己创新）
按钮标签
<button>我是一个按钮</button>练习：在网页中添加一个按钮，标签内容为：点击查看我的帅照（内容可以自己创新）
滚动标签
<marquee behavior="alternate" direction="right">点我抽大奖</marquee>重点知识：
在开始标签与结束标签中间的是标签内容
在开始标签内部的是标签属性，标签属性和标签属性之间用空格隔开
marquee标签的属性：
- behavior:可选参数：alternate（来回滚动）、scroll（单方向循环滚动）、slide（只滚动一次）
- direction: 文字滚动的方向，属性的参数值有down（向下）、left（向左）、right（向右）、up（向上）
- scrollamount：文字滚动的速度（默认为6）
练习：在网页中制作一个滚动标签，内容为：欢迎来参观我的网站，要求单方向循环滚动，方向向上
图片标签
图片标签是单标签，只有开始标签，没有结束标签，当然也没有标签内容
<img width="200" src="图片.jpg">src：图片路径，可以是相对路径和绝对路径（相对路径中的
./表示在本级目录下，也可以省略不写）width：图片宽度，单位是像素，例如： 200px或200。
height ：图片高度， 单位是像素（一般我们就修改宽度就可以了，因为高度也会等比例变化的，同时设置反而容易让照片变形）
练习：在网页中插入一张图片，要求图片的高度为500像素，宽带为1000像素
视频标签
<video src="./123.mp4" controls autoplay muted loop height="500px" width="200px"></video>src：视频路径，可以是相对路径和绝对路径
width：视频宽度，单位是像素，例如： 200px或200。
height ：视频高度， 单位是像素（一般我们就修改宽度就可以了，因为高度也会等比例变化的，同时设置反而容易让照片变形）
注意：相对路径中的
./表示在本级目录下，也可以省略不写controls：如果出现该属性，则向用户显示播放控件。
autoplay：如果出现该属性，则视频在就绪后自动播放。
muted：如果出现该属性，则默认静音播放
loop：如果出现该属性，则循环播放
常见问题1：Hbuilder软件的内置浏览器不支持视频，所以要点击菜单栏—运行—运行到浏览器—chrome
常见问题2：很多同学发现加上了autoplay属性之后，视频仍然不会自动播放，这个也是有故事的，因为以前有很多开发者，故意用一些视频吓用户，别人一打开网页，就自动播放一个飞过来的瓶子或者冲过来的鬼，坏得很，所以现在如果要设置自动播放，就必须设置静音
练习：利用video标签制作网页动态背景，具体方法为设置视频的宽度高度充满整个屏幕，设置不显示播放控件，循环播放，自动播放，静音
超链接标签
超链接标签实现网页之间的跳转
<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a>
<!-- 跳转本地网页 -->
<a href="./login.html" target="_self">已有账号，立即登录</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>href指定要跳转到的具体地址
target属性是控制跳转时如何打开页面（默认是在本窗口打开）
_self是在本窗口打开_blank是在新窗口打开
超链接标签还可以跳转到文件
<!-- 浏览器能直接打开的文件 -->
<a href="./1.jpg">图片</a>
<a href="./1.mp4">视频</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./1.zip">压缩包</a>
<!-- 强制触发下载 -->
<a href="./1.mp4" download="电影.mp4">下载电影</a>若浏览器无法打开文件，则会引导用户下载。
若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。
练习1：在网页中添加一个超链接标签，标签内容为：点我去编程部落。点击之后能跳转到编程部落
练习2：在网页中添加一个超链接标签，标签内容为：点我看帅照 。点击之后能跳转到一张图片
练习3：在网页中添加一个超链接标签，标签内容为：点击下载学习资料 。点击之后能下载一个压缩包
列表标签
1.有序列表
<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>2.无序列表
<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>表格
表格相关标签
table：表格标签tr：行标签，每一行td：单元格标签，每一个单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table>
<!-- 第一行 -->
<tr>
<td>姓名</td>
<td>年龄</td>
<td>成绩</td>
</tr>
<!-- 第二行 -->
<tr>
<td>张三</td>
<td>18</td>
<td>88</td>
</tr>
<!-- 第三行 -->
<tr>
<td>李四</td>
<td>20</td>
<td>80</td>
</tr>
</table>
</body>
</html>table标签的常用属性
width：设置表格宽度。height：设置表格最小高度。border：设置表格边框宽度。cellspacing： 设置单元格之间的间距。
td标签常用属性
width：设置单元格的宽度，同列所有单元格全都受影响。heigth：设置单元格的高度，同行所有单元格全都受影响。align：设置单元格的水平对齐方式（left、center、right）默认是左对齐。valign：设置单元格的垂直对齐方式（top、center、bottom）默认是居中对齐。rowspan：指定要跨的行数。colspan：指定要跨的列数。
常用表单控件
文本输入框
<input type="text" placeholder="请输入用户名">数字输入框
<input type="number" placeholder="请输入售价">密码输入框
<input type="password" placeholder="请输入密码">常用属性如下：
placeholder：输入框的提示文字
value 属性：输入框的默认输入值。
maxlength 属性：输入框最大可输入长度。
单选框
<input type="radio" name="sex" checked>女
<input type="radio" name="sex">男常用属性如下：
name 属性：数据的名称，注意：想要单选效果，多个 radio 的 name 属性值要保持一致。
checked 属性：让该单选按钮默认选中。
value 属性：提交的数据值。
复选框
<input type="checkbox">玩游戏
<input type="checkbox" checked>睡觉
<input type="checkbox">吃零食常用属性如下:
checked 属性：让该复选框默认选中。
value 属性：提交的数据值。
多行输入框
<textarea name="msg" rows="22" cols="10" placeholder="写点什么吧"></textarea>常用属性如下：
- rows 属性：指定默认显示的行数，会影响文本域的高度。
- cols 属性：指定默认显示的列数，会影响文本域的宽度。
- 不能编写 type 属性，其他属性，与普通文本输入框一致。
下拉框
<select name="">
<option value="">嘉兴</option>
<option value="">金华</option>
<option value="">杭州</option>
<option value="">义乌</option>
</select>综合案例-藏獒直售平台
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 标题标签 -->
<h1>藏獒直售平台</h1>
<!-- 段落标签 -->
<p>快来我们的网站上买藏獒，买不了吃亏，买不了上当</p>
<!-- 滚动标签 -->
<marquee behavior="" direction="right" scrollamount="30">双11大促，快来抢红包雨</marquee>
<!-- 第一张图片要求能够双击打开，通过超链接标签实现 -->
<a href="./image/ao1.jpg">
<img src="./image/ao1.jpg" alt="" />
</a>
<!-- 图片标签 -->
<img src="./image/ao2.jpg" alt="" />
<img src="./image/ao3.jpg" alt="" />
<img src="./image/ao4.jpg" alt="" />
<img src="./image/ao5.jpg" alt="" />
<img src="./image/ao6.jpg" alt="" />
<!-- 视频标签 -->
<video width="640px" controls src="./img/ao.mp4"></video>
<!-- 列表标签 -->
<h3>你如果想竖着排就使用列表标签</h3>
<ol>
<li>
<img src="./image/ao2.jpg" alt="" />
</li>
<li>
<img src="./image/ao3.jpg" alt="" />
</li>
<li>
<img src="./image/ao4.jpg" alt="" />
</li>
</ol>
<!-- 表格标签 -->
<h3>藏獒的价格</h3>
<table border="1" width="300" cellspacing="0">
<tr>
<td>藏獒品阶</td>
<td>藏獒价格</td>
</tr>
<tr>
<td>神兽级</td>
<td>1000</td>
</tr>
<tr>
<td>仙兽级</td>
<td>500</td>
</tr>
<tr>
<td>凡品级</td>
<td>50</td>
</tr>
</table>
<!-- 单选 -->
<h3>请选择藏獒的品阶</h3>
<input type="radio" name="pinjie"/>神兽级
<input type="radio" name="pinjie"/>仙兽级
<input type="radio" name="pinjie"/>凡品级
<!-- 多选 -->
<h3>请选择藏獒的颜色</h3>
<input type="checkbox" />红色
<input type="checkbox" />蓝色
<input type="checkbox" />粉色
<input type="checkbox" />随便
<!-- 下拉框 -->
<h3>请选择藏獒的类型</h3>
<select name="">
<option value="" selected>攻击型</option>
<option value="">防御型</option>
<option value="">辅助型</option>
</select>
<h3>请登录后购买</h3>
<!-- 文本输入框 -->
<input type="text" placeholder="请输入你的账号名"/>
<!-- 密码输入框 -->
<input type="password" placeholder="请输入密码"/>
<!-- 数字输入框 -->
<input type="number" maxlength="5" placeholder="请输入你要购买的数量"/>
<!-- 按钮 -->
<button>确认购买</button>
</body>
</html>
