HTML（1）前端

最新推荐文章于 2023-04-06 16:41:41 发布
最新推荐文章于 2023-04-06 16:41:41 发布
阅读量207 收藏
点赞数
分类专栏： 前端 文章标签： html 前端 前端框架 web app web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34516746/article/details/123463065
版权

1 HTTP概述

1.1 网络传输三大基石

  • 三大基石：
    URL，HTTP协议，HTML
  • URL：
    （1）在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址。
  • HTTP协议：
    http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有功之臣，因为它使得开发和部署是那么的直截了当。
  • HTML：
    HTML称为超文本标记语言。
    demo

1.2 什么是HTML

  • HTML 指的是超文本标记语言: HyperText Markup Language。
    （-）标记：和标签一样，是由尖括号包围起来的关键词(如<html> <body> <head>)，分为双标签（如<p></p>）和单表签（如<br/>）。
    （-）语言：HTML是一个描述网页的语言
  • HTML的作用：
    学习HTML就是学习各种各样的标签，然后组成一个页面，这个页面可以被浏览器解析，解析完以后可以在浏览器中将页面进行展示。

1.3 HTML标准结构

（1）先用普通文本文档新建一个文本，将文本的后缀改为.html 或者 .htm （大小写不区分）
（2）标准结构如下：

<html>
        <head></head>
        <body>
                this is my first html....
        </body>
</html>

（3）运行界面：让浏览器解析（直接使用浏览器将文件打开即可）：
demo

2 HTML的标签的使用

2.1 html，head，body标签

（1）html标签：定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
（2）head标签：里面放的是页面的配置信息。
head标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

  • 下面这些标签可用在 head 部分：<title>、<meta>、<link>、<style>、 <script>、 <base>
  • 应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签之前。
  • 文档的头部经常会包含一些 <meta> 标签，用来告诉浏览器关于文档的附加信息。
    （3）body标签：里面放的就是页面上展示出来的内容。
    body 元素是定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body是用在网页中的一种HTML标签，标签是用在网页中的一种HTML标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容！

2.2 head中的标签使用

<html>
        <!-- 这是一个注释，注释的快捷键是ctrl+shift+/-->
        <!--
                head标签中：放入：页面的配置信息
                head标签中可以加入：
                <title>、<meta>、<link>、<style>、 <script>、 <base>。
        -->
        <head>
                <!--页面标题-->
                <title>百度一下，你就知道</title>
                <!--设置页面的编码，防止乱码现象
                        利用meta标签，
                        charset="utf-8" 这是属性，以键值对的形式给出  k=v a=b 
                        告诉浏览器用utf-8来解析这个html文档
                -->
                <meta charset="utf-8" /><!--简写-->
                <!--繁写形式：（了解）-->
                <!--<meta http-equiv="content-type" content="text/html;charset=utf-8" />-->
                <!--页面刷新效果-->
                <!--<meta http-equiv="refresh" content="3;https://www.baidu.com" />-->
                <!--页面作者-->
                <meta name="author" content="jaydenAnd11" />
                <!--设置页面搜索的关键字-->
                <meta name="keywords" content="html learn" />
                <!--页面描述-->
                <meta name="description" content="html learn" />
                <!--link标签引入外部资源-->
                <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
        </head>
        <!--
                body标签中：放入：页面展示的内容
        -->
        <body>
                this is a html..你好
        </body>
</html>

2.3 body中可用标签

