h5学习（三）

最新推荐文章于 2024-08-08 14:18:17 发布

想变强的小白

最新推荐文章于 2024-08-08 14:18:17 发布

阅读量136

点赞数

文章标签： html 列表

本文链接：https://blog.csdn.net/qq_44980725/article/details/117459886

版权

列表

菜单列表导航列表轮播图列表

定义列表标签

<ol></ol>              <!--order list 有序列表-->
<ul></ul>              <!--unordered list 无序列表-->
<li></li>              <!--list item 列表项目（内容）-->

使用示例

<!DOCTYPE html>
<html>
  <head>
    <title>作业</title>
	<meta charset="utf-8">
 </head>
  <body>
        <h1>有序列表</h1>
        <ol>
            <li>子</li>
            <li>子</li>
            <li>子</li>
        </ol>
        <h1>无序列表</h1>
        <ul>
            <li>子</li>
            <li>子</li>
            <li>子</li>
        </ul>>
    </body>
</html>

有序列表标签属性

type="i" 列表项的样式

1 默认值: 1 2 3 4 5

a A a b c d

i I 罗马

无序列表标签属性

disc 实心小黑点

circle 空心小黑点

square 实心距形

none 去掉列表前标记

列表嵌套

所有嵌套必须写在li中

<ul>

</ul>

定义列表

<dl>

<dt>定义列表单说明</dt>

<dd>内容1</dd><dd>内容2</dd>..

</dl>

列表

<ul>

<li>

</a>

</li>

</ul>

<!--声明当前网页是按HTML5.0标准来书写-->
<!DOCTYPE html>
<html>
  <head>
    <title>列表</title>
	<meta charset="utf-8">
 </head>
  <body>
	    <h3>商品导航</h3>
		<div class="container" style="height:455px;width:251px;
		background-color:#e8e8e8;">
		   <ul style="list-style:none;padding:0;">
		      <li>
			     <a href="#" style="text-decoration:none;
				 color:#aaa;">
				    <img src="img/1.png">
					<span>规格参数</span>
				 </a>
			  </li>
			  <li>
			       <a href="#">
				       <img src="img/2.png">
					   <span>商品介绍</span>
				   </a>
			  </li>
		   </ul>
		</div>
  </body>
</html>

结构标记

#HTML5.0 新增加结构标签,希望一部分替换div

<header></header> 定义网页内容部头部

<footer></footer> 定义网页内容部底部

<section></section> 定义网页主体部分

<nav></nav> 定义导航菜单

<aside></aside> 定义侧边栏

<article></article> 定义文本内容,留言

<!--声明当前网页是按HTML5.0标准来书写-->
<!DOCTYPE html>
<html>
  <head>
    <title>列表</title>
	<meta charset="utf-8">
 </head>
  <body>
	    <h3>结构标签--替换div</h3>
		<!--商品列表-->
		<!--头部 主体  底部 原先div 11:22-->
		<div class="header">商品列表</div>
		<div class="content">商品1，商品2，商品</div>
		<div class="footer">商家介绍</div>
		<!--头部 主体  底部 结构标签-->	
		<header>美食商品列表</header>
		<section>
		    <nav>
			    <ul>
				    <li>西湖醋鱼</li>
					<li>东坡肉</li>
					<li>叫花鸡</li>
				</ul>
			</nav>
		</section>
		<footer>底部</footer>
  </body>
</html>

表单

表单组成部分

表单由三个部分组成=表单域+表单控件+提示消息

表单域标签 <form></form>

表单域标签属性

--method 表单提交方式[向服务器发送数据方式]

GET 默认不安全乱码发数量少1k

POST 安全不乱码发数量(不限)

--action 保存处理表单程序地址通过node.js接口

--enctype 附加属性

-application/x-www-form-urlencoded POST提交使用

-text/plain 发送普通文本

-multipart/form-data 上传文件上传头像

input

输入任意类型字符串,长度不限

通用属性

type="" 设置输入框的类型 text;password;hidden;reset;file;....

name="" 指定输入框的名字 #只有添加name属性输入框，才能被提交服务器

value="" 代表输入框中的(值)中间内容 #在提交时随name发送到服务器

disabled 无值的属性, 禁用此输入框[不能够输入任何内容]

input type 种常用类型

type="text" 文本输入框显示用户输入内容

type="password" 密码输入框隐藏用户输入内容

maxlength #最大输入字符个数(长度)

readonly #只读[只能看不能改]输入框

placeholder 提示占位符

          <h3>创建表单</h3>
		  <form method="GET" action="#">
		  用户名<input name="name" type="text" value="" maxlength="16"
		  placeholder="请输入用户名..."> <br>

		  密码<input name="pwd" type="password"
		  maxlength="12"
		  placeholder="请输入密码"> <br>
          <!--提交按钮-->
          <input type="submit" value="登录"> <br>

input 按钮

type="submit" #提交按钮,点击此按钮表单自动触发"提交"操作

type="button" #普通按钮,点击此按钮表单无操作

type="reset" #重置(清空)按钮，将表单恢复初始状态

<button></button> #功能与submit按钮相同

#submit button 功能太多[清空输入数,重新刷新网页]

<input type="submit"><br>
<input type="button" value="普通登录"><br>
<input type="reset"><br>
<button>登录</button><br>

多选框单选框

type="radio" 单选框[按钮]

type="checkbox" 多选框[多选按钮]

#单选和多选的name属性，为了控制命名还有分组功能

#单选和多选一定要定义value属性值

#checked 无值属性默认选中

<input type="radio" name="sex" value="女"><br>
<input type="radio" name="sex" value="男"><br>
可乐<input type="checkbox" value="kl">
雪碧<input type="checkbox" value="xb">

文件选择框

(1)提交方式一定修改 POST method="POST"

(2)表单域添加附加属性 enctype="multipart/form-data"

隐藏域

在表单中如果存在不希望用户看到的数据则将其添加进隐藏域

文本域

属性:

rows #设置文本域多少行 5

cols #设置文本域多少列 30 #如果内容超过范围添加滚动条

下拉选择框

<select name=""> 下拉列表域

<option></option> 下拉列表项

</select>

select标签属性 size="1" 默认选中项 multiple 多选

option属性 value="" 列表项中值 selected 默认选中

            <form method="POST" enctype="multipart/form-data">
            <!--添加文本域-->
            <textarea name="data" rows="5" cols="30">
            </textarea><br>
  
            <!--隐藏提交按钮-->
            <input type="hidden" name="ctime" value="2021">
            
            <!--下拉选择框-->
            <select name="p1">
                <option value="hn" selected>省</option>
                <option value="hb" >河北</option>
                <option value="hn" >河南</option>           
            </select>
            <select name="p2">
                <option value="hn" selected>市</option>
                <option value="hb" >aa</option>
                <option value="hn" >bb</option>           
            </select>
            <select name="p3">
                <option value="hn" selected>县</option>
                <option value="hb" >cc</option>
                <option value="hn" >dd</option>           
            </select>
            <input type="submit" value="上传">