首页 > 其他分享 >标签的属性

标签的属性

时间:2023-07-18 19:34:11浏览次数:36  
标签:form color 标签 表单 提交 属性

img标签

标签的属性分类

  1.自带的属性

  2.自定义属性

<img src="地址" alt="描述信息">
src属性:图片的地址
  1.外链地址
  2.相对地址
alt属性:当图片加载失败后,显示的描述信息
width属性:控制图片宽度
height属性:控制图片高度
ps:二者等比例缩放

a标签

a:超链接

<a href=""></a>
href:填写的是跳转地址
  绝对URL:指向另一个站点(比如 href="http://www.jd.com)
  相对URL:指向当前站点中的确切路径(href="index.htm")
target=‘_blank’
  跳转时新开一个tab页面
title
  当鼠标悬浮时展示的内容

列表

1.无序列表

  格式

<ul type="disc">
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
<li>d</li>
</ul>
type属性
  disc(实心圆点,默认值)
  circle(空心圆点)
  square(实心方块)
  none(无样式)

2.有序列表

  格式

<ol type="1" start="3">
<li>sb</li>
<li>sb</li>
<li>sb</li>
<li>sb</li>
<li>sb</li>

</ol>
type属性
  1 数字列表、默认值
  a 小写字母
  A 大写字母
  I 大写罗马
  i 小写罗马
stayt属性
  表示type默认值从几开始,不写从1开始

3.标题列表

  格式

<dl>
<dt>标题</dt>
<dd>内容</dd>
<dt>标题</dt>
<dd>内容</dd>
</dl>

表格

格式

<table border="5" cellpadding="20" cellspacing="20">
    <thead>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td rowspan="2">kevin</td>
        <td >18</td>
    </tr>
    <tr>
        <td>2</td>
        <td>18</td>
    </tr>
    <tr>
        <td>3</td>
        <td>kevin</td>
        <td>18</td>
    </tr>
    </tbody>
</table>

属性:

  ● border: 表格边框.
  ● cellpadding: 内边距
  ● cellspacing: 外边距.
  ● width: 像素 百分比.(最好通过css来设置长宽)
  ● rowspan: 单元格竖跨多少行
  ● colspan: 单元格横跨多少列(即合并单元格)

标签两个重要属性

id属性

   一个html文档中,id只能有一个,并且不能重复,通过这个id可以唯一确定一个标签

class属性

    一个html文档中,class值是可以有多个的,可以重复 

自定义属性

  属性名可以自己来定,自定义属性一般用来存储数据的

form表单

form表单可以把用户输入的、选择的、上传的等都通过网络提交到后端

<form></form>
<label></label>
通过id值绑定
  <label for="username">用户名</label>
  <input type="text" id="username">
input:
  通过改变input的属性type来达到不同的输入类型
  text 单行输入文本 <input type=text" />
  password 密码输入框 <input type="password" />
  date 日期输入框 <input type="date" />
  checkbox 复选框 <input type="checkbox" checked="checked" />
  radio 单选框 <input type="radio" />
  submit 提交按钮 <input type="submit" value="提交" />
  reset 重置按钮 <input type="reset" value="重置" />
  button 普通按钮 <input type="button" value="普通按钮" />
  hidden 隐藏输入框 <input type="hidden" />
  file 文本选择框 <input type="file" />

属性说明:
  ● name:表单提交时的“键”,注意和id的区别
  ● value:表单提交时对应项的值
  ○ type="button", "reset", "submit"时,为按钮上显示的文本年内容
  ○ type="text","password","hidden"时,为输入框的初始值
  ○ type="checkbox", "radio", "file",为输入相关联的值
  ● checked:radio和checkbox默认被选中的项
  ● readonly:text和password设置只读
  ● disabled:所有input均适用

# 每一个单选框、复选框标签都应该有一个属性叫name

  <input type="submit" value="登录"> # 把前端数据提交表单到后端
  <input type="button" value="登录"> # 不能够提交表单,就是一个空白的按钮,事件
  <button>登录</button> # 提交表单的功能,但是,必须写在form表单里

  <form action="" method="post">
  <select name="city" id="city">
  <option value="1">北京</option>
  <option selected="selected" value="2">上海</option>
  <option value="3">广州</option>
  <option value="4">深圳</option>
  </select>
  </form>

属性说明:
  ● multiple:布尔属性,设置后为多选,否则默认单选
  ● disabled:禁用
  ● selected:默认选中该项
  ● value:定义提交时的选项值

验证from表单提交数据到后端

用的是flask框架做后端语言

# 代码不需要掌握,你只需要看下后端如何结合前端把数据提交到后端的
pip install flask # flask框架,Django框架

<form action="">
action:
  1. 什么都不写,默认提交到当前地址
  2. 全写,绝对地址:http://www.baidu.com/login/
  3. 只写后缀
    /index/
     它会自动拼接当前计算机的ip+port
      http://127.0.0.1:5000/index/

文件的提交:
  必须满足两个条件
    1. 请求方式必须是post
    2. enctype必须是form-data

form表单提交数据的编码方式:
  application/x-www-form-urlencoded
  1. urlencode:普通文本框提交的都是这个格式的,只能提交普通文本数据,不能够提交文件数据
  multipart/form-data
  2. form-data:提交文件使用的必须是这个方式,可以提交普通文件数据,也可以提交文件数据
  3. json # form表单不能提交json格式的数据

from flask import Flask,request

app = Flask(__name__)

 路由,网址的后缀 baidu.com/index/

@app.route('/index/', methods=['GET', 'POST']) # 默认使用的是GET请求
def index():
# 如何拿到前端提交过来的数据
# 前端以post请求方式提交的
print(request.form) # 只能拿到post请求的数据
# print(request.args) # 拿到get请求的数据
# 如何接收文件数据
print(request.files)
file_obj = request.files.get('myfile')
print(file_obj.filename) # 965_001_dq3_3600_5400.jpg

with open(file_obj.filename, 'wb') as f:
for line in file_obj:
f.write(line)
return 'OK'
app.run()

ccs

html: 超文本标记语言
css:层叠样式表
就是给html增加样式的,让其变得更加的好看

css的学习步骤:
  1. 先学习选择器,作用就是如何找到标签
  2. 找到标签之后,给标签增加样式


选择器的语法结构
  选择器 {
    属性名1:属性值1
    属性名2:属性值2
    属性名3:属性值3
    属性名4:属性值4
}

CSS的注释语法
  /* 内容 */ # 快捷键:ctrl + ?

css的引入方式
  1. 在html文档中直接写在style标签中
  2. 单独写一个CSS文件,然后通过link标签引入外部的css文件
  3. 直接写在标签上,行内式

基本选择器

<style>
        /*#p1 {*/
        /*    color: red;*/
        /*    font-size: 30px;*/
        /*}*/

        /*.c1 {*/
        /*    color: yellow;*/
        /*    font-size: 25px;*/
        /*}*/

        /*p {*/
        /*    color: green;*/
        /*}*/

        /** {*/
        /*    color: orange;*/
        /*}*/

    </style>

id
class
标签选择器
通用选择器

<p id="p1" class="c1" style="color: orange;font-size: 26px">锄禾日当午,汗滴禾下土</p>
<p id="p2" class="c1">锄禾日当午,汗滴禾下土</p>
<p id="p3" class="c1" style="color: red;font-size: 20px">锄禾日当午,汗滴禾下土</p>

组合选择器

<style>
      /*ul li .c1 {*/
      /*  color: red;*/
      /*}*/

      div>p {
        color: red;
      }
  </style>

属性选择器

  <style>
        [username] {
            color: red;
        }

        [username=kevin] {
            color: red;
        }

        input[username=kevin] {
            color: red;
        }
    </style>

分组和嵌套

  div, p, span {
            color: red;
        }

 

 

 

 

 

 

 

 

 

 

 

 


  

 



 


























标签:form,color,标签,表单,提交,属性
From: https://www.cnblogs.com/shanghaipudong/p/17563925.html

相关文章

  • HTML入门-----常见标签之图片标签
    图片标签:用于显示网页中的图片!相关属性:src:图片地址alt:图片错误的时候(图片显示不出来的时候)的提示信息title:图片的标题width:图片宽度height:图片高度......
  • HTML入门-----常见标签之超链接标签
    超链接标签:主要用于网页中的跳转相关属性:href:网页地址,注意:如果是外站,需要加上协议:http://或https://target:目标,指的是窗口的目标,属性值通常是:_blank表示新建一个窗口来显示网页特殊用法:锚点示例:<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></t......
  • [C#]LINQ中如何按实体的某个属性去重
    NET[C#]LINQ中如何按实体的某个属性去重后返回不重复的集合?问题描述比如有如下实体集合:Person1:Id=1,Name="Test1"Person2:Id=1,Name="Test1"Person3:Id=2,Name="Test2"如何使用LINQ按Person.Id去重,返回的集合只包含Person1和Person3?方案一创建一个静态扩展......
  • C# 循环对象,获取对象每个属性的名、值、类型
    varcurData=newStudent();foreach(System.Reflection.PropertyInfopincurData.GetType().GetProperties()){if(p.PropertyType.FullName==typeof(decimal).FullName){ls.Add((decimal)p.GetValue(curDat......
  • 缕析条分Scroll属性
    最近有项目需要使用js原生开发滑动组件,频繁要用到dom元素的各种属性,其中以各种类型的height和top属性居多,名字相近,含义也很容易搞混。因此特地总结归纳了一下常用的知识点,在文末我们来挑战实现一个简易的移动端Scroll组件。要理解height和top,要从盒模型开始说起,首先我们来认识一......
  • 传奇开区服务器重启套装属性就没有了或者特效消失
    有的小伙伴遇到服务端设置正常,但是服务器重启之后套装属性就没有了,或者就是特效消失的情况,不知道怎么解决的小伙伴不妨耐心看看今天的分享出现这样的情况,主要原因是因为游戏服务器是云主机,如编写了一个文档本身已经保存.但是在重新打开有时会出现没有保存的问题。遇到这种情况,只能......
  • python在y轴设置标签
    Python在y轴设置标签作为一名经验丰富的开发者,我很高兴能够教给你关于在Python中如何在y轴设置标签的方法。在本文中,我将向你解释整个过程,并提供每一步所需的代码和注释。流程概述下面是在Python中在y轴设置标签的步骤概述。我们将在每个步骤中提供所需的代码和注释。步骤......
  • Windows Intelnet 属性中的隐私弹出窗口阻止程序设置设置为高级别
    要通过批处理将WindowsIntelnet属性中的隐私弹出窗口阻止程序设置设置为高级别,你可以使用以下命令:REGADD"HKCU\Software\Microsoft\Windows\CurrentVersion\InternetSettings\Zones\3"/v1406/tREG_DWORD/d3/f这个命令会将注册表键值1406设置为3,表示阻止级别设置......
  • HTML入门-----常用标签之水平线标签
    水平线标签<hr/><!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <body> <hr/> 张学友 <br/> 周杰伦 </body>......
  • HTML入门-----常用标签之字体样式标签
    字体样式标签可以改变字体的样式加粗:<strong></strong>,<b></b>斜体:<em></em>,<i></i>示例:<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title>......