2.3.1 文本标签

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>文本标签</title>
        </head>
        <body>
                <!--文本标签-->
                <!--下面的文字就是普通的文本，文本编辑器中的任何效果：比如空格，换行 都不影响页面，
                        页面想要实现效果 必须通过标签来实现
                -->
                媒体：为人父母，                                     要不要“持证上岗”？
                媒体：为人父母，要不要“持证上岗”？
                媒体：为人父母，要不要“持证上岗”？
                媒体：为人父母，要不要“持证上岗”？
                <!--标题标签
                        h1-h6  字号逐渐变小，每个标题独占一行，自带换行效果
                        h7之后都属于无效标签，但是浏览器也不会报错，而是以普通文本的形式进行展现
                -->
                <h1>媒体：为人父母，要不要“持证上岗”？</h1>
                <h2>媒体：为人父母，要不要“持证上岗”？</h2>
                <h3>媒体：为人父母，要不要“持证上岗”？</h3>
                <h4>媒体：为人父母，要不要“持证上岗”？</h4>
                <h5>媒体：为人父母，要不要“持证上岗”？</h5>
                <h6>媒体：为人父母，要不要“持证上岗”？</h6>
                <h7>媒体：为人父母，要不要“持证上岗”？</h7>
                <h8>媒体：为人父母，要不要“持证上岗”？</h8>
                <!--横线标签
                        width:设置宽度
                                        300px ：固定宽度
                                        30%：页面宽度的百分比，会随着页面宽度的变化而变化
                        align：设置位置  left ,center,right    默认不写的话就是center居中效果
                -->
                <hr width="300px" align="center"/>
                <hr width="30%" align="center"/>
                
                <!--段落标签：
                        段落效果：段落中文字自动换行，段落和段落之间有空行
                -->
                <p>&nbsp;&nbsp;&nbsp;&nbsp;5月&emsp;26日，“建议父母持合格&lt;父母证&gt;上岗&copy;”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。</p>
                <p>5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。</p>
                <p>5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。5月26日，“建议父母持合格父母证上岗”冲上微博热搜，迅速引发热议。在正在召开的全国两会上，全国政协委员许洪玲建议在社区举办家长课堂，建立“家长教育指导工作室”。针对准备入小学的家长开展相关课程教育，颁发“合格父母”上岗证随学生档案入学。</p>  
                <!--加粗倾斜下划线-->
                <b>加粗</b>
                <i>倾斜</i>
                <u>下划线</u>
                <i><u><b>加粗倾斜下划线</b></u></i>
                <!--一箭穿心-->
                <del>你好 你不好</del>
                
                <!--预编译标签：在页面上显示原样效果-->
                <pre>
				public static void main(String[] args){
				        System.out.println("hello 11....");
				}
                </pre>
                <!--换行-->
                5月26日，“建议父母持合格父母证上岗”冲上微博<br />热搜，迅速引发热议。在正在召开的全国两会上，全国政 
                <!--字体标签-->
                <font color="#397655" size="7" face="萝莉体 第二版">建议父母持合格父母证上岗</font>
        </body>
</html>

在浏览器中有一些特殊标签，会被解析成特定内容：
demo

2.3.2 多媒体标签

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <!--图片
                        src:引入图片的位置
                                引入本地资源
                                引入网络资源
                        width:设置宽度
                        height:设置高度
                        注意:一般高度和宽度只设置一个即可，另一个会按照比例自动适应
                        title:鼠标悬浮在图片上的时候的提示语，默认情况下（没有设置alt属性） 图片如果加载失败那么提示语也是title的内容
                        alt:图片加载失败的提示语
                -->
                <img src="img/ss6.jpg" width="300px" title="这是一个美女小姐姐" alt="图片加载失败"/>
                <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1833909874,761626004&fm=26&gp=0.jpg" />
                <!--音频-->
                <embed src="music/我要你.mp3"></embed>
                <br />
                <!--视频-->
                <embed src="video/周杰伦 - 说好的幸福呢.mp4" width="500px" height="500px"></embed>
                <embed src="//player.video.iqiyi.com/38913f9ed7358c0933e82a03d9b26ec1/0/0/v_19rv8qeokk.swf-albumId=9194699400-tvId=9194699400-isPurchase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
        </body>
</html>

2.3.3 超链接标签

demo

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <!--超链接标签：作用：实现页面的跳转功能
                        href:控制跳转的目标位置
                        target:_self 在自身页面打开 （默认效果也是在自身页面打开）    _blank 在空白页面打开
                --> 
                <a href="文本标签.html">这是一个超链接01</a><!--跳转到本地资源-->
                <a href="">这是一个超链接02</a> <!--跳转到自身页面-->
                <a href="abc">这是一个超链接03</a><!--跳转的目标找不到，提示找不到资源-->
                <a href="https://www.baidu.com" target="_self">这是一个超链接04</a><!--跳转到网络资源-->
                <a href="https://www.baidu.com" target="_blank">这是一个超链接05</a><!--跳转到网络资源-->
                <a href="https://www.baidu.com" target="_blank"><img src="img/ss.jpg" /></a>
        </body>
</html>

2.3.4 锚点标签

