HTML开发入门：列表、搜索跳转、表单

最新推荐文章于 2022-12-15 11:42:16 发布
最新推荐文章于 2022-12-15 11:42:16 发布
阅读量2.9k 收藏 6
点赞数 1
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuxe1990/article/details/90483135
版权

超文本
• Web 是一个超文本文件的集合
• 超文本文件是 Web 的基本组成单元,也称为网页或HTML文档、Web页等,通常是以.html或.htm为后缀的文件
• Web页之间通过超文本中的超级链接组织在一起

什么是 HTML
• HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言
– 使用带有尖括号的“标记”将网页中的内容逐一标识出来
• 用来设计网页的标记语言
• 用该语言编写的文件,以 .html 或者 .htm 为后缀
• 由浏览器解释执行
• HTML 页面上,可以嵌套用脚本语言编写的程序段,如:VBScript,JavaScript

元素，也叫标签、标记。分为封闭型的双标记和单标记。

  • 块级元素：不管数据量多少，至少占一整行，如标题元素h1-h6、p、div
  • 行内元素：不会产生换行

大型网站建站

  1. 规划网站功能
  2. UI设计师设计版面
  3. web前端设计师将设计出来的图片制作成网页
  4. 后端程序员编写后台程序
  5. 网站交给运维部发布到Web服务器

前端：html / css / js(javascript)
后端：python / php / java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my html</title>
</head>
<body>
<!--输入ul>li*3,按tab键,创建无序列表-->
<ul type="square">
    <li>Network</li>
    <li>Linux</li>
    <li>Service</li>
</ul>
<ul type="circle">
    <li>Network</li>
    <li>Linux</li>
    <li>Service</li>
</ul>
<ul>
    <li>Network</li>
    <li>Linux</li>
    <li>Service</li>
</ul>
<!--输入ol>li*3,按tab键,创建有序列表-->
<ol type="I" start="2">
    <li>Network</li>
    <li>Linux</li>
    <li>Service</li>
</ol>
<ol type="a" start="1">
    <li>Network</li>
    <li>Linux</li>
    <li>Service</li>
</ol>
<ol>
    <li>Network</li>
    <li>Linux</li>
    <li>Service</li>
</ol>

<!--输入以下内容,按tab键,创建表格-->
<!--table>tr*3>td*3-->
<table border="2px" width="400px">
    <tr>
        <td rowspan="2">1</td>
        <td colspan="2">1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>姓名</td>
        <td>阶段</td>
        <td>课程</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>一</td>
        <td>Linux</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>二</td>
        <td>运维</td>
    </tr>
</table>

<!--跳转-->
<a href="#id3">跳转h3</a>
<!--超链接-->
<a href="http://www.sogou.com" target="_blank">搜狗搜索</a>
<!--<hr>表示分隔线-->
<hr>
<!--网络图片-->
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2726102536,2091908784&fm=26&gp=0.jpg">
<hr>
<!--本地图片,设置高度和宽度-->
<img width="400" height="100" src="static/imgs/html_css.jpeg">
<hr>
<!--输入字块,并标上颜色-->
<div>人员有：<span style="color: blue">bob</span>和<span style="color: red">tom</span></div>
<hr>
2<sup>3</sup>=8 log<sub>2</sub>N
<hr>
<b>nsd1812班</b>nsd1812班<i>nsd1812</i><u>nsd1812班</u><s>nsd1812班</s>
<hr>
&lt;abc&gt;&copy;&aacute;&bemptyv;
<hr>
<div>这里有空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;你好</div>
<!--h后面的数值表示标题级别-->
<h1>1号标题</h1>
<h2>2号标题</h2>
<!--标记跳转地址-->
<h3 id="id3">3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
<p>段落元素</p>
<p>段落元素</p>
<div>块元素</div>
<div>块元素</div>
<div>块元素</div>
<div>块元素</div>
<div>人员有：<span>bob</span>和<span>tom</span></div>
</body>
</html>
##########################################################################
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myhtml2</title>
</head>
<body>
<!--form用于创建表单-->
<form action="https://www.sogou.com/web" target="_blank">
    <input type="text" name="query">
    <input type="submit" value="搜狗搜索">
</form>
<hr>
<form action="https://www.baidu.com/s" target="_blank">
    <input type="text" name="wd">
    <input type="submit" value="百度搜索">
</form>
</body>
</html>
<hr>
<!--select用于创建下拉菜单-->
<form action="">
    <!--textarea用于创建文本框-->
    <textarea name="t" id="t" cols="50" rows="10"></textarea><br>
    <select name="lesson" id="">
        <option value="linux">linux</option>
        <option value="net">net</option>
        <option value="service">serive</option>
        <option value="python">python</option>
    </select>
    <input type="submit">
