从一个待办应用“入门”前端开发-HTML及通用属性

慕尘
433 阅读6分钟

画板.png

从第一篇我们大概知道了我们初步要实现的界面样式。也了解到一个网页的组成有哪些东西。那么，今天我们就学习一下如果我们要完成一个如上的页面需要知道哪些标签及其属性。首先，我们先了解一下HTML的通用属性。

1. HTML通用属性

从上篇中我们认识到id这个属性，而这个id是每个元素都有的属性。除了id还有一些其他属性也是每个元素都有的属性。

  • class用来定义元素的类名。我的理解就是给不同的元素进行分类，如果现实世界中，人、动物、植物。所以同一个页面元素的类是可以重复的。

  • style用来定义元素的行内样式。与style标签的功能类似，但不同的是style标签中可以给不同的元素定义样式。而style属性是只能给这个元素定义样式。

  • title用来定义额外的信息。鼠标放到这个元素上时，额外显示的内容。

当然除了上述的属性，还有一些其他的属性也是通用的属性。这里只介绍了常用的属性，其他的属性后面再做介绍。我们现在可以使用一下以上的属性。还是以第一篇的代码作为基础。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		p {
			font-size: 80px;
			color: red;
		}
	</style>
</head>
<body>
	<p id="hello">Hello Word</p>
	<script>
		document.getElementById('hello').onclick = function () {
			alert('hello word');
		}
	</script>
</body>
</html>

image.png

我们试试添加class属性。并同时添加一下其他的有意思的东西。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		p {
			font-size: 80px;
			color: red;
		}
		.line {
			font-size: 16px;
			color: blueviolet;
		}
	</style>
</head>
<body>
	<p class="line" id="hello">Hello Word</p>
	<script>
		document.getElementById('hello').onclick = function () {
			alert('hello word');
		}
	</script>
</body>
</html>

image.png

我们运行之后，我们的hello word颜色变了，大小也变了。为什么会这样呢。

我们看下我们新增的内容。首先，我们给p元素新增了class属性，并设置它的属性值为line。再看看这个style中新增的CSS。

<style>
    .line {
            font-size: 16px;
            color: blueviolet;
    }
</style>

我们新增了一个新的选择器。仔细观察，这个新选择器会发现，它与我们的p标签上的class的属性值是一样的，只不过这个选择器的前面多了个.。我们在第一篇中了解到以标签名作为选择器的称之为标签选择器。那么，这种以class作为选择器的称之为类选择器。前面的.就是类选择器的标识，写类选择器的时候必须要有这个.。否则它就变成标签选择器了。

可是为什么加了类选择器之后，页面的hello word样式就变了呢？因为，CSS的选择器是有权重的，也就是优先级。在CSS中类选择器的优先级大于标签选择器。那么，同一个元素即有标签选择器，也有类选择器，是不是标签选择器就没有用了呢？我们可以先做个实验。我们先改下我们的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            p {
                    font-size: 80px;
                    color: red;
                    background: green;
            }
            .line {
                    font-size: 16px;
                    color: blueviolet;
            }
    </style>
</head>
<body>
    <p class="line" id="hello">Hello Word</p>
    <script>
            document.getElementById('hello').onclick = function () {
                    alert('hello word');
            }
    </script>
</body>
</html>

我们给标签选择器加了个background的属性，这个属性就是用来设置元素的背景颜色。我们运行一下看看。可以发现，虽然标签选择器的字体大小和颜色都没有显示出效果，但是标签选择器中的背景是有效果的。所以，同一个元素即有标签选择器，也有类选择器，标签选择器是依旧存在的，只是与类选择器相同的属性是没有了效果而已。其实，准确来说，是与类选择器相同的属性被类选择器覆盖了。

image.png

我们再改下我们的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            p {
                    font-size: 80px;
                    color: red;
                    background: green;
            }
            .line {
                    font-size: 16px;
                    color: blueviolet;
            }
    </style>
</head>
<body>
    <p class="line" id="hello" style="background: #333; color: #fff;">Hello Word</p>
    <script>
            document.getElementById('hello').onclick = function () {
                    alert('hello word');
            }
    </script>