应用场合：当一个页面太长的时候，就需要设置锚点，然后可以在同一个页面的不同位置之间进行跳转。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <a name="1F"></a>
                <h1>手机</h1>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <p>华为p40</p>
                <a name="2F"></a>
                <h1>化妆品</h1>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <p>大宝</p>
                <a name="3F"></a>
                <h1>母婴产品</h1>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <p>奶粉</p>
                <a name="4F"></a>
                <h1>图书</h1>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <p>thinking in java</p>
                <a href="#1F">手机</a>
                <a href="#2F">化妆品</a>
                <a href="#3F">母婴产品</a>
                <a href="#4F">书籍</a>
        </body>
</html>

2.4.5 列表标签

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <!--无序列表:
                        type:可以设置列表前图标的样式   type="square"
                        如果想要更换图标样式，需要借助css技术： style="list-style:url(img/act.jpg) ;"
                -->
                <h1>起床以后需要做的事</h1>
                <ul type="square">
                        <li>睁眼</li>
                        <li>穿衣服</li>
                        <li>上厕所</li>
                        <li>吃早饭</li>
                        <li>洗漱</li>
                        <li>出门</li>
                </ul>
                <!--有序列表:
                        type:可以设置列表的标号：1,a,A,i,I
                        start:设置起始标号
                -->
                <h1>学习java的顺序</h1>
                <ol type="A" start="3">
                        <li>JAVASE</li>
                        <li>ORACLE</li>
                        <li>MYSQL</li>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JS</li>
                </ol>  
        </body>
</html>

2.4.6 表格标签

应用场景：在页面布局很规整的时候，可能利用的就是表格。
demo

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <!--表格：4行4列
                        table:表格
                        tr:行
                        td:单元格
                        th:特殊单元格：表头效果：加粗，居中
                        默认情况下表格是没有边框的，通过属性来增加表框：
                        border:设置边框大小
                        cellspacing：设置单元格和边框之间的空隙
                        align="center"  设置居中
                        background 设置背景图片 background="img/ss.jpg"
                        bgcolor :设置背景颜色
                        rowspan:行合并
                        colspan：列合并
                -->
                <table border="1px" cellspacing="0px" width="400px" height="300px" bgcolor="darkseagreen" >
                        <tr bgcolor="bisque">
                                <th>学号</th>
                                <th>姓名</th>
                                <th>年纪</th>
                                <th>成绩</th>
                        </tr>
                        <tr>
                                <td align="center">1001</td>
                                <td>丽丽</td>
                                <td>19</td>
                                <td rowspan="3">90.5</td>
                        </tr>
                        <tr>
                                <td colspan="2" align="center">2006</td>
                                <td>30</td>
                        </tr>
                        <tr>
                                <td>3007</td>
                                <td>小明</td>
                                <td>18</td>
                        </tr>
                </table>
        </body>
</html>

效果：
demo

2.4 框架

2.4.1 内嵌框架

  • 内嵌框架是用于在网页中嵌入一个网页并让它在网页中显示。
  • 添加内嵌框架的语法：URL 指定独立网页的路径.
<iframe src=" URL "></iframe>
  • 代码实例：展示图书
    书籍展示首页
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <iframe src="书籍导航页面.html" height="700px" width="30%"></iframe>
                <!--内嵌框架-->
                <iframe name="iframe_my" width="67%" height="700px" src="img/think in java.jpg"></iframe>
        </body>
</html>

左侧导航页面

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <h1>我喜欢的图书展示</h1>
                <ul>
                        <li>
                                <a href="img/java核心技术.jpg" target="iframe_my">java核心技术</a>
                        </li>
                        <li>
                                <a href="img/think in java.jpg" target="iframe_my">think in java</a>
                        </li>
                        <li>
                                <a href="img/大话设计模式.jpg" target="iframe_my">大话设计模式</a>
                        </li>
                        <li>
                                <a href="img/深入理解java虚拟机.jpg" target="iframe_my">深入理解java虚拟机</a>
                        </li>
                        <li>
                                <a href="img/算法图解.jpg" target="iframe_my">算法图解</a>
                        </li>
                </ul>
        </body>
</html>

右侧书籍展示页面

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                这是展示列表
        </body>
</html>

2.4.2 邮箱小案例

登录首页.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
用户名：<input type="text"><br>
密&emsp;码：<input type="password"><br>
<a href="邮箱首页.html">登录</a>
</body>
</html>

