标签_标签系统 - CSDN
精华内容
参与话题
  • 标签系统

    千次阅读 2018-08-16 11:25:25
    一、增加拿手的兴趣标签和身份标签,用于后续商家增值服务使用,同时建立基础的用户画像。 1、系统增加两类标签 身份标签: • 身份标签为拿手的的用户属性,用于描述拿手的自身的特性,具体如下: • 时尚...

    一、增加拿手的兴趣标签和身份标签,用于后续商家增值服务使用,同时建立基础的用户画像。

    1、系统增加两类标签

    • 身份标签:
      • 身份标签为拿手的的用户属性,用于描述拿手的自身的特性,具体如下:
      • 时尚潮人
      • 数码极客
      • 文艺青年
      • 运动达人
      • 无敌辣妈
      • 御宅一族

    • 兴趣标签:
      • 兴趣标签为淘宝的宝贝类目,用于了解拿手在淘宝上的消费习惯,具体标签内容如下:
      • 服装鞋包
      • 手机数码
      • 家用电器
      • 美妆饰品
      • 母婴用品
      • 家居建材
      • 百货食品
      • 运动户外
      • 文化玩乐
      • 生活服务
      • 汽配摩托

    2、拿手手机端增加打标签的页面
    • 拿手手机端新增两个页面,用于拿手身份标签和兴趣标签的选择,界面原型如下,设计稿界面待更新;
    • 在设定标签的过程中,有可能会发生返回的操作,所以在最后点击“开启我的白拿拿之旅”时,进行保存的操作
    这里写图片描述

    3、标签页面触发入口

    • 新注册用户:
      对于新注册的用户,完成注册或者绑定手机号完成后,直接进入上述的标签原则页,且拿手必须完成标签的选择后,才可进入到首页;
    • 老用户
      对于已注册的用户,在返回的首页的时候(包括点击分享的链接、公众号底部菜单、其它页面返回首页等),如果未设定过身份标签和兴趣标签,则直接进入标签设定页,设定完成后才可以进入到首页;

    4、保存设定的信息到拿手的标签中
    • 拿手设定完成后,保存对应的身份标签和兴趣标签到该拿手的标签信息中,同时后台标签管理中,需要增加该拿手对应标签的展示

    这里写图片描述

    二、系统设计:

    1、标签配置表:
    实体类:

    
    package com.zhibi.xiuba.user.spi.model;
    
    import org.hibernate.annotations.GenericGenerator;
    import org.hibernate.annotations.Type;
    
    import javax.persistence.*;
    import java.io.Serializable;
    import java.util.Date;
    
    /**
     * Created by QinHe on 2018-05-08.
     * 底层标签配置
     */
    @Entity
    @Table(name = "xb_us_tag_config")
    public class TagConfig implements Serializable {
        private static final long serialVersionUID = -845329773606157910L;
    
        @Id
        @GeneratedValue(generator = "id_generator")
        @GenericGenerator(name = "id_generator", strategy = "redis_id")
        private Long id;
    
        /**
         * 父标签
         */
        @ManyToOne()
        @JoinColumn(updatable = false, name = "parent_id", referencedColumnName = "id")
        private TagConfig parent;
    
        /**
         * 标签层级 0为最顶层
         */
        private Integer level;
    
        /**
         * 用于排序
         */
        private Integer sortIndex;
    
        /**
         * 标签名字
         */
        private String name;
    
        /**
         * 标签描述
         */
        private String description;
    
        /**
         * 当下是否可用
         */
        @Type(type = "org.hibernate.type.NumericBooleanType")
        private Boolean enabled;
    
        private String dataType;
    
        private String iconUrl;
    
        private Date createTime;
    
        private Date updateTime;
    
        private Date deadLineTime;
    
        public Long getId() {
            return id;
        }
    
        public void setId(Long id) {
            this.id = id;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public Boolean getEnabled() {
            return enabled;
        }
    
        public void setEnabled(Boolean enabled) {
            this.enabled = enabled;
        }
    
        public String getDataType() {
            return dataType;
        }
    
        public void setDataType(String dataType) {
            this.dataType = dataType;
        }
    
        public Date getCreateTime() {
            return createTime;
        }
    
        public void setCreateTime(Date createTime) {
            this.createTime = createTime;
        }
    
        public Date getUpdateTime() {
            return updateTime;
        }
    
        public void setUpdateTime(Date updateTime) {
            this.updateTime = updateTime;
        }
    
        public Date getDeadLineTime() {
            return deadLineTime;
        }
    
        public void setDeadLineTime(Date deadLineTime) {
            this.deadLineTime = deadLineTime;
        }
    
        public String getDescription() {
            return description;
        }
    
        public void setDescription(String description) {
            this.description = description;
        }
    
        public TagConfig getParent() {
            return parent;
        }
    
        public void setParent(TagConfig parent) {
            this.parent = parent;
        }
    
        public Integer getLevel() {
            return level;
        }
    
        public void setLevel(Integer level) {
            this.level = level;
        }
    
        public Integer getSortIndex() {
            return sortIndex;
        }
    
        public void setSortIndex(Integer sortIndex) {
            this.sortIndex = sortIndex;
        }
    
        public String getIconUrl() {
            return iconUrl;
        }
    
        public void setIconUrl(String iconUrl) {
            this.iconUrl = iconUrl;
        }
    }
    

    这里写图片描述

    标签是分级的,这里面是用parent一个字段就可以表示层级关系了

    2、用户标签对应表

    实体类:

    package com.zhibi.xiuba.user.spi.model;
    
    import com.zhibi.xiuba.user.spi.enums.DataTypeEnum;
    import com.zhibi.xiuba.utils.StringUtils;
    import org.hibernate.annotations.GenericGenerator;
    import org.hibernate.annotations.Type;
    
    import javax.persistence.*;
    import java.io.Serializable;
    import java.util.Date;
    
    /**
     * Created by QinHe on 2018-05-08.
     * 增值业务配置类
     */
    @Entity
    @Table(name = "xb_us_tag_library")
    public class TagLibrary implements Serializable {
        private static final long serialVersionUID = -4645714347119745836L;
    
        @Id
        @GeneratedValue(generator = "id_generator")
        @GenericGenerator(name = "id_generator", strategy = "redis_id")
        private Long id;
    
        /**
         * 标签 多对一
         */
        @ManyToOne
        @JoinColumn(nullable = false, updatable = false, name = "tag_config_id", referencedColumnName = "id")
        private TagConfig tagConfig;
    
        /**
         * 用户id
         */
        private Long userId;
    
        private String stringValue;
    
        private Date dateValue;
    
        private Long longValue;
    
        @Column(columnDefinition = "bit", length = 1)
        @Type(type = "org.hibernate.type.NumericBooleanType")
        private Boolean booleanValue;
    
        private Double doubleValue;
    
    
        private Date createTime;
    
        private Date updateTime;
    
        public TagLibrary() {
        }
    
        public TagLibrary(TagConfig tagConfig, Long userId, Date createTime) {
            this.tagConfig = tagConfig;
            this.userId = userId;
            this.createTime = createTime;
        }
    
        public void setValue(Object value, String dataType) {
            if (value != null && StringUtils.isNoneBlank(dataType)) {
                if (DataTypeEnum.DATA_TYPE_ENUM_STRING.getCode().equals(dataType)) {
                    this.stringValue = (String) value;
                }
                if (DataTypeEnum.DATA_TYPE_ENUM_DATE.getCode().equals(dataType)) {
                    this.dateValue = (Date) value;
                }
                if (DataTypeEnum.DATA_TYPE_ENUM_LONG.getCode().equals(dataType)) {
                    this.longValue = (Long) value;
                }
                if (DataTypeEnum.DATA_TYPE_ENUM_BOOLEAN.getCode().equals(dataType)) {
                    this.booleanValue = (Boolean) value;
                }
                if (DataTypeEnum.DATA_TYPE_ENUM_DOUBLE.getCode().equals(dataType)) {
                    this.doubleValue = (Double) value;
                }
            }
            this.stringValue = value.toString();
            this.updateTime = new Date();
        }
    
        public Long getId() {
            return id;
        }
    
        public void setId(Long id) {
            this.id = id;
        }
    
        public TagConfig getTagConfig() {
            return tagConfig;
        }
    
        public void setTagConfig(TagConfig tagConfig) {
            this.tagConfig = tagConfig;
        }
    
        public Long getUserId() {
            return userId;
        }
    
        public void setUserId(Long userId) {
            this.userId = userId;
        }
    
        public String getStringValue() {
            return stringValue;
        }
    
        public void setStringValue(String stringValue) {
            this.stringValue = stringValue;
        }
    
        public Date getDateValue() {
            return dateValue;
        }
    
        public void setDateValue(Date dateValue) {
            this.dateValue = dateValue;
        }
    
        public Long getLongValue() {
            return longValue;
        }
    
        public void setLongValue(Long longValue) {
            this.longValue = longValue;
        }
    
        public Boolean getBooleanValue() {
            return booleanValue;
        }
    
        public void setBooleanValue(Boolean booleanValue) {
            this.booleanValue = booleanValue;
        }
    
        public Double getDoubleValue() {
            return doubleValue;
        }
    
        public void setDoubleValue(Double doubleValue) {
            this.doubleValue = doubleValue;
        }
    
        public Date getCreateTime() {
            return createTime;
        }
    
        public void setCreateTime(Date createTime) {
            this.createTime = createTime;
        }
    
        public Date getUpdateTime() {
            return updateTime;
        }
    
        public void setUpdateTime(Date updateTime) {
            this.updateTime = updateTime;
        }
    }
    

    这里写图片描述

    3、controller方法

    package com.zhibi.xiuba.controller;
    
    import com.alibaba.fastjson.JSON;
    import com.zhibi.xiuba.model.ControllerResult;
    import com.zhibi.xiuba.service.ITagService;
    import com.zhibi.xiuba.user.spi.enums.TagConfigIdEnum;
    import com.zhibi.xiuba.user.spi.model.TagConfig;
    import lombok.extern.slf4j.Slf4j;
    import org.apache.commons.lang3.StringUtils;
    import org.springframework.web.bind.annotation.*;
    
    import java.util.List;
    
    @Slf4j
    @RestController
    @RequestMapping("/user/tag/")
    public class TagController {
    
        private final ITagService tagService;
    
        public TagController(ITagService tagService) {
            this.tagService = tagService;
        }
    
        @PostMapping("/makeTagForShowker")
        @ResponseBody
        public ControllerResult makeTagForShowker(@RequestParam Long showkerId,
                                                  @RequestParam String identityTagJsonStr,
                                                  @RequestParam String hobbyTagJsonStr) {
    
    
            List<Long> idsIdentity = tagService.findByUserIdAndTagParent(showkerId, TagConfigIdEnum.IDENTITY_TAG_ID.getCode());
            List<Long> idsHobby = tagService.findByUserIdAndTagParent(showkerId, TagConfigIdEnum.HOBBY_TAG_ID.getCode());
            if ((idsIdentity != null && idsIdentity.size() > 0) || (idsHobby != null && idsHobby.size() > 0)) {
                return ControllerResult.build(false, "", "您已经打过标签了!");
            }
    
            if (StringUtils.isNotBlank(identityTagJsonStr)) {
                List<Long> tagIds = JSON.parseArray(identityTagJsonStr, Long.class);
                if (tagIds != null) {
                    if (tagIds.size() > 2) {
                        return ControllerResult.build(false, "", "最多可选两项!");
                    }
                    for (Long tagId : tagIds) {
                        tagService.createTagForUser(showkerId, tagId);
                    }
                }
            }
    
            if (StringUtils.isNotBlank(hobbyTagJsonStr)) {
                List<Long> tagIds = JSON.parseArray(hobbyTagJsonStr, Long.class);
                if (tagIds != null) {
                    if (tagIds.size() > 4) {
                        return ControllerResult.build(false, "", "最多可选四项!");
                    }
                    for (Long tagId : tagIds) {
                        tagService.createTagForUser(showkerId, tagId);
                    }
                }
    
            }
            return ControllerResult.ok();
        }
    
        @GetMapping("/getIdentityTag")
        @ResponseBody
        public ControllerResult getIdentityTag(Long categoryId, Boolean enable) {
            List<TagConfig> list = tagService.getIdentityTag(categoryId, enable);
            return ControllerResult.ok(list);
        }
    
    }

    4、业务逻辑层

    package com.zhibi.xiuba.service.impl;
    
    import com.zhibi.xiuba.repository.TagConfigRepository;
    import com.zhibi.xiuba.repository.TagLibraryRepository;
    import com.zhibi.xiuba.service.ITagService;
    import com.zhibi.xiuba.user.spi.model.TagConfig;
    import com.zhibi.xiuba.user.spi.model.TagLibrary;
    import org.springframework.cache.annotation.Cacheable;
    import org.springframework.data.domain.Example;
    import org.springframework.stereotype.Service;
    
    import java.util.Date;
    import java.util.List;
    
    /**
     * Created by QinHe on 2018-07-02.
     */
    @Service
    public class TagService implements ITagService {
    
        private final TagLibraryRepository tagLibraryRepository;
        private final TagConfigRepository tagConfigRepository;
    
    
        public TagService(TagLibraryRepository tagLibraryRepository, TagConfigRepository tagConfigRepository) {
            this.tagLibraryRepository = tagLibraryRepository;
            this.tagConfigRepository = tagConfigRepository;
        }
    
        @Override
        public List<Long> findByUserIdAndTagParent(Long userId, Long tagParentId) {
            return tagLibraryRepository.findByUserIdAndTagParent(userId, tagParentId);
        }
    
        @Override
        @Cacheable(cacheNames = "Tag", key = "'categoryId_' + #categoryId+'_'+#enable")
        public List<TagConfig> getIdentityTag(Long categoryId, Boolean enable) {
            TagConfig tagConfig = new TagConfig();
            TagConfig parent = new TagConfig();
            parent.setId(categoryId);
            tagConfig.setParent(parent);
            if (enable != null) {
                tagConfig.setEnabled(enable);
            }
            return tagConfigRepository.findAll(Example.of(tagConfig));
        }
    
        @Override
        public void createTagForUser(Long showkerId, Long tagId) {
            TagLibrary tagLibrary = new TagLibrary();
            tagLibrary.setCreateTime(new Date());
            tagLibrary.setUserId(showkerId);
            tagLibrary.setTagConfig(tagConfigRepository.findOne(tagId));
            tagLibraryRepository.save(tagLibrary);
        }
    }
    
    展开全文
  • 大数据构建用户标签体系
  • 标签标签

    千次阅读 2016-06-01 12:34:25
    定义和用法 ...可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都

    定义和用法

    • <pre>标签
      pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
      <pre> 标签的一个常见应用就是用来表示计算机的源代码。
      可以导致段落断开的标签(例如标题、<p><address> 标签)绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的。
      pre 元素中允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。当把其他标签(比如<a>标签)放到 <pre>块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可
    • <code>标签
      code标签的应用,应该是只用在表示计算机程序源代码或者其他机器可以阅读的文本内容上。<code>标签的功能有:将文本变成等宽字体;还有一个功能就是暗示这段文本是源程序代码。那么根据第二个功能,将来浏览器可能会根据自己的实际情况添加效果。例如,程序员的浏览器可能会寻找 <code> 片段,并执行某 些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。
      code标签和pre标签可以嵌套使用,如下
    <pre>
        <code>
            hello world
        </code>
    </pre>
    展开全文
  • H5常用标签基本标签归纳总结

    千次阅读 2018-11-29 09:15:04
    这些常用的标签基本都已经知道,主要还是在平时的练习中不断地使用,才能达到运用自如的境界。 温故而知新,可以为师矣。 &lt;a&gt;标签 &lt;a href="http://www.w3cschool.cn" target=&...

     

    此文章在学习S3CHOOL后。

    这些常用的标签基本都已经知道,主要还是在平时的练习中不断地使用,才能达到运用自如的境界。

    温故而知新,可以为师矣。

    <a>标签

    <a href="http://www.w3cschool.cn" target="_blank">访问 W3Cschool在线教程!</a>

    在新页面打开此链接

    target="_blank"

    <area>标签

    shape,规定区域的形状。

    target,指定打开的位置

    <b> 标签

    <p>这是一个普通的文本- <b>这是一个加粗文本。</b>.</p>

    <col> 标签

    <col> 标签用于控制表格中的列,使你更加方便的为表格中的列应用样式

    <caption> 标签

    来为表格定义一个标题

    <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>

    <em> <strong> <dfn> <code> <samp> <kbd> <var> <cite> 标签

    <em> 呈现为被强调的文本。
    <strong> 定义重要的文本。
    <dfn> 定义一个定义项目。
    <code> 定义计算机代码文本。
    <samp> 定义样本文本。
    <kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
    <var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
    <cite> 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

     

    <ul> 标签

    定义无序序列

    <div> 标签

    <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

    <div>标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。

    <embed> 标签

    <embed> 标签定义了一个容器,用来嵌入外部应用或者互动程序(插件)。

    <form> 标签

    <form> 标签用于创建供用户输入的 HTML 表单。

    <figure> 标签

    <figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

    <footer> 标签

    <footer> 标签定义文档或者文档的一部分区域的页脚。

    <hr> 标签

    <hr> 标签定义 HTML 页面中的主题变化(比如话题的转移),并显示为一条水平线。

    <h1> 至 <h6> 标签

     <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。

    <header> 标签

    <header>标签用来表示介绍性的内容,即,定义了文档中的页眉

    <head> 标签

    <head> 元素是所有头部元素的容器。

    <head> 元素必须包含文档的标题(title),可以包含脚本、样式、meta 信息 以及其他更多的信息。

    <i> 标签

    <i> 定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。(斜体)

    <iframe> 标签

    <iframe> 标签规定一个内联框架。

    一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

    <input> 标签

    <input> 标签规定了用户可以在其中输入数据的输入字段

    描述
    accept audio/*video/*image/*MIME_type 规定通过文件上传来提交的文件的类型。(只针对type="file")
    align leftrighttopmiddlebottom HTML5已废弃,不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
    alt text 定义图像输入的替代文本。 (只针对type="image")
    autocompleteNew onoff autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
    autofocusNew autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。
    checked checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
    disabled disabled disabled 属性规定应该禁用的 <input> 元素。
    formNew form_id form 属性规定 <input> 元素所属的一个或多个表单。
    formactionNew URL 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
    formenctypeNew application/x-www-form-urlencodedmultipart/form-datatext/plain 属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
    formmethodNew getpost 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
    formnovalidateNew formnovalidate formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
    formtargetNew _blank_self_parent_topframename 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
    heightNew pixels 规定 <input>元素的高度。(只针对type="image")
    listNew datalist_id 属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。
    maxNew numberdate 属性规定 <input> 元素的最大值。
    maxlength number 属性规定 <input> 元素中允许的最大字符数。
    minNew numberdate 属性规定 <input>元素的最小值。
    multipleNew multiple 属性规定允许用户输入到 <input> 元素的多个值。
    name text name 属性规定 <input> 元素的名称。
    patternNew regexp pattern 属性规定用于验证 <input> 元素的值的正则表达式。
    placeholderNew text placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息。
    readonly readonly readonly 属性规定输入字段是只读的。
    requiredNew required 属性规定必需在提交表单之前填写输入字段。
    size number size 属性规定以字符数计的 <input> 元素的可见宽度。
    src URL src 属性规定显示为提交按钮的图像的 URL。 (只针对type="image")
    stepNew number step 属性规定 <input> 元素的合法数字间隔。
    type button 
    checkbox 
    color 
    date 
    datetime 
    datetime-local 
    email 
    file 
    hidden 
    image 
    month 
    number 
    password 
    radio 
    range 
    reset 
    search 
    submit 
    tel 
    text 
    time 
    url 
    week
    type 属性规定要显示的 <input> 元素的类型。
    value text 指定 <input> 元素 value 的值。
    widthNew pixels width 属性规定 <input> 元素的宽度。 (只针对type="image")

    <img> 标签

    <img> 标签定义 HTML 页面中的图像。

    <img src="smiley-2.gif" alt="Smiley face" width="42" height="42">

     <link> 标签

    <link>标签用于在文档与将要使用的外部之间建立联系,以为文档获取相应的资源。

    <head> <link rel="stylesheet" type="text/css" href="theme.css"> </head>

    <li> 标签

    <li> 标签定义列表项目。

    <li> 标签可用在有序列表(<ol>)、无序列表(<ul>)和菜单列表(<menu>)中。

    <fieldset> 标签

    <fieldset> 标签可以将表单内的相关元素分组。

    <fieldset> 标签会在相关表单元素周围绘制边框。

    <legend> 标签

    <legend>元素是<fieldset>元素的第一个子元素,定义了<fieldset>元素的标题。

    <label> 标签

    <label>标签用于为 input 元素做出标记。

    <meta> 标签

    注意:<meta> 标签通常位于 <head>区域内。

    注意: 元数据通常以 名称/值 对出现。

    注意: 如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。

    <menu> 标签

    目前主流浏览器并不支持 <menu> 标签。

    <meter> 标签

    <meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

    <mark> 标签

    部分文本高亮显示:

    <p>Do not forget to buy <mark>milk</mark> today.</p>

    <nav> 标签 

    <nav> 标签定义导航链接的部分。

    <option> 标签

    <option> 标签定义下拉列表中的一个选项。

    属性 描述 4 5
    disabled disabled 规定此选项应在首次加载时被禁用。 4 5
    label text 定义当使用 <optgroup> 时所使用的标注。 4 5
    selected selected 规定选项(在首次显示在列表中时)表现为选中状态。 4 5
    value text 定义送往服务器的选项值。 4 5

     

    <select> 标签

    <select> 元素是一种表单控件,可用于在表单中接受用户输入。

    <select>标签用于实现下拉列表

    属性 描述
    autofocusNew autofocus 规定在页面加载时下拉列表自动获得焦点。
    disabled disabled 当该属性为 true 时,会禁用下拉列表。
    formNew form_id 定义 select 字段所属的一个或多个表单。
    multiple multiple 当该属性为 true 时,可选择多个选项。
    name name 定义下拉列表的名称。
    requiredNew required 规定用户在提交表单前必须选择一个下拉列表中的选项。
    size number 规定下拉列表中可见选项的数目。

    <output> 标签

    <output> 标签作为计算结果输出显示(比如执行脚本的输出)。

    <optgroup> 标签

    <p> 标签

    <p>标签用于定义一个段落

    <pre> 标签

    <pre> 标签可定义预格式化的文本。

    <param> 标签

    param>标签为<object>标签提供嵌入内容的运行时参数的name与value对

    <progress> 标签

    <progress>标签用于定义文档中的进度条

    <q> 标签

    <q>标签用于定义一个短引用

    <rp> 标签/<rt> 标签/<ruby> 标签

    <s> 标签

    <s> 标签定义加删除线的文本

     <sub> 和 <sup> 标签

    <sub>和<sup>标签分别为文档中的内容定义下标和上标

    <span> 标签

    <span>标签内的内容独立于文档,当对该标签应用样式时,包含在其中的内容会呈现出不同的视觉效果

    <style> 标签

    HTML5 <style>标签用于表示文档所使用的样式。请参考下述示例:

    在 HTML 文档中使用 <style> 元素:

    <html>
    <head>
    <style type="text/css">
    h1 {color:red;}
    p {color:blue;}
    </style>
    </head>
    
    <body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    </body>
    
    </html>

     <source> 标签

    <source>标签用于为媒体元素定义媒体资源

    <td> 标签

    <td>标签用于表示一个表格中的单元格

    <th> 标签

    <th>标签用于表示一个表格的表头

    <tr> 标签

    <tr>标签用于表示一个表格中的行

    <title> 标签

    <title>标签用来定义标题,该标签位于<head>标签

     <thead> 标签

    <thead>标签用于将表格中的表头组合起来

    <time> 标签

     <time>标签用于标注日期、时间或日期与时间的组合(日期格式是YYYY-MM-DD)

    <tbody> 标签

    <tbody>标签用于组合表格中的主体内容

    <textarea> 标签

    <textarea>标签用于创建一个可以输入多行的文本框

    <textarea rows="10" cols="30"> 我是一个文本框。 </textarea>

    展开全文
  • HTML常用标签详解

    千次阅读 多人点赞 2018-07-19 14:06:10
    【meta标签】 1-charset属性:单独使用,设置文档字符及编码格式。 写法: 常见的中文编码格式: B-2312:国标码,简体中文 GBK:扩展的国标编码,简体中文 UTF-8:万国码 Unicode码,基本兼容各国语言 2-http...

    今天学习了有关html各种标签的用法,现总结一下在HTML中常用的标签及其属性。

    1.HTML5头部结构

    【DOCTYPE html】

    声明文档类型为HTML5文件。
    文档声明在HTML5文档必不可少,且必须放在文档的第一行。

    【meta标签】
    1.charset属性:单独使用,设置文档字符及编码格式。

    写法:<meta charset="UTF-8">
    常见的中文编码格式:
    B-2312:国标码,简体中文
    GBK:扩展的国标编码,简体中文
    UTF-8:万国码 Unicode码,基本兼容各国语言

    2.http-equiv属性:需配合content属性使用。主要声明浏览器如何解释编译文件。

    写法:<meta http-equiv="属性值" content="属性值详细内容"
    常用属性值:Content-Type HTML4.01之前的文档内容编码声明。
    refresh 网页刷新
    set-Cookie 设置浏览器cookie缓存

    3.name属性:需配合content属性使用,主要用于给搜索引擎提供必要信息。

    写法:<meta name="属性值" content="属性值详细内容"
    重要属性值:author 作者,声明网站作者,常用公司网址表示
    keywords 网站关键字,多个关键字,用英文逗号分隔
    description 网页描述,搜索引擎显示在title下的描述内容
    http-equiv和name属性,必须与content属性配合使用,前两者只是用于
    声明即将修改哪些属性值,而实际的属性值内容,在content中描述。
    <!--charset属性-->
    <meta charset="UTF-8">
    <!--作者-->
    <meta name="anthor" contet="http://www.yt4561761.com" />
    <!--网页关键字-->
    <meta name="keywords" content="HTML5,网页,第一个"
    <!--网页描述-->
    <meta name="description" content=我的第一个网页 />
    <!--声明文档的编码格式-->
    <meta charset="UTF-8" />

    【link标签】

    1-作用:用于为网页链接各种文件。
    2-常用属性:
    rel:用于表明被链接文件与当前文件关系。icon表明被链接图片是当前网页的icon图标。
    type:表明被链接文件是什么类型,可省略。
    href:表明链接文件的地址。
    
    <link rel="icon" href="img/icon.png" />

    【title标签】

    网页的标题,即网页选项卡上的文字。
    <title>虞涛</title>

    2.常见的块级标签

    【常见的块级标签】

    标题标签<h1></h1>...<h6></h6>
    水平线<hr/>
    段落<p></p>
    换行<br/>
    引用<blockquote</blockquote>
    预格式<pre></pre>
    
    引用标签<blockquote></blockquote>
    表明标签中的文字,为引用的内容,浏览器显示为等宽字体,并缩进。
    cite属性,表明引用的来源,一般为引用的网址URL
    <blockquote cite="http://www.yt4561761.com">
    hahahahahahah
    </blockquote>
    
    预格式标签<pre></pre>
    浏览器解析时,会按照等宽字体显示,并保留标签内的空格和回车。
    常用于保留代码格式。
    <pre>yt4561761
    yt4561761
    yt4561761
    </pre>

    【有序列表ol order list】

    <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ol>

    【无序列表ul unorder list】

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>

    【定义描述列表】

    <dl>
    <dt>标题</dt>
    <dd>描述项</dd>
    </dl>
    一般情况下,标题dt只有一项。描述项dd可以有多项。
    浏览器显示时,标题顶格显示,dd缩进显示。
    <dl>
    <dt>这是dl列表的标题</dt>
    <dd>描述项1</dd>
    <dd>描述项2</dd>
    <dd>描述项3</dd>
    </dl>

    【图片组合标签figure】

    1-<figure></figure>标签有两个子标签:
    <img src="">:一幅图片,src表示图片的路径。
    <figcaption></figcaption>:图片的标题
    2-浏览器显示为:图片与标题上下排列,且整体向后缩进一个单位。
    <figure>
    <img src="img/icon.png" />
    <figcaption>洪浩光伏
    </figcaption>
    </figure>

    【分区标签div】

    常配合CSS使用,为网页中最常用的分区标签,常用于网页布局使用
    <div style="width:100%; height:100px; ">
    这是div里面的文字
    <h1>div里面的标题</h1>
    </div>

    3.常见的行级标签

    【常见的行级标签】

    span 文本
    img 图片
    em 强调
    strong 强调
    q 短引用
    a 超链接
    i 倾斜
    b 加粗
    small 缩小字体
    u 下划线
    
    span(文本):用于包裹一部分文字,进行特定样式的修改。
    虞涛真<span style="color:red; font-size:36px;"></span>!!
    
    em(强调):浏览器显示为倾斜。
    strong(强调):浏览器显示为加粗。

    【strong/em/i/b 标签的区别】

    1-em和strong都表示强调,strong>em,strong和em标签均可多层嵌套,表示强调程度的递增。
    2-em和i都能倾斜,Strong和b都能加粗。但是Strong和em多了一层强调的语义。可以帮助搜索 引擎快速抓取网站重点。且html5要求开发者尽可能实现代码的语义化。
    <em>我真踏马帅!!</em><br />
    <strong>我真籍八帅!!</strong><br />
    <i>我被i标签弄斜了</i><br />
    <b>我被b标签弄粗了</b><br />

    【q(短引用)】常用于一句话的引用,cite属性表示引用来源,浏览器解析时,会在内容的前后插入双引号。

    <q cite="www.yt4561761.com">那你很棒哦</q>
    
    small(缩小字体):small标签可多层嵌套,表示比默认字体小一号,直到小到最小号为止。
    
    big(放大字体):亦可多层嵌套,直到最大。
    但在最新规范中,small和big标签不提倡使用。提倡使用style="font-size:11px;"CSS样式替代。
    <p>那你很<big><big><big><big><big></big></big></big></big></big>哦!</p>

    【img 图片标签】

    1-src属性:表示图片引用路径。
    常见路径的写法:
    ①相对路径:
    Ⅰ -当图片在当前文件下一层时:文件夹名/图片名 例如:img/abc.jpg
    Ⅱ-当图片与当前文件在同一层时:图片名 例如:src="abc.jpg"-当图片在当前文件上一层时:../图片名 例如:src="../abc.jpg"
    使用相对路径时,图片最外层只能放到网站根目录(图片必须要在项目文件夹中)
    ②绝对路径:写法file:///E:/aaa.png 但是,严禁使用
    ③网络连接:直接使用图片的网络地址,但由于图片在别的服务器,不可控,故不建议使用
    2-title:图片的标题。当鼠标指上时,显示的提示文字。
    3-alt:当图片无法加载时显示的文字。
    4-width/height:图片的尺寸,相当于CSS中的style="width:"
    5-align:图片周围的文字,相对于图片的排列方式。可选值:top/center/bottm
    <img src="../img/285-1606240Z040347.jpg" title="漩涡鸣人"/>
    <img src="[Liuyun&VCB-S]HanaSaku Iroha[01][Hi10p_1080p][BDRip][x264_flac_2ac3]_2015125173925.bmp"
    title="松前绪花" alt="图片无法显示,请刷新"/>
    <img src="pic/a947a8ec8a1363272535dd01938fa0ec09fac744.png" title="DEVIL MAY CRY"/>

    4.表格标签

    【table】

    <table></table>表格框
    <tr></tr>表格行
    <td></td>表格列
    <th></th> 表格标题列(将tr中的td替换为th),th默认加粗且在单元格居中显示。

    【table的常用属性】

    1-border:表格边框属性;当使用border="1"设置边框时,会在所有td以及table上嵌套边框,当border加大时,只有table框会加粗。
    2-cellspacing:单元格与单元格之间的间隙。当cellspacing="0"时,单元格之间的间隙为0,但边框线并不会合并。
    ☆☆合并边框的写法style="border-collapse:collapse;" 使用边框合并时,无需设置cellspacing。
    3-cellpadding:单元格内边距,单元格中文字与单元格边框之间的距离。
    4-width/height:表格的宽高
    5-align:设置表格在父容器中的对齐方式 ,left/居左 center/居中 right/居右
    ☆☆当表格使用align属性时,相当于使表格浮动,可能会导致表格后面的元素受表格浮动影响,导致布局错乱。
    6-bgcolor:背景色
    7-background:背景图,后接相对路径。背景图和背景色同时生效时,图会覆盖背景色
    8-bordercolor:设置边框颜色

    【标签的属性】

    当表格属性与行列属性冲突时,以行列属性为优先,属性设置优先级td>tr>table。
    1-width,height:给单个的行列设置宽高
    2-bgcolor:背景色
    3-align:设置单元格中的文字,在单元格中的水平对齐方式 left/center/right
    4-valign:设置单元格中文字在格中的垂直对齐方式 top/center/bottom
    5-nowrap:nowrap="nowrap"设置单元格文字行末不断行

    【表格的跨行与跨列】

    1-跨列:colspan,某单元格跨N列,则该单元格右边的N-1个td就不需要了。
    2-跨行:rowspan,某单元格跨N行,则该单元格下边的N-1个td就不需要了。

    5.表单标签

    【form两个重要属性】

    action:表单需要提交的服务器地址
    method:表单提交数据使用的方法,get/post
    >>>getpost的区别
    ① get传参使用URL传递,所有参数在地址栏可见,不安全;get传参数据量有限。
    ② post传参使用http请求传递,比较安全;post可以传递大量数据。
    但是,get请求的传输速率比post快。

    URL传参的形式:链接URL地址?name1=value1&name2=value2

    【input的常用属性】

    type:设置input的输入类型
    ② name:给input输入框命名。一般情况下,name属性必不可少。因为,传递数据时,使用name=value(输入内容)的形式传递。
    ③ value:input输入框的默认值
    ④ placeholder:输入框的提示内容。当input有默认的value或输入值时,placeholder消失

    【input-type属性的常用属性值】

    text:文本输入框
    ② password:密码输入框,输入内容默认显示小黑点
    ③ radio:单选框 checkbox:复选框
    >>>使用radio/checkbox时,value属性必填。提交时,提交的为value中的默认值;
    >>>radio/checkbox凭借name属性,确定是否属于同一组,name相同为同组,只能选一个
    >>>使用checked="checked"属性,设置默认选中项
    ④ file:文件上传
    >>>使用accept="类型",设置只能上传的文件类型,如 accept=image/* 表示任意格式图片
    ⑤ submit:提交按钮,将所有表单数据提交至后台服务器
    ⑥ reset: 重置表单数据
    ⑦ image:图形提交按钮,跟submit一样,具有表单提交功能
    >>>使用src属性确定图片路径
    ⑧ button:普通按钮,没有屌用

    【属性名=属性值的情况】

    checked="checked" 设置radio
    ② multiple="multiple" 设置select控件为多选,可在界面使用Ctrl+鼠标,进行多选。一般不用。
    ③ selected="selected" 设置select控件,默认选中的option选项
    ④ readonly="readonly"
    ⑤ disabled="disabled"
    当input被disabled时,该input的name和value数据将无法向后台传送
    ⑥ hidden="hidden" 隐藏控件。等效于<input type="hiden" />
    ⑦ nowrap=nowrap

    【下拉选择控件 select】

    ① 写法:<select>
    <option></option> option可以有N多个
    </select>
    ② name属性,应该写在<select>上,所有选项只有一个name
    ③ multiple="multiple" 设置select控件为多选,可在界面使用Ctrl+鼠标,进行多选。一般 不用。
    ④ option常用属性:
    value="":当option没有value属性时,往后台传递的是<option></option>标签中的文字;
    当option有value属性时,往后台传递的是value属性的值。
    title="":鼠标指上后显示的文字。
    selected="selected":默认选中。
    ⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组,label属性表示分组名。

    【文本域 textarea】

    ① 写法:<textarea></textarea>
    ② 设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性,但不常用
    ③ readonly="readonly" 设置为只读模式,不允许编辑。
    ④ style="resize: none;" 设置为宽高不允许修改。
    ⑤ style="overflow: ;" 设置当文字超出区域时,如何处理。
    >>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
    >>> 常用属性值:hidden 超出区域的文字,隐藏无法显示
    scroll 无论文字多少,均会显示滚动
    auto 自动,根据文字多少自动决定是否显示滚动条(默认样式)
    <fieldset> 表格的边框
    <legend>边框标题</legend>
    ...若干个表单元素
    </fieldset>

    【HTML5智能表单】

    ① H5新增input的form属性,用于指定特定form表单的id,实现input无需放在form标签之中,即可通过表单提交。
    <form id=foo>
    </form>
    <input ... form="foo"/>
    ② 新增很多个type新属性,详见表格
    
    ③ 新增input的属性:
    autocomplete:自动完成功能
    1.记忆之前输入过的内容,在下次输入时,根据以前的内容提示,自动完成。
    2.绝大部分浏览器自动开启
    3.有两个属性值:on/off
    4.可以在<form>标签上设置autocomplete,控制整在表单的自动完成开关, 但可在个别input上单独设置,覆盖form的整体设置
    autofocus: 自动获得焦点
    form:所属表单,通过form表单的id,指向特定表单
    required:必填。required="required"

    注意!!!

    1.iframe  嵌套页面,在一个页面中插入新页面,长和a标签搭配使用。宽高可指定,支持相对路径
        <iframe src="xx" name="xxx">
        属性:
          1.frameborder 页面边框宽度
    2.a标签 跳转页面 (HTTP GET请求)
        属性:
         1.target属性:
           1._blank 新页面打开页面
           2._self 当前页面打开页面
           3._parent 父窗口打开页面
           4._top 祖窗口打开页面
        2.a标签和iframe标签搭配使用案例:
           <iframe name="xxx" src="#" frameborder="0">
           <a target=xxx href="http://qq.com">QQ</a>
           <a target=xxx href="http://www.baidu.com">百度一下</a>
           iframe会加载一个完整页面,会很卡
        3.download
           下载
        4.href
           1.#不会对服务器发起请求,此时a元素作为锚点,不跳转页面
           2.除了#以外的值都会发起请求 
           3.伪协议 javascript:; 点击后什么都不做
    3.form 标签 跳转页面 (HTTP POST请求)
        记得name要加
        form表单中必须要有提交按钮,负责无法提交
        <form action="服务器的位置" method="post" target="_blank">
          <input type="submit" value="submit" name="xxx">
          <input type="checkbox" id="XX"><label>爱吃</label><label><input type="radio"></label>
        </form>
      name是请求的第四部分,上传的数据内容
      html只提供了form表单可以上传内容,汉字上传过程中会被转成编码
      button在form中不指定类型会被默认为submit
      2.tetxarea
    4.tabel
       <tabel border="1">
         <colgroup>
           <col width="100">  //控制第一列的宽度 
           <col width="100">  //控制第二列的宽度 
         </colgroup>
         <thead>
           <tr>
             <th><th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td><td>
           </tr>
         </tbody>   
         <tfoot>
           <tr>
             <td><td>
           </tr>
         </tfoot>      
        </tabel>
    
      1.tr 一行 td 数据 th表头 
    

    http-serve小工具 本地开启http服务

    安装命令

    npm i -g http-server 
    展开全文
  • 标签

    2020-07-23 11:06:26
    < h1 >html< /h1 > < h2 >html< /h2 > < h3 >html< /h3 > <...标签是成对出现的,< hn >标签共分为六级,在< h1 >…< /h1>之间的文字就
  • mybatis常用标签

    万次阅读 多人点赞 2018-08-21 13:58:53
    1.1 select 标签  属性介绍: id :唯一的标识符. parameterType:传给此语句的参数的全路径名或别名 例:com.test.poso.User或user resultType :语句返回值类型或别名。注意,如果是集合,那么这里填写的是集合的...
  • Mybatis全部标签

    千次阅读 2018-07-17 16:48:01
    出处:...   一、定义SQL语句 (1)select 标签的使用  属性介绍:  id :唯一的标识符.  parameterType:传给此语句的参数的全路径名或别名 例:com.test.poso.User或user  resultTy...
  • HTML lable标签

    千次阅读 2019-07-18 10:18:11
    label> 定义与用法 < label>...就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上 for属性可把 label 绑定到另外一个元素,< label> 标签的 for 属性...
  • 几个新的H5标签介绍

    万次阅读 2020-06-12 11:16:01
    article, aside, details, figcaption, figure, footer, header, hgroup, main, menu所有浏览器都不支持, nav, section, summary 都是块级元素 &... 标签定义图像映射中的区域(注:图像映...
  • 什么是(监督式)机器学习?...标签可以是小麦未来的价格、图片中显示的动物品种、音频剪辑的含义或任何事物。 特征 特征是输入变量,即简单线性回归中的x变量。简单的机器学习项目可能会使用单个特征,...
  • git命令之git tag 给当前分支打标签

    万次阅读 多人点赞 2013-04-12 15:18:42
    git tag — 标签相关操作 发表于 2011年06月29日 由 机器猫 标签可以针对某一时间点的版本做标记,常用于版本发布。 列出标签 $ git tag # 在控制台打印出当前仓库的所有标签 $ git tag -l ...
  • 在新标签打开链接的时候这样点选 Ctrl+左键 或者 鼠标中键 或者 右键链接选择'新标签页中打开链接', 可实现出现新标签页但不自动跳转 但是这个有问题, 即, 新标签只是在背景打开, 操作后并不会跳转到这个新标签页 ...
  • 关于a标签点击去除默认样式

    万次阅读 2016-08-05 14:23:13
    我们在平时a标签里面嵌套一些字体图片,这是很常见的。但是我们并不需要点击时候a标签里面的字体变色。这个小知识点,很简单:css样式: a{ text-decoration:none; color:#333; } 记住这个color一定要写这样你再...
  • svn中打标签的一种方法

    万次阅读 2013-06-08 15:08:23
    SVN创建标签的方法  方法一:TortoiseSVN客户端浏览创建 选中需要创建标签的目录,右键-->copy to,在弹出框中输入新建标签所在的URL地址,填写log信息,确定。     方法二:本地创建 本地副本更新到最新,...
  • a标签中的文字超出固定长度则隐藏

    万次阅读 2015-04-17 18:49:02
    css样式: max-width: 230px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display:block; float:left;
  • 标签(tag)可以针对某一时间点的版本做标记,常用于版本发布。 列出标签 // 在控制台打印出当前仓库的所有标签 $ git tag  // 搜索符合模式的标签 $ git tag -l ‘v0.1.*’  打标签 ...
  • google设置在新标签页打开的方法

    万次阅读 2018-01-30 13:06:46
    外国人的习惯和国人就是不一样,喜欢在同一个标签页覆盖打开标签页,所以chrome浏览器默认的也是新标签页覆盖旧标签页,这和我们国人的习惯大相径庭,我们喜欢在不同标签页打开多个链接,而不是后退来前进去的。...
  • jsp中c标签的引入

    万次阅读 2017-05-20 23:10:45
    c标签的引入需要导包 javax.servlet jstl 1.2 taglibs standard 1.1.2
  • 关于a标签的换行问题

    万次阅读 2014-09-23 13:52:30
    当内容过多的时候 ,如果是英文 不会造成换行,如果希望内容换行,在a标签的样式中加入word-wrap:break-word; 例:...
1 2 3 4 5 ... 20
收藏数 2,151,880
精华内容 860,752
关键字:

标签