草庐IT

HTML核心标签和属性

累倒的石头笔记(jiayi) 2023-03-28 原文

1、文档声明、文档结构、功能标签

注:

HTML/HTML5 骨架相关基础标签


文档声明

 	<!DOCTYPE>

用于告诉浏览器此文档的类型是什么
处于<html>标签之前。用于告诉浏览器此文档的类型是什么。目前开发中常用的声明是<!DOCTYPE html>,表示声明一个 HTML5 文档。
它不属于 HTML 标签,而是一条指令

功能标签

meta

元标签,用来表示网页的基础配置

2、块级元素

注:

块级元素可以独占一行,默认自上而下排列,可以设置宽高.


标签名称 描述
h1 ~ h6 一级标题 ~ 六级标题
p 段落标签,用来描述网页中的段落内容
div 用于页面区域的划分。它就像一个容器,用来放某一个区域的内容
ul,ol 定义无序列表,定义有序列表
li 定义列表项,与 ul 或者 ol 配合使用
dt,dd 定义列表中的项目, 描述列表中的项目
figure 定义一段独立的内容(不常用,了解即可)
figcaption 定义 figure 元素的标题(不常用,了解即可)
form 表单标签,里面包含很多搜集信息的表单元素,如输入框,复选框等
table,canvas 定义 HTML 表格,通过脚本(通常是 JavaScript)来绘制图形
pre 预格式化的文本

3、区块标签(新增语义化标签)

标签名称 描述
header 定义页头
nav 定义导航
main 定义页面的主体区域
aside 可用作文章的侧栏
article 可用作文章的内容
section 可用作文档的区域块,类似于 div
footer 定义页脚

4、内联元素

注:

内联元素不会自占一行,与其他内联元素在同一行显示,且宽高由内容撑起。


标签名称 描述
a 超链接标签,用于从一张页面链接到另一张页面
span 用来组合文档中的行内元素,一般用来包裹文字
label 为 input 元素定义标注(标记)label 可设置 for 属性
b,u 字体加粗标签,下划线文本标签(不常用,了解即可)
i,strong 斜体文本标签,用于强调文本的标签字体会加粗(不常用,了解即可)
em 用于强调文本的标签,字体变成斜体(不常用,了解即可)
mark 突出显示文本的标签,字体会有背景颜色,默认的是黄色(不常用,了解即可)
datalist 标签/控件,需要结合 option 标签使用(不常用,了解即可)

5、特殊内联元素

注:

可以设置宽高,但不独占一行


标签名称 描述
img 图片标签,用于在网页中嵌入图片
audio 音频标签,用于在页面中引入音频
video 视频标签,用于在页面中引入视频
input 定义用户可输入数据的输入字段。例如登录页面的用户名和密码框,都是使用 input 标签
select 定义下拉列表
option 定义下拉列表项,需要与 select 配合使用(块元素,写在这里是因为它需要跟 select 标签一起使用)
textarea 定义多行文本框,常用于留言框、备注框等

6、转义字符

标签名 描述
表示空格符号
< 表示小于号“<”
> 表示大于号“>”
© 表示版权符号“©”

7、表格标签

标签名 描述
table 表格标签
tr 表格行
td 表格列
th 标签,可替代 td 标签,用来设置表格的标题
thead 定义表格头部
tbody 定义表格主体内容
tfoot 定义表格尾部
caption 设置表格的标题

8、标签中的属性