</form>
<hr>
<!--checkbox用于创建复选-->
<form action="">
    <label><input type="checkbox" name="lesson" value="linux">linux</label>
    <label><input type="checkbox" name="lesson" value="net">net</label>
    <label><input type="checkbox">service</label>
    <label><input type="checkbox">python</label>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
<hr>
<!--radio用于创建单选-->
<form action="http://www.kuaidi100.com/query" target="_blank">
    单号:<input type="text" name="postid"><br>
    <!--radio表示选择按钮,标签label与按钮没有直接关联-->
    <input type="radio" name="type" value="zhongtong"><label>中通</label>
    <label>
        <input type="radio" name="type" value="youzhengguonei">
        邮政
    </label>
    <input id="st" type="radio" name="type" value="shentong">
    <label for="st">申通</label>
    <br><input type="submit" value="查询">
</form>
<hr>
<form action="">
    用户名:<input type="text" placeholder="username">
    密码:<input type="password" placeholder="password">
    <input type="submit" value="登陆">
</form>

以上网页效果如下图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myhtml2</title>
</head>
<body>
<!--form用于创建表单-->
<form action="https://www.sogou.com/web" target="_blank">
    <input type="text" name="query">
    <input type="submit" value="搜狗搜索">
</form>
<hr>
<form action="https://www.baidu.com/s" target="_blank">
    <input type="text" name="wd">
    <input type="submit" value="百度搜索">
</form>
</body>
</html>
<hr>
<!--select用于创建下拉菜单-->
<form action="">
    <!--textarea用于创建文本框-->
    <textarea name="t" id="t" cols="50" rows="10"></textarea><br>
    <select name="lesson" id="">
        <option value="linux">linux</option>
        <option value="net">net</option>
        <option value="service">serive</option>
        <option value="python">python</option>
    </select>
    <input type="submit">
</form>
<hr>
<!--checkbox用于创建复选-->
<form action="">
    <label><input type="checkbox" name="lesson" value="linux">linux</label>
    <label><input type="checkbox" name="lesson" value="net">net</label>
    <label><input type="checkbox">service</label>
    <label><input type="checkbox">python</label>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
<hr>
<!--radio用于创建单选-->
<form action="http://www.kuaidi100.com/query" target="_blank">
    单号:<input type="text" name="postid"><br>
    <!--radio表示选择按钮,标签label与按钮没有直接关联-->
    <input type="radio" name="type" value="zhongtong"><label>中通</label>
    <label>
        <input type="radio" name="type" value="youzhengguonei">
        邮政
    </label>
    <input id="st" type="radio" name="type" value="shentong">
    <label for="st">申通</label>
    <br><input type="submit" value="查询">
</form>
<hr>
<form action="">
    用户名:<input type="text" placeholder="username">
    密码:<input type="password" placeholder="password">
    <input type="submit" value="登陆">
</form>

以上网页效果如下图:
在这里插入图片描述

CSS：层叠样式表、级联样式表
CSS分类：

  • 内联样式：类似于属性，在标签上直接设置样式
  • 内部样式：在html的head标签中设置样式
  • 外部样式：将样式表单独定义成一个文件

样式表的应用，注意的两个方面

  • 选择器：给谁设置样式
  • 样式声明：设置成什么样

样式表的特性

  • 继承性：子元素的样式继承于父元素
  • 层叠性：某一元素，它的样式可以有多个来源，不冲突时，效果累加
  • 优先级：当多个样式应用在同一元素上，如果设置有冲突，样式有优先级（就近原则）

选择器

  • 通用选择器：* 匹配所有的选择器
  • 元素选择器：针对html元素（标签）进行设置
  • 类选择器：把需要具有相同样式的元素设置成一样的class，可以理解为分组
  • id选择器：仅仅为某一个元素设置样式
  • 群组选择器：如果需要对多个选择器设置相同的样式，可以用逗号将它们分开
  • 伪类选择器：为超链接设置样式

id 选择器
• id 选择器以一种独立于文档元素的方式来指定样式
• 它仅作用于 id 属性的值
• 语法为:
– 选择器前面需要有一个 # 号
– 选择器本身则为文档中某个元素的 id 属性的值

