HTML元素和属性
<tag>......</tag>
类似于这样成对出现的结构,称之为元素.
元素结构 : 开始标签 + 内容 + 结束标签
<h1 class="title">.....</h1>
元素的出现通常伴随着属性,属性仅会出现在元素的开始标签中.
属性结构 : 属性名 = "属性值"
<img src="logo.jpg">
并不是所有的元素都有成对的标签,如图片元素,它是一个单标签元素.
HTML注释
<!-- 注释内容 -->
像这种结构的标签就是HTML注释,被注释的内容不会在浏览器中显示.
适当的注释,能够让我们阅读程序的速度加快
注释不能嵌套使用
大部分开发软件中创建注释的快捷键是 Ctrl+/
HTML属性
<a harf="index.html" title="首页">首页</a>
<input type="text" disabled>
属性一般结构为 : 属性名 = "属性值"
属性中也有不含属性值的属性,如disabled属于一个布尔属性.
属性前必须有空格,属性值必须被英文双引号扩起来.
除此之外,我们还可以自定义属性来存储我们的一些数据以便 JS 使用。
属性分类
属性有很多种,从使用来说大概可以分为三类:
- 可以用于每个元素的全局属性,如
class
属性. - 可用于某一类元素的,如
form
表单相关元素的name
与value
属性. - 只用于某一个元素的,如
alt
属性只用于img
元素
四大全局属性
class
<p class="p1 red">文本段落</p>
<div class="red">我也有一个类名为red</div>
设置元素的一个或多个类名,方便使用 CSS 或 JS 对该元素进行操作. 具有以下特点:
- 类名不能以数字开头
- 类名可以设置多个值,以空格分开,如
<div class="box box--menu">......</div>
- 不同的元素可以有相同的类名
id
<p id="text">文本段落</p>
<div id="block">区块内容</div>
设置元素的唯一性,常用于 JS 操作或 CSS 操作,也可用作定义锚点. 具有以下特点:
- 每个ID的值在当前文档必须是唯一的,不能出现两个一样的id值.
- 不可以和 class 那样设置多个值
title
<a title="全部的链接文字" href="#">链接文字很多...</a>
- 用来设置元素的额外信息,鼠标滑过元素暂停一会会显示 title 属性的内容.
style
<div style="display: none;">我是隐藏的区域,可以通过JS来切换显示</div>
<p style="width: 500px;">设置宽度为500px</p>
- 用于设置元素的行内样式,一般用于 JS 动态改变元素的样式.