html教案

前端
web
发布日期:   2024-09-02
更新日期:   2025-02-12
文章字数:   3.5k
阅读时长:   14 分
阅读次数:  

前言

这一门课目前是面向零基础的高一新生，你需要通过编程的方式来制作一个属于你自己的网站，我知道，有很多同学是比较迷茫的，你可能自己也不知道自己为什么就选择了这个专业，你甚至不知道这个专业是做什么的，这很正常，请不要焦虑，也不用迷茫，车到山前必有路，不用担心英语不好或者数学不好，你只要知道我们软件专业不就是开发软件而已嘛，请相信这是一门非常简单的课程，学习的过程一定是轻松快乐的，你什么都不用想，反正完成我要求的任务，到最后回过头来看，你绝对想象不到自己会制作出什么样东西，不信的话可以在平台上看看其他班的的作品。

对于学习软件专业的同学，开发一款属于自己的软件，的确是一件很酷的事情，这是你努力学习的成果，也是你智慧的结晶。可是，我们到底要做一个什么样的东西？每个人都有无数的奇思妙想，各种软件应用千奇百怪，但是你目前需要学习基础的知识，需要跟着我一起做我设计的项目，之后便可触类旁通，将你的想象变成现实。

如果你很好奇，在做之前就想知道项目的成品是什么，那没问题，请使用微信小程序搜索海职同学圈，这实际上就是一个仿照版的朋友圈，我甚至对朋友圈的一些我不满意的地方进行了优化改造，变得更加的简洁易用。

我整个假期很忙，终于在8月初的时候有点时间，我是在8月几号的时候新建的项目文件夹，然后用了两周的时间开发出来，实际上是一周时间开发，一周时间调试，因为在8月20号的时候有一款国产的3A游戏上架，我要玩，所以就赶工完成了，可能还会有很多bug，懒得找了，你们在使用过程中遇到就给我说吧，我前前后后已经排查了几十个bug了，是真滴累。

软件使用

  1. 打开HBuilderX
  2. 左上角-文件-新建-项目，选择普通项目中的空项目，随便取一个项目名称
  3. 右键你刚才创建的项目文件夹，新建一个html文件

HTML4

一、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>

behavior：behavior属性的参数值为alternate、scroll、slide中的一个，分别表示文字来回滚动、单方向循环滚动、只滚动一次

direction属性::文字滚动的方向，属性的参数值有down、left、right、up共四个单一可选值，分别代表滚动方向向下、向左、向右、向上

scrollamount：文字滚动的速度（默认为6）

图片标签

<img width="200" src="图片.jpg">

  • src：图片路径，可以是相对路径和绝对路径

  • width：图片宽度，单位是像素，例如： 200px或200。

  • height ：图片高度， 单位是像素（一般我们就修改宽度就可以了，因为高度也会等比例变化的，同时设置反而容易让照片变形）

    注意：相对路径中的 ./表示在本级目录下，也可以省略不写

视频标签

<video src="./123.mp4" controls autoplay height="500px" width="200px"></video>

  • src：视频路径，可以是相对路径和绝对路径

  • width：视频宽度，单位是像素，例如： 200px或200。

  • height ：视频高度， 单位是像素（一般我们就修改宽度就可以了，因为高度也会等比例变化的，同时设置反而容易让照片变形）

    注意：相对路径中的 ./表示在本级目录下，也可以省略不写

  • controls：如果出现该属性，则向用户显示控件，比如播放按钮。

  • autoplay：如果出现该属性，则视频在就绪后马上播放。

超链接标签

<!-- 跳转其他网页 -->
<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>

注意1：若浏览器无法打开文件，则会引导用户下载。

注意2：若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称。

列表标签

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>

常用属性如下：

  1. rows 属性：指定默认显示的行数，会影响文本域的高度。
  2. cols 属性：指定默认显示的列数，会影响文本域的宽度。
  3. 不能编写 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>
文章作者: 打工码农
文章链接: http://10.163.72.39:4000/2024/09/02/html%E6%95%99%E6%A1%88/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 打工码农 !
前端
 上一篇
css教案 css教案
软件班，css教案，我们之后就要对页面进行美化了，对毛坯房进行装修了
2024-10-25 web
APP
下一篇 
JavaScript教案 JavaScript教案
23软件班，本学期JavaScript笔记，笔记帮你记好了，快来复习巩固吧
2024-08-21 web
JavaScript
  目录