伪类选择器
• 伪类用于向某些选择器添加特殊的效果
• 使用冒号(:)作为结合符,结合符左边是其他选择器，右边是伪类
– 选择器 : 伪类选择器
• 链接伪类
– : link ,适用于尚未访问的链接
– : visited ,适用于访问过的链接
• 动态伪类,用于呈现用户操作
– :hover,适用于鼠标悬停在 HTML 元素时
– :active,适用于 HTML 元素被激活时
– :focus,适用于 HTML 元素获取焦点时

#pycharm编辑mycss.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my css</title>
</head>
<!--通过属性实现样式-->
<body bgcolor="silver" text="blue">
<h2>2号标题</h2>
<hr color="red">
hello world!
</body>
</html>

以上html文件页面效果如下：
在这里插入图片描述

#pycharm编辑mycss2.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my css2</title>
    <style>
        /*内部样式*/
        body {
            background: forestgreen;
            color: blue;
        }
        hr {
            color: white;
        }
    </style>
</head>
<body>
<h2>2号标题</h2>
<hr>
这是一段测试文字
<div style="text-align: center">这是一个div标签,采用内联样式</div>
</body>
</html>

以上html文件页面效果如下图
在这里插入图片描述

#pycharm新建mycss.css样式文件
* {
    margin: 0;  /*外边距*/
    padding: 0; /*内边距*/
}
body{
    color: blue;
}
.c1 {
    text-align: center;
}
.c2, .c3 {
    text-align: right;
}
a:link {  /*访问之前的样式*/
    color: red;
}
a:hover{  /*鼠标悬停时的样式*/
    font-size: 50px;
}
a:visited {
    color: gray;
}
#id1 {
    background: rebeccapurple;
}
p {
    color: forestgreen;
}
div{
    font-size: 100px;
}
hr {
    color: red;
}
###############################################################################
#pycharm编辑mycss3.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my css3</title>
    <link rel="stylesheet" href="mycss.css">    <!--调用前面创建的样式文件mycss.css-->
</head>
<body>
<a href="http://bookset.me">bookset</a><br>
<a href="http://www.docker.io" target="_blank">docker</a>
<p class="c1">第一段</p>
<p class="c2">第二段</p>
<p>第三段</p>
<div class="c1" id="id1">第一行</div>
<hr>
<div class="c3">第二行</div>
</body>
</html>

以上html文件页面效果如下图：
在这里插入图片描述

