初学者html的自我修养课程表和登录界面表_要求有以下页面:登录页面主页详情页需要涉及到的知识点:列表,表单,表格,三栏页面-CSDN博客

本文链接：https://blog.csdn.net/qq_59631426/article/details/121639423

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
例子解释
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

HTML 标题

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

实例

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

实例

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

实例

<a href="http://www.baidu.com.cn">This is a link</a>

HTML 图像

HTML 图像是通过 <img> 标签进行定义的。

实例

<img src="FENGJING.jpg" width="104" height="142" />

学习HTML的思维导图

通过以上知识，做出了我的第一个html文件

课程表练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <table>
        <caption>课程表</caption>
        <tr>
            <td colspan="1" rowspan="1">项目</td>
            <td colspan="5" rowspan="1">上课</td>
            <td colspan="2" rowspan="1">休息</td>
        </tr>
        <tr>
            <td colspan="1" rowspan="1">星期</td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
        </tr>
        <tr>
            <td rowspan="4" colspan="1">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td rowspan="4" colspan="1">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>计算机</td>
            <td>英语</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>政治</td>
            <td>英语</td>
            <td>体育</td>
            <td>历史</td>
            <td>地理</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td rowspan="2" colspan="1">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>物理</td>
            <td>计算机</td>
            <td>英语</td>
            <td rowspan="2">休息</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>数学</td>
            <td>地理</td>
            <td>历史</td>
            <td>化学</td>
            <td>计算机</td>
        </tr>
    </table>
    <style>
        table {
            width: 800px;
            height: 400px;
            text-align: center;
            border-collapse: collapse;
            border: 5px double blue;
            table-layout: auto;
            empty-cells: hide;
        }
        
        table tr th,
        table tr td {
            border: 5px double blue;
        }
    </style>

</body>

</html>```

效果图

登录界面表单联系

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我是关卡：表单练习</title>

</head>

<body>
    <div>
        <img src="F:\VS Code相关\03.表单练习\images\bg.jpg" id="background">
        <img src="F:\VS Code相关\03.表单练习\images\logo.png" width="80" height="80" align="center">
        <h1 align="center">用户注册</h1>
    </div>
    <form action="" align="center">
        用户名称：
        <input type="text" placeholder="请输入您的用户名！">
        <br>登录密码：
        <input type="text" placeholder="请输入您的密码！">
        <br>重复密码：
        <input type="text" placeholder="请输入您的确认密码！">
        <br>电子邮箱：
        <input type="text" placeholder="请输入您的邮箱！">
        <br>性别：
        <input type="radio">男<input type="radio">女
        <br>职业:
        <select name="occupation">
        <option value="1">学生</option>
        <option value="1">教师</option>
        <option value="1">教导主任</option>
        <option value="1">其他</option>
    </select>
        <br>爱好：
        <textarea name="" id="" cols="30" rows="10" placeholder="请罗列您的爱好！"></textarea>
        <br><input type="button" value="注册">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="重置">

    </form>
</body>

</html>

效果图