邮箱首页.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <iframe width="100%" height="100px" src="邮箱上侧页面.html"></iframe>
    <iframe width="20%" height="600px" src="邮箱左侧导航.html"></iframe>
    <iframe width="79%" height="600px" name="右侧主体">老师你好</iframe>
</body>
</html>

邮箱上侧页面.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>欢迎<font color="coral">jayden</font>来到邮箱！</h1>
</body>
</html>

邮箱左侧页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>
            <h1>收信</h1>
        </li>
        <li>
            <h1>写信</h1>
        </li>
        <li>
            <h1>回收站</h1>
        </li>
        <li>
            <h1>关闭</h1>
        </li>
    </ul>
</body>
</html>

2.4.3 frameset

  • frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
  • 如果多个框架用frameset标签，用cols 或 rows进行 行，列的切割。
  • 框架集合：和body是并列的概念，不要将框架集合放入body中。
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <!--框架集合：和body是并列的概念，不要将框架集合放入body中-->
        <frameset rows="20%,*,30%">
                <frame />
                <frameset cols="30%,40%,*">
                        <frame />
                        <frame src="index.html"/>
                        <frame />
                </frameset>
                <frameset cols="50%,*">
                        <frame />
                        <frame />
                </frameset>
        </frameset>
</html>

demo

2.5 form表单

2.5.1 form表单概述和使用

  • 表单的作用：
    表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。
  • 所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
  • 一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
<form action＝"url" method=get|post name="myform" ></form>

-name：表单提交时的名称
-action：提交到的地址
-method：提交方式，有get和post两种，默认为get

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <!--定义form表单:form表单会采集包含的有效数据，提交到后端，进行交互-->
                <!--
                        【1】action属性
                        地址栏信息：
                        http://127.0.0.1:8020/Form%E8%A1%A8%E5%8D%95/aaa?username=nana&pwd=123123
                        
                        ?之前是提交的资源的目标地址
                        ?之后是提交的具体的数据 
                        
                        http ： 信息交互遵照协议 http协议
                        127.0.0.1  ：代表本机的IP地址
                        8020 ：Hbuilder内置服务器的端口号
                        Form%E8%A1%A8%E5%8D%95：指的是你的项目名字：Form表单
                        PS：浏览器的地址栏是不支持中文的，都会转成编码传送，如果你在地址栏看到中文，只是当前的那个浏览器给你一个友好的显示
                        PS:可以使用在线解析工具查看：urlencode
                        aaa:目标资源 --》去当前项目下找aaa了
                        
                        ?后的内容：
                        username=nana&pwd=123123
                        我们写的文本框，密码框等必须要加入一个属性：name
                        然后name属性和具体录入的信息会拼成一个键值对的形式
                        多个键值对之间 ，用&符号进行拼接
                        
                        PS：只有放在form表单中的内容才会被收集并提交
                        
                        【2】method属性：默认情况下不写method属性的时候就相当于method="get"
                        get方式：提交数据可见，不安全，提交数据长度有限制，效率高
                        post方式 ：提交数据不可见，安全，提交数据长度没有限制，效率低
                -->
                <form action="aaa" method="post">
                        用户名：<input type="text" name="username" /><br />
                        密码：<input type="password" name="pwd" /><br />
                        <!--提交按钮-->
                        <input type="submit" />
                </form>
                用户名2：<input type="text" name="username2" />
        </body>
</html>

2.5.2 模拟百度搜索

  • 代码实例
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title>百度一下，你就知道</title>
                <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
        </head>
        <body>
                <form action="https://www.baidu.com/s" method="get">
                        <!--文本框-->
                        <input type="text" name="wd"/>
                        <!--提交按钮-->
                        <input type="submit" value="百度一下"/>
                </form>
        </body>
</html>