实现搜索框并跳转至搜索界面
weixin_46160632的博客
12-06 2137
WXML <view class="search_wrap"> <navigator url = "/pages/searchresult/searchresult"> 搜索 </navigator> </view> WXSS .search_wrap { width: 100%; height: 80rpx; background-color: #eb4450; display: flex; ju
html5页面表格固定列与表格内数据跳转功能
09-27
html5表格引用了amazeui框架的css样式，固定列问题就有点问题，后来引用了tablefreeze的工具，可顺利完成固定列滑动。关于表格内数据跳转运用了location。href="##"跳转，如果要传参数可在后面加上"?a=1"，通过中间java 代码传递。
html搜索框判断跳转,【求助】app点击首页上的搜索框，跳转到搜索页后获取不到元素...
weixin_35762250的博客
06-04 294
该楼层疑似违规已被系统折叠隐藏此楼查看此楼问题：跳转到搜索页后，获取不到搜索页标签流程是：先执run_bbs_test.py，然后执行test_home.py下的用例方法，再通过homePage.py下的方法跳转到搜索页，输入搜索内容，进行搜索执行测试用例：(主要代码)def runTest(self):# 创建测试套件对象un = unittest.TestSuite()# 添加测试用un.a...
html5如何查询表单,如何检索html5表单值
weixin_36324695的博客
06-26 405
我在html5表单上工作。如何检索html5表单值在从下拉列表，时间和有空格的值中检索值时遇到问题。for drop down lists |转换为％7C， 时间：转换为％3A，而AM或PM未显示，而空格转换为+。 是否有一种方式可以完全按照它们向用户显示的方式来检索表单值。如果我将被迫将其转换为使用正则表达式有原始值，哪些会针对上述问题是新来的jQuery所以饶了我的工作，如果有我的问题任何歧义...
html自动搜索,html列表简单搜寻
weixin_34354231的博客
06-01 255
#myInput {background-image:url('/css/searchicon.png');/* Add a search icon to input */background-position:10px 12px;/* Position the search icon */background-repeat:no-repeat;/* Do not repeat the icon ...
HTML入门：构建网页基石与表单设计
本资源专注于HTML基础学习，适合初学者入门。HTML是一种标记语言，主要用于创建和设计网页结构，规定网页内容的显示格式。课程内容包括： 1. **表单**：HTML表单用于收集用户输入的数据，如action属性指定表单数据...
HTML入门：掌握表单设计与基本语法
本资源是一份关于HTML入门教程的PPT，主要讲解了表单设计的基本要素和HTML语言的基础知识。首先，我们来深入了解表单标记的构造： 1. 表单标记：HTML表单是用户与服务器进行交互的重要工具，其基本结构包括 `<form>...
HTML基础教程：网页设计与开发的入门指南
建议使用现代的开发工具和IDE（集成开发环境），例如Visual Studio Code、Sublime Text、Atom等，这些工具提供了语法高亮、代码补全、预览功能和版本控制等辅助功能，帮助开发者更高效地编写和管理HTML代码。...
Spring Security表单入门教程：自定义跳转与前端页面实现
本资源旨在介绍如何使用Spring Security实现表单登录机制，并自定义登录成功后的跳转页面。内容涵盖了使用Ajax和传统Web方式处理登录请求和跳转逻辑，并包括了前端页面的相关内容。" 知识点详细说明： 1. Spring ...
HTML基础入门：掌握web开发的第一步
7. HTML表单：理解表单的创建和使用，掌握不同类型的输入控件，如文本框、密码框、复选框、单选按钮、提交按钮和选择列表等。 8. HTML文档类型和版本：了解不同版本的HTML标准，比如HTML4、XHTML和HTML5，以及它们...
html 查询表单,如何让我的HTML表单查询适用于所有表单元素？
weixin_36078306的博客
06-28 463
我有一个HTML表单。在那里，我有四种不同类型的连接到数据库表的字段，并且应该根据用户的选择将结果呈现给HTML表单域。如何让我的HTML表单查询适用于所有表单元素？我有开始和结束日期字段。Start Date:End Date:日期字段会取出表格中用户给出的开始日期和结束日期之间的所有行到HTML字段中。我有和选择字段。AstraPulsarAlmeraCivicQ7M3MeganeG-Clas...
html 列表页 头部搜索框,EasyUI实现带搜索框的列表页面（一）——前台实现
weixin_42350951的博客
06-04 625
基本思路引入EasyUI资源Datagrid组件实现初始化列表分页数据加载用form将搜索条件收集后转成json对象，向后台发送请求重新加载数据后台Controller层：定义搜索条件pojo类对请求数据进行封装接收后台Service层：调用mapper查询数据和总数，封装成结果对象返回后台Mapper层：根据查询条件对象进行数据查询、查询数据总数具体实现前台实现：1 引入EasyUI资源HTML...
HTML 速查列表
SANSANBaby的博客
11-26 221
HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题</title> </head> <body> 可见文本... </body> </html> 基本标签（Basic Tags） <h1>最大的标题</h1> <h2> . . . </h2> <h3> . . . </h3
html5 列表带搜索,HTML5 原质化设计列表（带弹出式列表项）
weixin_39929602的博客
06-05 188
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Lato);body {background-color: #e6e6e9;font-family: 'Lato', sans-serif;}.wrapper {width: 400px;margin: 0 auto;padding: 40px 0;}.wrapper...
html无序列表搜索框,html 无序列表_有序列表_框架
weixin_35399360的博客
06-04 265
HTML不区分大小写，但最好统一。练习题：课程表 定义表头和从本质上是没有区别的，但是用了会自动的加粗体成绩表项目上课休息星期星期一星期二星期三星期四星期五星期六星期日上午语文数学英语英语物理计算机休息数学数学地理历史化学计算机化学语文体育计算机英语计算机政治英语体育历史地理计算机下午语文数学英语英语物理计算机休息数学数学地理历史化学计算机经验：为了提高开发效率，把帮助手册，还有index.htm...
html——搜索结果简单ListView展示页面
知北行的博客
07-18 3172
1、效果： 2、html代码（使用了layui，实际使用时需要修改layui路径）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></
HTML表单和媒体查询
sh2001824的博客
07-15 252
html表单
html表单中search,HTML Input Search form用法及代码示例
weixin_35866747的博客
06-23 1739
HTML DOM中的DOM输入搜索表单属性用于返回包含输入搜索字段的表单的引用。它是只读属性，成功时将返回一个表单对象。用法:searchObject.form例：以下示例程序旨在说明输入搜索表单属性。Input Search form Propertyh1 {color:green;}h2 {font-family:Impact;}body {text-align:center;}Geeksfo...
02.HTML基础（列表，表格，表单）
qq_51438805的博客
12-15 394
列表表格表单标签
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值