小白教程
所有教程
关于
Search
172.70.178.48
172.70.178.48
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML属性”的源代码
本页内容
上一节:
HTML元素
下一节:
HTML段落
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|5]] HTML 属性提供有关 HTML 元素的附加的一些信息。这些信息会影响元素的展现。 == HTML 属性 == * 所有 HTML 元素都可以有属性 * 属性提供有关元素的附加信息 * 属性总是在'''开始标签'''中指定 * 属性通常以'''名称/值'''对形式出现,例如:<nowiki>name="value"</nowiki> == href 属性 == <nowiki><a></nowiki>标签定义了一个超链接。由href属性指定链接指向的页面的 URL: <sample title="" desc="" run="s1"> <a href="https://www.w3schools.com">Visit W3Schools</a> </sample> <run name="s1"> <!DOCTYPE html> <html> <body> <h2>href 属性</h2> <p>HTML链接是用a标签定义的。链接地址在href属性中指定:</p> <a href="https://www.xiaobai.wang">访问小白教程</a> </body> </html> </run> 可以前往[[HTML链接]]教程页面了解更多关于链接的知识。 == src 属性 == 该<nowiki><img></nowiki>标签用于在 HTML 页面中嵌入图像。该src属性指定要显示的图像的路径: <sample title="" desc="" run="s3"> <img src="/favicon.ico"> </sample> <run name="s3"> <!DOCTYPE html> <html> <body> <h2>src 属性</h2> <p>HTML图像用img标记定义,图像的文件名在src属性中指定:</p> <img src="/favicon" width="100" height="100"> </body> </html> </run> 有两种方法可以在src 属性中指定 URL: * 绝对 URL - 指向托管在另一个网站上的外部图像的链接。示例:src="https://xiaobai.wang/favicon.ico"。 注意:外部图像可能受版权保护。如果您没有获得使用许可,您可能违反了版权法。此外,您无法控制外部图像;它可以突然被删除或更改。 * 相对 URL - 指向网站内托管的图像的链接。此处,URL 不包含域名。如果 URL 开头没有斜杠,则它将相对于当前页面。示例:src="favicon.ico" ,如果你浏览器里面显示的页面为 https://xiaobai.wang/path1/test.html 则刚才的图片加载的URL为 https://xiaobai.wang/path1/favicon.ico 。如果 URL 以斜杠开头,示例:src="/favicon.ico" 即使你访问的页面为https://xiaobai.wang/path1/test.html 图片加载的URL为 https://xiaobai.wang/favicon.ico < blockquote> 提示:最好使用相对 URL。如果更改域名不用去修改之前写的src地址。 </blockquote> == 宽度和高度属性 == <nowiki><img></nowiki> 标签还包含 width height 属性,用来指定图像的宽度和高度(以像素为单位): <sample title="" desc="" run="s4"> <img src="/favicon.ico" width="100" height="200"> </sample> <run name="s4"> <!DOCTYPE html> <html> <body> <img src="/favicon.ico" width="100" height="200"> </body> </html> </run> == alt 属性 == 如果由于某种原因无法显示图像,alt属性指定图像的替代文本。加载可能是由于连接速度慢、src属性错误或用户使用屏幕阅读器造成的。 <sample title="" desc="" run="s5"> <img src="/favicon.icox" width="100" height="200" alt="图片加载失败的时候显示这个文本,说明这里是个什么图片"> </sample> <run name="s5"> <!DOCTYPE html> <html> <body> <img src="/favicon.icox" width="100" height="200" alt="图片加载失败的时候显示这个文本,说明这里是个什么图片"> </body> </html> </run> == style属性 == 该style属性用于向元素添加样式,例如颜色、字体、大小等。 <sample title="" desc="" hererun="s6"> <p>这个段落文本为没有设置任何属性</p> <p style="color:red;">这个段落文本为红色</p> </sample> == lang 属性 == 最好在<nowiki><html></nowiki>标签中加入lang属性,以声明网页的语言。这是为了帮助搜索引擎和浏览器,如果浏览器开启了自动翻译功能,可以更好的被识别。 <syntaxhighlight lang="html" line> <!DOCTYPE html> <html lang="en"> <body> ... </body> </html> </syntaxhighlight> 国家代码也可以添加到lang 属性中的语言代码中。因此,前两个字符定义 HTML 页面的语言,后两个字符定义国家。 以下示例将英语指定为语言,将美国指定为国家: <syntaxhighlight lang="html" line> <!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> </syntaxhighlight> 可以在这里查看语言代码 https://baike.baidu.com/item/ISO%20639-1/8292914 这里查看国家代码 https://baike.baidu.com/item/ISO%203166-1/5269555 == title 属性 == 当将鼠标悬停在元素上时,title 属性的值将显示为工具提示, 这样可以方便用户更好的使用你的网站,了解功能。 <sample title="" desc="" hererun="s8"> 将鼠标移到GMV上面即可看见效果。 <p title="GMV(全称Gross Merchandise Volume),即商品交易总额 ,是成交总额(一定时间段内)的意思">GMV:10000万</p> </sample> [[文件:Title 提示.png]] == 始终用引号添加属性值 == 如果不使用引号,不然在某些特殊场景下会导致XSS漏洞,或者导致解析出错。 <sample title="" desc="" hererun="s9"> <p title=关于 小白 教程>关于</p> <p title="关于 小白 教程">关于</p> </sample>
返回至“
HTML属性
”。
上一节:
HTML元素
下一节:
HTML段落