HTML Tag & Element

What is HTML?

HTML is a markup language for describing web pages. 它是一种用于描述网页的标记语言。

  • HTML stands for Hyper Text Markup Language, a markup language is a set ofmarkup tags
  • HTML tags describe document content 标签描述了HTML文件的内容
  • HTML documents contain HTML tags and plain text, are also called web pages(HTML 文件也被称作网页,由标签和纯文本组成)

HTML Tags (case-insensitive 大小写不敏感)

  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • They normally come in pairs like <b> and </b> 通常成对出现,虽然大部分浏览器可以显示正确HTML without End tag, 但是考虑到严格版本的XHTML,最好还是写上。
  • The first tag in a pair is the start (opening )tag , the second tag is the end (closing ) tag
  • Some HTML elements do not have an end tag like<br>

The World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.
W3C 建议在HTML4和XHTML中标签使用小写。因此,尽管 HTML 5 标准没有要求标签小写,我们使用小写的标签。

注意: The text between <body> and </body> is the visible page content. 在body之间的文本才是页面的可视内容

HTML Elements

Strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags. 

严格来说,HTML元素指的是在开标签和闭合标签之间所有的东西,包括这两个标签。

HTML elements can be nested (elements can contain elements 也就是说一个元素的内容可以是其他元素).

HTML elements with no content are called empty elements.

没有内容的元素被称为空元素

<br> is an empty element without a closing tag (it defines a line break 回车).

Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).

因此尽管HTML 5没有要求空元素要闭合,为了让你的文档对于XML解析器是可读的,记得闭合所有HTML元素。

文件后缀

HTML files should have a .html extension (not .htm).


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现element ui Tag的动态添加标签,可以使用vue的响应式数据和相关方法来实现。首先,在data中定义一个数组属性,用于保存动态添加的标签数据。然后,在模板中使用v-for指令循环渲染标签。在输入框中通过@keyup.enter.native或@blur事件监听用户输入,将输入的标签值添加到数组中。同时,通过v-if和v-else指令控制输入框和"New Tag"按钮的显示与隐藏。 具体的代码实现可以参考以下步骤和示例代码: 1. 在data中定义一个数组属性,用于保存动态添加的标签数据。例如,可以将其命名为"tags"。 2. 在模板中使用v-for指令循环渲染标签。可以参考示例代码中的el-tag元素。 3. 在输入框中通过@keyup.enter.native或@blur事件监听用户输入,将输入的标签值添加到"tags"数组中。可以参考示例代码中的el-input元素。 4. 使用v-if和v-else指令控制输入框和"New Tag"按钮的显示与隐藏。可以参考示例代码中的v-if和v-else用法。 示例代码如下: ```html <el-table-column type="expand"> <template slot-scope="scope"> <el-tag v-for="(item, i) in scope.row.attr_vals" :key="i" closable @close="handleClose(i, scope.row)">{{ item }}</el-tag> <el-input class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)"></el-input> <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">New Tag</el-button> </template> </el-table-column> ``` 在以上代码中,通过v-for指令循环渲染标签,使用v-if和v-else指令控制输入框和按钮的显示与隐藏。在相应的事件中,可以调用相关的方法来处理用户的输入和操作。 通过以上步骤和示例代码,就可以实现element ui Tag的动态添加标签功能了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [element ui Tag 动态添加标签](https://blog.csdn.net/codercjw/article/details/128652652)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue+element-ui表格封装tag标签使用插槽](https://download.csdn.net/download/weixin_38606404/12925481)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值