前言
本来学Python学得好好儿的,被突入其来的网课所打断(开学了),那就天天打开学习HTML吧。
希望Emisaka下学期别再期末临阵磨枪了。
HTML介绍
- 什么是 HTML?
- HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
代码
人狠话不多,开始上代码
大概这个样子
Demo1:
<!DOCTYPE html>
<html>
<head>
<title>我的第一个HTML</title>
</head>
<body>
这是我的第一个HTML文件
</body>
</html>
Demo2 :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>我是谁?</p>
<p>我在哪儿?</p>
<hr />
<p>使用HTML制作网页时可以通过br标记<br/>可以实现效果</p>
</body>
</html>
Demo3 :
<!DOCTYPE html>
<html>
<head>
<title>SYY的网页</title>
</head>
<body>
<h4>我是标题</h4>
<br>我是默认格式的文本<br />
<br><b>我是加黑字体</b><br />
<br><i>我是倾斜字体</i><br />
<br><u>我是下划线字体</u><br />
<font face="微软雅黑" size="7" color="green">我是7号绿色文本,我的字体是微软雅黑</font>
</body>
</html>
Demo4 :
<!-- 图像标记 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SYY的网页</title>
</head>
<body>
<img src="C:\Users\17867\Pictures\Saved Pictures\guanzhujiaran.jpg" width="450" height="800" border="2" />
</body>
</html>
Demo5 :
<!-- 演示表格的用法 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>枝江大学欢迎您</title>
</head>
<!-- <tr>:行<td>:单元格 <th>:单元行、自动居中加粗-->
<body>
<h1 align="center"><b>枝江大学成绩单</b></h1>
<table border="1" width="400" align="center" cellspacing="0" cellpadding="0">
<tr align="center">
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr align="center">
<td>嘉然</td>
<td>130</td>
<td>90</td>
<td>80</td>
</tr>
<tr align="center">
<td>乃琳</td>
<td>145</td>
<td>80</td>
<td>70</td>
</tr>
<tr align="center">
<td>贝拉</td>
<td>60</td>
<td>60</td>
<td>150</td>
</tr>
<tr align="center">
<td>向晚</td>
<td>59</td>
<td>59</td>
<td>59</td>
</tr>
<tr align="center">
<td>珈乐</td>
<td>缺考</td>
<td>缺考</td>
<td>缺考</td>
</tr>
</table>
</body>
</html>
Demo6:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SYY的网页</title>
</head>
<body>
<form action="demo1.html" method="post" name="登录界面">
用户名:<input type="text" name="username" /> <br />
密码: <input type="password" name="psw" /> <br />
<input type="submit" value="提交" /> <br />
</form>
</body>
</html>
Demo7:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>会员注册</title>
</head>
<body>
<fieldset>
<legend align="center"><font face="微软雅黑" size="5">注册新用户</font></legend>
<form acton="#" method="post">
<table align="center" cellspacing="1" cellpadding="2">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="password" />
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
</td>
</tr>
<tr>
<td>兴趣:</td>
<td>
<input type="checkbox" name="hobby" value="film" /> 看电影
<input type="checkbox" name="hobby" value="code" /> 敲代码
<input type="checkbox" name="hobby" value="game" /> 打游戏
</td>
</tr>
<tr>
<td>提交头像:</td>
<td>
<input type="file" name="pohto" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
<input type="reset" value="清空重填" />
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
Demo8:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SYY的网页</title>
</head>
<body>
评论:<br />
<form method="POST" action="demo1.html">
<textarea rows="5" cols="50" name="comment">输入评论请文明用语!</textarea><br />
<input type="submit" value="提交评论" />
</form>
</body>
</html>
打卡完毕,感谢观看,请点个赞再走吧(╹▽╹)