2.5.3 表单元素

  • form表单中可以放入的标签 就是表单元素
  • 代码实例：
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <form action="" method="get">
                        <!--表单元素-->
                        <!--文本框:
                                input标签使用很广泛，通过type属性的不同值，来表现不同的形态。
                                type="text"  文本框，里面文字可见
                                表单元素必须有一个属性：name 有了name才可以提交数据,才可以采集数据
                                然后提交的时候会以键值对的形式拼到一起。
                                value:就是文本框中的具体内容
                                键值对：name=value的形式
                                如果value提前写好，那么默认效果就是value中内容。
                                一般默认提示语：用placeholder属性，不会用value--》value只是文本框中的值。
                                
                                readonly只读：只是不能修改，但是其他操作都可以，可以正常提交
                                disabled禁用：完全不用，不能正常提交
                                
                                写法：
                                readonly="readonly"
                                readonly
                                readonly = "true"
                        -->
                        <input type="text" name="uname"  placeholder="请录入身份证信息"/>
                        <input type="text" name="uname2" value="123123" readonly="true"/>
                        <input type="text" name="uname3" value="456456" disabled="disabled"/>
                        <!--密码框:效果录入信息不可见-->
                        <input type="password" name="pwd"  />
                        <!--单选按钮：
                                注意：一组单选按钮，必须通过name属性来控制，让它们在一个分组中，然后在一个分组里只能选择一个
                                正常状态下，提交数据为：gender=on ，后台不能区分你提交的数据
                                不同的选项的value值要控制为不同，这样后台接收就可以区分了
                                
                                默认选中：checked="checked"
                        -->
                        性别：
                        <input type="radio" name="gender" value="1" checked="checked"/>男
                        <input type="radio" name="gender" value="0"/>女
                        
                        <!--多选按钮:
                                必须通过name属性来控制，让它们在一个分组中，然后在一个分组里可以选择多个
                                不同的选项的value值要控制为不同，这样后台接收就可以区分了
                                多个选项提交的时候，键值对用&符号进行拼接：例如下：
                                favlan=1&favlan=3
                        -->
                        你喜欢的语言：
                        <input type="checkbox" name="favlan" value="1" checked="checked"/>java
                        <input type="checkbox" name="favlan" value="2" checked="checked"/>python
                        <input type="checkbox" name="favlan" value="3"/>php
                        <input type="checkbox" name="favlan" value="4"/>c#
                        
                        <!--文件-->
                        <input type="file" />
                        <!--隐藏域-->
                        <input type="hidden" name="uname6" value="123123" />
                        <!--普通按钮：普通按钮没有什么效果，就是可以点击，以后学了js，可以加入事件-->
                        <input type="button" value="普通按钮" />
                        <!--特殊按钮：重置按钮将页面恢复到初始状态-->
                        <input type="reset" />
                        <!--特殊按钮：图片按钮-->
                        <img src="img/java核心技术.jpg" />
                        <input type="image" src="img/java核心技术.jpg" />

                        <!--下拉列表
                                默认选中：selected="selected"
                                多选：multiple="multiple"
                        -->
                        你喜欢的城市：
                        <select name="city" multiple="multiple">
                                <option value="0">---请选择---</option>
                                <option value="1">哈尔滨市</option>
                                <option value="2" selected="selected">青岛市</option>
                                <option value="3">郑州市</option>
                                <option value="4">西安市</option>
                                <option value="5">天津市</option>
                        </select>
                        
                        <!--多行文本框
                                利用css样式来控制大小不可变：style="resize: none;"
                        -->
                        自我介绍：
                        <textarea style="resize: none;" rows="10" cols="30">请在这里填写信息。。</textarea>
                        <br />
                        <!--label标签
                                一般会在想要获得焦点的标签上加入一个id属性，然后label中的for属性跟id配合使用。
                        -->
                        <label for="uname">用户名：</label><input type="text" name="uername" id="uname"/>
                        <!--特殊按钮：提交按钮：具备提交功能-->
                        <input type="submit" />
                </form>
        </body>
</html>

2.5.4 HTML5新增的type类型

  • 代码实例：
<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <form action="" method="get">
                        <!--email:
                                html5的类型可以增加校验
                        -->
                        <input type="email" name="email" />
                        <!--url-->
                        <input type="url" />
                        <!--color-->
                        <input type="color" />
                        <!--number:
                                min:最小值
                                max:最大值
                                step:步长
                                value:默认值：一定在步长的范围中，否则不能提交
                        -->
                        <input type="number" min="1" max="10" step="3" value="4"/>
                        <!--range-->
                        1<input type="range" min="1" max="10" name="range" step="3"/>10
                        <!--date-->
                        <input type="date" />
                        <!--month-->
                        <input type="month" />
                        <!--week-->
                        <input type="week" />
                        <!--提交按钮-->
                        <input type="submit" />
                </form>
        </body>
</html>

