学习HTML(一)

前言

本来学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>

打卡完毕,感谢观看,请点个赞再走吧(╹▽╹)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值