整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML 属性

性是 HTML 元素提供的附加信息。

HTML 属性

  • HTML 元素可以设置属性

  • 属性可以在元素中添加附加信息

  • 属性一般描述于开始标签

  • 属性总是以名称/值对的形式出现,比如:name="value"

属性实例

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

实例

<ahref="http://www.runoob.com">这是一个链接</a>

HTML 属性常用引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的,不过使用单引号也没有问题。

提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name='John "ShotGun" Nelson'

HTML 提示:使用小写属性

属性和属性值对大小写不敏感。

不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 (X)HTML 要求使用小写属性。

HTML 属性参考手册

查看完整的HTML属性列表: HTML 标签参考手册。

下面列出了适用于大多数 HTML 元素的属性:

属性描述
class为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式(inline style)
title描述了元素的额外信息 (作为工具条使用)

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

  • 缩进使用soft tab(4个空格);
  • 嵌套的节点应该缩进;
  • 在属性上,使用双引号,不要使用单引号;
  • 属性名全小写,用中划线做分隔符;
  • 不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);
  • 不要忽略可选的关闭标签,例:


<!DOCTYPE html>
 <html>
 	<head>
 		<title>Page title</title>
 	</head>
 	<body> <img src="images/company_logo.png" alt="Company">
 		<h1 class="hello-world">Hello, world!</h1>
 	</body>
 </html>

HTML5 doctype在页面开头使用这个简单地doctype来启用标准模式,使其在每个浏览器中尽可能一致的展现;虽然doctype不区分大小写,但是按照惯例,doctype大写 (关于html属性,大写还是小写)。<!DOCTYPE html> <html> ... </html> lang属性根据HTML5规范:应在html标签上加上lang属性。这会给语音工具和翻译工具帮助,告诉它们应当怎么去发音和翻译。
更多关于 lang 属性的说明在这里;在sitepoint上可以查到语言列表;
但sitepoint只是给出了语言的大类,例如中文只给出了zh,但是没有区分香港,台湾,大陆。而微软给出了一份更加详细的语言列表.aspx),其中细分了zh-cn, zh-hk, zh-tw。<!DOCTYPE html> <html lang="en-us"> ... </html> 字符编码通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为’UTF-8’。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> ... </html> IE兼容模式用 <meta> 标签可以指定页面应该用什么版本的IE来渲染;<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> 引入CSS, JS根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值。HTML5 规范链接使用link
使用style
使用script<!-- External CSS --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document CSS --> <style> ... </style> <!-- External JS --> <script src="code_guide.js"></script> <!-- In-document JS --> <script> ... </script> 属性顺序属性应该按照特定的顺序出现以保证易读性;

  • class
  • id
  • name
  • data-*
  • src, for, type, href, value , max-length, max, min, pattern
  • placeholder, title, alt
  • aria-*, role
  • required, readonly, disabled

class是为高可复用组件设计的,所以应处在第一位;
id更加具体且应该尽量少使用,所以将它放在第二位。

<a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src="..." alt="...">

boolean属性

boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要;
更多内容可以参考 WhatWG section on boolean attributes:
boolean属性的存在表示取值为true,不存在则表示取值为false。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

JS生成标签

在JS文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。

减少标签数量

在编写HTML代码时,需要尽量避免多余的父节点;很多时候,需要通过迭代和重构来使HTML变得更少。

<!-- Not well -->
<span class="avatar">
    <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

实用高于完美

尽量遵循HTML标准和语义,但是不应该以浪费实用性作为代价;任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

程序越来越火,而小程序需要学会的基本语言则是HTML+CSS+JS,今天给大家带来HTML的简介和操作思想,希望大家看完能对HTML有所了解。

HTML是什么

  1. HTML的全称是HyperText Mark-up Language,翻译过来就是超文本标记型语言。

  2. 超文本指的是超出文本的范畴,标记:理解为标签,html中所有的操作都是通过标签来实现的。

  3. html是做网页。

第一个HTML程序

创建hello.html,利用编辑工具NotePad编辑,输入一下代码,点击保存,点击运行,选择自己有的浏览器即可。

HTML遵循的规范

  1. HTML程序以<html>开始,同时以</html>结束

  2. HTML程序包含两部分内容:head和body,代码如下:

3. html的标签有开始标签,同时也要有结束标签,代码如下:

4. html代码是不区分大小写的

5. 有些标签没有结束标签,需要在标签内结束------</br>

实现换行的操作,使用标签实现的<br>,没有</br>

操作思想

网页中可能有很多的数据,不同的数据可能有不同的显示效果,这个时候需要使用标签把我们需要操作的数据包起来(封装),通过修改标签的的属性值来实现标签内数据样式的变化。标签相当于一个 容器,通过修改容器的属性值,实现容器内数据样式的变化。

总结

从学习HTML开始,带你一步一步学习,直到开发一个小程序。喜欢的还是点个赞,加个收藏;想继续关注的,还请添加关注;如果有什么话想说,可以发表评论。希望以上本篇内容能让大家有说收获,感谢大家。