2.5.5 HTML5新增属性

					<!--
                            HTML5新增属性：
                            multiple：多选
                            placehoder:默认提示
                            autofocus:自动获取焦点
                            required:必填项
                    -->
                    <input type="text" autofocus="autofocus"/>
                    <input type="text" required="required" />
jayden-leo
关注
专栏目录
前端技术搭建拼图小游戏（内含源码）
官方推荐
06-08 3万+
基于前端HTML、CSS、JS实现建议版拼图小游戏，无论你是否具备前端技术，都可以直接从文中复制源码运行到你的电脑上！
前端技术搭建贪吃蛇小游戏（内含源码）
最新发布
官方推荐
05-29 6万+
利用前端基础HTML、CSS、JS来搭建简易版本贪吃蛇小游戏，内附源码，直接拷贝即可运行，没有前端基础的小伙伴也可以通过文章中的讲解搭建出来！
HTML学习
流苏树的博客
02-17 203
1.网络传输三大基石 三大基石：URL，HTTP协议，HTML URL：在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL（Uniform Resource Locator,统一资源定位符），它是WWW的统一资源定位标志，就是指网络地址。 HTTP协议：http是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII码形式给出；而消息内容则具有一个类似MIME的格式。这个简单模型是早期Web成功的有
获取一个网址https://www.baidu.com/......中的www.baidu.com
热门推荐
LK_qiqiqi的博客
03-29 30万+
可以使用python中的内置模块urllib.parse中的urlparse 以下为urlparse说明 Help on function urlparse in module urllib.parse: urlparse(url, scheme='', allow_fragments=True) Parse a URL into 6 components: <sche...
(成功解决)网页无法打开位于http://www.baidu.com/的网页无法加载，因为:net:ERR_NAME_NOT_RESOLVED
一顿吃不饱的博客
12-14 5万+
网页无法打开位于http://www.baidu.com/的网页无法加载，因为:net:ERR_NAME_NOT_RESOLVED
html中meta http-equiv="refresh"
数据库天地
09-04 1733
&lt;meta http-equiv="refresh" content="0"&gt; 页面定期刷新，如果加url的，则会重新定向到指定的网页，content后面跟的是时间（单位秒），把这句话加到指定网页的&lt;head&gt;&lt;/head&gt;里一般也用在实时性很强的应用中，需要定期刷新的。ajax是局部刷新，该标签是整个页面刷新。 &lt;meta http-equi...
【计算机网络-10】HTTP协议(上)
飞鸽FlyGo-把自己作为一款产品来打磨，提升产品的体验，锻造出最好的自己。
05-08 726
1990年博纳斯.李，发明了万维网(www)，写了第一个Web Server。HTTP协议：浏览器和Web Server之间通信的协议。HTTP协议(Hyper Text Transfer Protocol):应用层协议；目标：是处理客户端和服务端之间的通信。
2024前端面试题！（附答案及解析）（2024.10月最新版）
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 17万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.10月最新版）感谢支持，你们的鼓励是我的动力！
前端十五道html面试题
m0_65450343的博客
04-17 4096
01.说一下对语义化的理解？✅ 对开发者友好，让人更容易读懂，利于代码可读性 对机器友好，让搜索引擎更容易读懂，利于seo 02.说一下iframe有哪些优点和缺点？✅ 优点：展现嵌入的网页；加载速度较慢的内容，如广告；可以跨子域通信； 缺点：iframe会阻塞主页面onload事件；不利于搜索引擎识别；增加http请求； 03.DOCTYPE的作用？严格模式和混杂模式的区别？ ！DOCTYPE告诉浏览器以HTML5标准解析页面，如果不写，则进入混杂模式 严格模式（标准模式）：以w3c标准解析
纯前端将Html导出word
iummiw的博客
11-15 1601
【代码】纯前端将Html导出word。
文件压缩支付加密方式
江小白的博客
04-06 2486
主页：http://www.8tupian.com/zhu.php?u=28042 注册页： http://www.8tupian.com/re.php?u=280421、解压密码加密支付 2、支付宝等对接太麻烦 3、只需要把压缩包分享出去，无需专门给人回复记录密码，比如这里是mima1231.访问这个三方网站 主页：http://www.8tupian.com/zhu.php?u=28042 注册页： http://www.8tupian.com/re.php?u=28042，生成属于自己资源的支付链
ping百度的时候出现ping www.a.shifen.com
05-08 5万+
我PING 百度的时候pinging www.a.shifen.com,我还以为我的电脑中病毒了还是出现什么错误了呢，上网一搜原来这是网站防止黑客恶意攻击的一个手段啊，原来是我孤陋寡闻了，呵呵！ www.a.shifen.com 就是baidu的竞价排名系统，名字就叫"十分系统" ,据说因为最早的时候每一下的点击率可以赚取10分钱，另外就是如果ping的时候不加www的话（即ping bai
网络编程 -- Java之URL统一资源定位符
天行健 君子以自强不息，地势坤 君子以厚德载物。
02-20 782
https://www.baidu.com 统一资源定位符: 统一资源定位符，又叫做网页地址，是互联网上标准的资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。 DNS域名解析 https://www.baidu.com => 183.232.231.172,域名解析就是域名到IP地址的转换过程，它是把域名指向网站空间IP，让人们通过注册的域名可以方便地访问到网站的一种服务。 协议：//ip地址：端口/项目名/资源 示例: package net
从telnet www.baidu.com 80来玩一下http
认知 行动 坚持
10-11 11万+
在之前的博文中，我么用C代码玩过http, 在本文中， 我们用更简单的telnet命令来玩http, 爽一下, 步骤如下： 步骤1：用win + r 打开cmd 步骤2：在cmd中执行telnet www.baidu.com 80， 然后可以看到一个黑色的框框（首先要确保自己的PC可以访问www.baidu.com哈） 步骤3： 然后按
有一个网页地址, 比如百度主页: https://www.baidu.com/ 如何得到它的内容？
ByCool_xingchen的博客
07-27 1662
我使用php文件类函数fopen操作的 其他详细请参考php中文手册https://www.php.net/manual/zh/function.fopen.php fopen的filename也就是第一个参数被当成一个URL，第二个参数是mode为访问类型 我这里使用的是 r：只读方式打开 $readcontents = fopen('https://www.baidu.com/', 'r'); stream_get_contents：读取资源流到一个字符串 $contents = stream_
Vue中v-html解析代码如何修改样式？
qq_43576662的博客
06-16 901
Vue中v-html解析代码如何修改样式？ detail变量中存放的是tinymic富文本中保存的标签内容 <div class='style' v-html='detail'></div> 如果div中的图片本身分辨率很高，展示出来则会出现横向滚动条，图片的大小并不能随着父元素的宽度自适应展示 如果直接设置.style img { width : 80% };,发现并不能生效，并且存在 此时可以加上 >>> 来修改标签内所有图片的样式 .style { wi
【知识整理】Vue里用v-html解析一段富文本，但是里面有些特殊字符却显示不出来
Joanna的博客
10-10 5020
<span :title="dropLabel(msg)" v-html="msg"></span> 这是我的项目代码，v-html解析后台返回的字段，但是字段里面包含的一些特殊字符如：&、<、>、’、’'等却显示不出来。后来百度了一下，具体细节可以点击该链接查看详细描述。 文章大致的意思是在v-html中某些特殊字符若想显示出来，需要转为实体名称，...
HTML_<html>\<head>\<body>标签详解
也许有一天我们再相逢 睁开眼睛看清楚 我才是英雄！
01-15 8404
HTML_<html>\<head>\<body>标签详解
Vue - 最新完美解决 v-html 指令（或其他解析插件）富文本解析图片无法自适应宽高问题（图片超出屏幕宽度且不受控，详细示例源码，简单快速无需任何第三方插件）
王佳斌
07-15 7114
v-html 解析时 img图片 渲染超出边界的问题，渲染富文本图片宽高问题，使用v-html加载富文本时,对于富文本中图片的大小处理，vue通过v-html指令渲染的富文本无法修改样式的解决方案，解析富文本图片溢出,超出的问题。vue富文本图片为什么超出了屏幕宽度，vue v-html 解析图片变形了怎么办，vue富文本解析时 img图片 渲染超出边界的问题，vue 渲染富文本图片宽高问题，vue 如何解决 v-html 指令富文本解析图片无法自适应宽高问题，vue使用v-html 加载富文本时,对于富文
商城前端静态HTML模板资料包
1. HTML基础 HTML，即超文本标记语言，是构成网页内容的基础。HTML文档由一系列的元素（或称为标签）构成，这些元素定义了网页的结构和内容。商城静态HTML完整版中会包含如下的基础HTML标签： - `<html>`：页面的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jayden-leo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值