Part 1-2 HTML元素
2018-09-13 本文已影响0人
那谁_
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 动态改变元素的样式.