</body>
</html>

我们在p元素上加了style属性，并且设置了元素的背景颜色和字体颜色。我们运行一下看看。然后我们会发现之前的标签选择器和类选择器都有被覆盖。所以我们要知道行内的样式style的优先级是大于标签选择器和类选择器的。

image.png

我们最后再改下我们的代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        font-size: 80px;
        color: red;
        background: green;
      }
      .line {
        font-size: 16px;
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <p
      class="line"
      id="hello"
      style="background: #333; color: #fff"
      title="我是一个title"
    >
      Hello Word
    </p>
    <script>
      document.getElementById("hello").onclick = function () {
        alert("hello word");
      };
    </script>
  </body>
</html>

我们再运行一下。运行后发现页面好像没什么变化。你可以试一下鼠标移到黑灰色区域看看。此时我们会看到下方会显示出‘我是一个title’

image.png

到此我们就把常用的标签属性给学到了，那么接下来再看下我们需要知道哪些标签

2. 认识一下标签

从上篇中我们认识到了p标签，接下来我们认识一下其他的标签。

2.1 h1-h6标签

h1-h6标签指的是标题，依次是标题一到标题六。我们可以敲下代码运行一下看看。(省略部分代码)

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

image.png

2.2 div与span标签

div和span都没有特定的含义。一般用于网页的布局。我们可以敲下代码运行一下看看。(省略部分代码)

<div>区域1</div>
<div>区域2</div>
<span>区域3</span>
<span>区域3</span>

运行后我们会发现，区域3与区域4处于同一行，但是区域1与区域2确不处于同一行。这是为什么呢？这是因为在HTML中元素可以为分为块元素(块级元素)和行内元素(内联元素)。块元素(块级元素)占据一行可以设置宽高，而行内元素(内联元素)则只占据自己内容大小的区域，且无法设置宽高。div则属于块元素(块级元素)，而span则是行内元素(内联元素)。上面的h1-h6则也属于块元素(块级元素)。

2.3 button标签

button标签表示的是一个按钮。我们可以敲下代码运行一下看看。(省略部分代码)

<button>按钮</button>

image.png button标签可能用到的属性：

  • disabled设置或禁用按钮。设置禁用的按钮是无法被点击的。
  • type设置按钮的类型。可以设置为submit,button, reset。

2.4 input标签

input标签代表的是输入标签。我们可以敲下代码运行一下看看。(省略部分代码)

<input type="text" value="text" />
<input type="button" value="button" />
<input type="checkbox" value="checkbox" />
<input type="color" value="color" />
<input type="datetime" value="datetime" />
<input type="email" value="email" />
<input type="file" value="file" />
<input type="month" value="month" />
<input type="number" value="number" />
<input type="password" value="password" />
<input type="radio" value="radio" />
<input type="range" value="range" />
<input type="reset" value="reset" />
<input type="submit" value="submit" />
<input type="url" value="url" />
<input type="week" value="week" />
<input type="tel" value="tel" />

image.png

input标签可能用到的属性：

  • type 设置input的类型。输入的类型。
  • placeholder 设置input的提示信息，只适用于text、search、url、tel、email 和 password。
  • disabled 禁用和启用input。

2.5 textarea标签

textarea标签代表的是多行输入文本框。敲一下代码运行一下看看。

<textarea name="" id="" cols="30" rows="10" placeholder="文本提示"></textarea>

image.png

input标签可能用到的属性：

  • cols文本框的宽度
  • disabled禁用文本框
  • placeholder文本框提示
  • rows文本框的高度

3. 今日总结

  • class、style、title都是元素的通用属性。
  • 类选择器的前面必须要有.。
  • 选择器具有权重的特性。也就是优先级。行内样式>类选择器>标签选择器
  • 标签可以分为行内元素和块级元素。块级元素可以设置宽高、占据一行。而行内元素不可以设置宽高，只占自己的内容大小。
avatar
文章
阅读
粉丝