属性名 描述
lang html 标签的属性,用来标记网页的语言; 常见属性值有:"en"和"zh";en 代表英语, zh 代表中文
charset meta 标签的属性,声明页面文档使用的字符编码类型。 常用的属性值有:UTF-8 和 GB2312
type 修改无序列表与有序列表默认的前导样式(已被废弃,了解即可) 1、type 属性写在无序列表中,属性值有: (1)disc:默认值,实心圆样式 (2)circle: 空心圆样式 (3)square:实心方块样式 2、type 属性写在有序列表中,属性值有: (1)1:默认值,数字编号 (2)A:大写英文编号 (3)i:小写罗马数字编号 (4)I:大写罗马数字编号 (5)a:小写英文编号
start 有序列表的属性,指定列表编号的起始值,能修改有序列表标签默认的前导样式(不常用,了解即可)
reversed 有序列表的属性,指定列表中的条目是否倒序排列的(不常用,了解即可)
src (1)img 标签的属性,指定图片的路径 (2)audio 标签和 video 标签也可以设置 src 属性,指定音频、视频的路径
alt img 标签的属性,用来对引入的图片进行文本描述
width 规定元素的宽度。此属性不常用,了解即可。后续学习 css,会使用 css 样式设置元素宽度
height 规定元素的高度。此属性不常用,了解即可。后续学习 css,会使用 css 样式设置元素高度。 注意,height 或者 width 如果省略其中一个属性,则按照图片原始比例缩放图片
href a 标签属性,规定该链接要跳转到目标页面的地址
title a 标签属性,设置鼠标悬停的文本
target a 标签属性,规定在何处打开链接文档; 如果属性值为 blank 或_blank,会打开新的标签页
controls audio/video 的属性,用于显示播放控件
autoplay audio/video 的属性,设置音频/视频自动播放
loop audio/video 的属性,设置音频/视频可以循环播放
class 所有标签都可以使用这个属性,用来定义元素的类名(后续学习 css,会有详细的讲解)
action form 标签的属性,用来设置 form 表单的数据要提交到哪个地址。提交到哪个地址,后端开发会告诉我们(不常用,了解一下。提交数据常用 ajax,后面会学习到的)
method form 标签的属性,用来设置表单的提交方式,常用的方式有 get 或 post(不常用,了解即可)
rows textarea 标签属性,设置多行文本框有多少行
cols textarea 标签属性,设置多行文本框有多少列
list datalist 控件的属性,二者结合,可以与输入框绑定,为输入框设置备选项(不常用,了解即可)
border 边框属性,可为 table 添加边框
border-collapse css 样式,通常给表格设置 border-collapse:collapse;让表格边框合并,成为单线表格;
colspan 表格标签的属性,实现跨列合并的效果,用来设置 td 或 th 跨列合并
rowspan 表格标签的属性,实现跨行合并的效果,用来设置 td 或 th 跨行合并
cellspacing 设置表格单元格内容与边框之间的间隙(不常用,了解即可)
cellpadding 设置两个单元格之间的间隙(不常用,了解即可)

9、input 元素中的属性

属性名称 描述
type 用来定义表单元素的类型。属性值如下: (1)text:单行文本输入框 (2)radio:单选按钮 (3)checkbox:复选框 (4)password:密码框 (5)button:普通按钮,也可以直接写成 button 按钮,例如:<button>按钮标签</button> (6)submit:提交按钮 (7)reset:重置按钮 (8)color:颜色控件(不常用,了解即可) (9)date:日期控件 (10)time:时间控件 (11)email:电子邮件输入控件 (12)file:文件选择控件,需要上传本地文件时,可以使用它 (13)number:表示数字输入控件 (14)range:表示拖拽条(不常用,了解即可) (15)search:t 表示搜索框(不常用,了解即可) (16)url:表示网址输入控件
value 用于为 input 元素设定值,value 值一般是给后端发送数据时使用,后续学习了相关课程就会了解
name 规定 input 元素的名称
checked 用来设置单选按钮、多选按钮的默认选中项
placeholder 表示提示文本,用来设置输入框的提示信息,告诉用户该输入框需要输入什么内容
disabled 用于禁用 input 元素,表示只读
max max 表示最大值,表示数字输入控件(即 type="number"的 input 元素)允许输入的最大值
min min 表示最小值,最小值,表示数字输入控件(即 type="number"的 input 元素)允许输入的最小值
require 表示必填字段,约束某项内容是必填项,比如规定”用户名“项,是必填项

有关HTML核心标签和属性的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - 如果为空或不验证数值,则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  3. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah

  4. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码,尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么?

  5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  6. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法,但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  7. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  8. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点? 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者,如果您需要做一些更复杂的事情,有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  9. ruby-on-rails - Rails 模型——非持久类成员或属性? - 2

    对于Rails模型,是否可以/建议让一个类的成员不持久保存到数据库中?我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量,我想将值存储在一个“虚拟”类成员中,该成员只是将值传递回Controller。你能有这样的类(class)成员吗? 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中,所有实例变量都是私有(private)的,不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

  10. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

随机推荐