1_HTML知识回顾

html的开发模式

  • 有两种开发模式：

  • b/s browser/server 在浏览中输出网址就可以访问远程数据了

  • c/s client/server 要开发客户端 需要成本 需要客户更新

web标准

  • 结构层 就是html
  • 样式层 就是css
  • 行为层 就是JavaScript

性质理解

开端 & 后端 针对技术人员

前台 & 后台 针对的非技术人员，使用我们产品的客户

什么是HTML？

hyptertext markup language 超文本标记语言

html标签的形式

<!-- 双标签 -->
<tagname attr="value"></tagname>
<!-- 单标签 -->
<tagname attr="value" />

1、骨架标签

在vscode当中，输入叹号 + tab/enter即可快速创建骨架

image-20221012174447758

image-20221012174433614

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2、html文本标签

换行：br

image-20221012174646710

加粗：b和strong

image-20221012174658204

删除线：del与s

image-20221012174746793

下划线：ins与u

image-20221012174754485

预格式：pre

​ image-20221012174800141

 pre元素中允许的文本可以包含物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签，比如<a>标签放到<pre>块中时，就像放在HTML/XHTML文档的其他部分中一样即可。

下标文本：sub

image-20221012174818094

下标文本将会显示在当前文本流中字符高度的一半为基准线的下方

上标文本: sup

image-20221012174830367

上标文本将会显示在当前文本流中字符高度的一半为基准线的上方。

标题标签：h1 - h6

image-20221012174944184

段落标签:p

  • 段落中的文本会根据浏览器窗口的大小自动换行。
  • 段落和段落之间有空隙，空隙的本质是外边距margin。

超链接标签：a

<a href="http://www.baidu.com" target="_blank">百度</a>
<!--
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。
-->

  • 默认情况下，链接将以以下形式出现在浏览器中

  • 一个未访问过的链接显示为蓝色字体并带有下划线。

  • 访问过的链接显示为紫色并带有下划线。

  • 点击链接时，链接显示为红色并带有下划线。

  • 请使用 CSS 来改变链接的样式。

3、html列表标签

参考链接

4、html行块标签

行内元素和块级元素的区别

参考链接

5、html实体标签

空格 &nbsp；&emsp; 全角  &ensp;半角
大于符号  &gt; greater than
小于符号 &lt;  lower than

超级链接

超级链接是HTML中极其精彩的设计。

网页之所以让人感觉功能无限，丰富多彩，就在于网页上的超级链接，当我们点击超级链接时，可以跳转到一个新的页面，查看该链接对应的内容。

在一层一层的链接中，网站的内容得到极大的延展，用户也得以从互联网上获取海联的信息。

本篇我们就来讲解下超级链接的使用。

跳转到指定网页

可以使用超级链接跳转指定网址的页面，例如下面的例子会跳转到百度：

<a href="http://www.baidu.com">百度</a>

跳转当前网站其他网页

href属性也可以指向当前网站的其他网页，例如：

<a href="1.html">网页1</a>
<a href="pages/2.html">网页2</a>

在新窗口中打开网页

有时候，我们点击超级链接时，并不希望新网页替换当前网页，而是弹出一个新窗口加载新页面，这样的好处是还可以轻松返回查看老页面。

此时可以使用target属性，当target属性值为_blank时，点击超链接会弹出新窗口打开网页，实例如下：

<a href="http://www.baidu.com" target="_blank">百度</a>

表单组件

表单构成

  • 提示性文字：提示用户如何操作（一般由placeholder属性完成）
  • 表单域：相当于一个容器，包含若干表单控件
  • 表单控件：具体的功能项（按钮，下拉列表，输入框等）

表单控件

image-20221012175729636

image-20221012175801933

表单制作

<body>
    <font color="red" face="" size="5">
        <p style="text-align: center;">用户注册表单</p>     /*标题*/
    </font>
    <hr color="black" width="1000" size="2">       /*水平分割线*/
    <form action="#" method="GET">                 /*后端服务器*/
    <table style="text-align: center;">            /*创建一个表格,将内容设置为居中*/
        <tr>
            <td>
                <label>用户名：</label>
            </td>
            <td style="text-align: left;" width="500">
                <input type="text" placeholder="请输入用户名">
            </td>
            <td>
                <font color="red" size="1">用户名长度为4-16个字符</font>
            </td>
        </tr>
        <tr>
            <td>
                <label>密&nbsp;&nbsp;&nbsp;码：</label>
            </td>
            <td style="text-align: left;">
                <input type="password" placeholder="请输入密码">
            </td>
            <td>
                <font color="red" size="1">密码长度为6个字符</font>
            </td>
        </tr>
        <tr>
            <td style="text-align: center;" width="400">
                <label>确认密码：</label>
            </td>
            <td style="text-align: left;">
                <input type="password" placeholder="请确认密码">
            </td>
            <td>
                <font color="red" size="1">重复密码</font>
            </td>
        </tr>
        <tr>
            <td>
                <label>性别：</label>
            </td>
            <td style="text-align: left;">
                <input type="radio" name="sex" id="r1" value="1" checked>  /*单选按钮*/
                <label for="r1">男</label>
                <input type="radio" name="sex" id="r2" value="0">
                <label for="r2">女</label>
            </td>
        </tr>
        <tr>
            <td>
                <label> 出生日期：</label>
            </td>
            <td style="text-align: left;">
                <input type="date">
            </td>
        </tr>
        <tr>
            <td>
                <label>爱好：</label>
            </td>
            <td style="text-align: left;">
                <input type="checkbox" value="体育" id="ch1">    /*复选按钮*/
                <label for="ch1">游泳</label>
                <input type="checkbox" value="旅游" id="ch2">
                <label for="ch2">旅游</label>
                <input type="checkbox" value="音乐" id="ch3">
                <label for="ch3">音乐</label>
                <br><br>
                <input type="checkbox" value="影视" id="ch4">
                <label for="ch4">影视</label>
                <input type="checkbox" value="追星" id="ch5">
                <label for="ch5">追星</label>
                <input type="checkbox" value="写作" id="ch6">
                <label for="ch6">写作</label>
            </td>
            <td>
                <font color="red" size="1">至少选择三项</font>
            </td>
        </tr>
        <tr>
            <td>
                <label>个人介绍：</label>
            </td>
            <td style="text-align: left;">
                <textarea cols="20" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td>
                <label>验证码：</label>
            </td>
            <td style="text-align: left;">
                <input type="number" placeholder="请输入验证码">
                <label>791216</label>
            </td>
            <td>
                <font color="red" size="1">请输入验证码</font>
            </td>
        </tr>
        <tr rowspan="3" style="text-align: right;">
            <td >
                <input type="file">
            </td>
        </tr>
    </table>
    <hr color="black" width="1000" size="2">
    <table>
        <tr rowspan="3" style="text-align: right;">  /*此处rowspan是使单元格跨行*/
            <td width="1100">
            <input type="submit" value="确认">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" value="重置">
            </td>
        </tr>
    </table>
    </form>
</body>

img

这是最基础的表单制作，较为简单。可以根据情况对表单进行背景图片或颜色以及图片的添加，并将表单完善。

框架标签

参考链接

posted @ 2022-10-12 18:12  澜璨  阅读(40)  评论(0)    收藏  举报