HTML——基础标签

最新推荐文章于 2024-04-13 17:02:31 发布

secret_lee

最新推荐文章于 2024-04-13 17:02:31 发布

阅读量835

点赞数

分类专栏：前端文章标签：前端基础

本文链接：https://blog.csdn.net/secret_lee/article/details/86700625

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML，超文本编辑语言。这是一种标签语言！！！它具有一种对称的结构。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
	<title>lesson1</title>
	<meta charset="utf-8">
	<meta content="服装" name="keywords">
</head>	
<body>
	<h1>标题</h1>
    <p>段落</p>
</body>
</html>

<html lang="en"> ==> 是告诉搜索引擎爬虫，我们的网站是关于什么内容的。SEO搜索引擎优化。

<head>标签里面是用户不可见的，里面放的是这个页面的“思想”。而<body>标签内放的是这个页面的内容。

title标签，存放的是页面的头名。而meta标签里面，存放得是页面字体的格式，比如Unicode字符集，utf-8（Unicode的超集）、gbk（亚洲文字字符集）等等。规定了字符格式，就可以避免页面出现乱码问题。

而在body标签下，主要的标签有如下几个：

<h>标签是标题标签，显示是一个文章或者页面的标题内容。有1-6,6种大小。而<p>标签，是段落标签，主要显示段落文字。

其次非常重要的两个标签是<div>和<span>标签！

<div>标签和<span>标签没有具体的作用，但是在HTML中充当了容器的重要作用！！！

那什么是容器呢？容器就好比我们生活中的衣柜、书柜，没有这些柜子，我们依旧可以生活，但是有了它们后，我们的生活会非常方便！而容器也类似于这些生活中的柜子等。容器使我们的代码分块明确，比如我们用<div>标签把某一个功能房放一块，另外一个功能有放到一个<div>标签中。这样我们的代码就非常整洁、清晰，让页面更加结构化！易于维护、编写。其次，容器有捆绑操作的优势，即绑定化操作。而在以后的页面即式修改中，有了容器我们就可以非常方便的对容器内的页面样式进行修改。

接下来，我们对HTML中的一些重要标签以及性质进行较为详细的介绍。

（1）空格在编辑器中的含义是文字分隔符，所以在HTML中，不论写几个空格，输出都只显示一个空格。同理回车代表的也是文字分隔符。所以在HTML中，我们使用HTML编码特殊字符来代表空格文本这一类的特殊字符，比如 代表的就是文本空格。而<br>这个标签代表的是回车意思。一个<br>代表一个回车，两个<br>标签代表两个回车。

（2）列表标签：

有序列表与无序列表：

<!DOCTYPE html>
<html lang="en">
<head>
	<title>lesson1</title>
	<meta charset="utf-8">
</head>	
<body>
	<!--有序列表-->
    <ol>
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
	</ol>
    <!--有序列表，为安照字母排序-->
    <ol type="A">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
	</ol>
	<!--有序列表，从2开始排序-->
    <ol type="1" start="2">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
	</ol>
	<!--无序列表-->
    <ul>
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
	</ul>
	<!--无序列表,仅有一个type属性可以修改-->
    <ul type="circle">
		<li>a</li>
		<li>b</li>
		<li>c</li>
		<li>d</li>
	</ul>
</body>
</html>

ul和li属于父子结构，有这样的功能，一个大的功能由许多小的功能子项组成，而小的功能子项的样式和大功能基本没有区别，这个时候，我们使用ul和li这种父子结构来编码。比如网站中的导航栏就符合这种父子结构，我们一般使用ul和li来做。

（3）<img>标签

<!DOCTYPE html>
<html lang="en">
<head>
	<title>lesson1</title>
	<meta charset="utf-8">
	<meta content="服装" name="keywords">
</head>	
<body>
	<img src="http://img.bimg.126.net/photo/ZZ5EGyuUCp9hBPk6_s4Ehg==/5727171351132208489.jpg" alt="这是一张测试图片，无实际意义。" title="这是一张测试图片。">
<!--
	图片路径：
	1.网上的url
	2.本地的绝对路径
	3.本地的相对路径
	alt：
	当图片加载失败时，alt显示对该图片的文字描述。（图片占位符）
	title：
	图片提示符
-->
</body>
</html>

（4）<a>标签

a标签主要是实现超链接效果。

1、超链接功能：href属性中存放链接地址，而在target中，我们可以设置点击链接后页面的跳转方式（是当前页面加载或者新页面加载等）；

2、锚点功能：herf属性中存放某个标签的id，那么点击这个超链接，我们就会跳转到这个id的标签处；

3、（重要！！！）打电话功能：

<a href="tel:123123">,接下来如果在手机端点击这个链接，那么这个链接就会调用手机中的电话功能，拨打电话到123123这个号码。这个功能在移动端使用非常广泛。

4、协议限定符：这里点击这个链接，会强制运行一个JavaScript代码。

（5）<form>表单标签：

下面我们来一段完整的form标签的代码，根据代码来分析其功能。

<!--
form标签的主要功能是 发送数据到后台！这一点非常厉害，因为通货form表单我们就可以实现
用户前端的数据提交到后台处理的功能。而form实现的也正是这个功能
-->

<form method="get" action="index.php">
<!--这里method属性是表单数据发送到后端的方法，分别有get或post，这里我们先不解释这两种方法的区别，
而action属性则是规定发送数据的地址，比如我们这里就是将表单数据发送到名为index的php文件来处理-->
    <p>
    username：<input type="text" name="username">
    </p>
    <p>
    password：<input type="password" name="psw">
    </p>
    <p>
    选择：
    1<input type="radio" name="星期几" value="星期一">
    2<input type="radio" name="星期几" value="星期二">
    3<input type="radio" name="星期几" value="星期三">
    4<input type="radio" name="星期几" value="星期四">
    5<input type="radio" name="星期几" value="星期五">
    6<input type="radio" name="星期几" value="星期六">
    7<input type="radio" name="星期几" value="星期天">
    </p>
    <input type="submit" value="">
    <!--仅有form标签是不行的，我们还需要让用户有地方输入数据，而input标签就是接受用户输入的标签
    其中text为文本输入，用户可以在其中输入任意的数据；而password为密码输入，用户在该属性下输入不可见的密码信息；而submit是提交按钮，在value中我们可以修改提交按钮的名字。
    而我们提交数据，我们需要数据的数据名和数据值，我们才能成功发送这个数据。所以name属性下存放的就是我们的数据名。
    -->

    
</form>

上面所讲就基本上是HTML的主要内容。总而言之，HTML是网站的骨架！而编程就是一个一步步完善我们的idea的过程。我们通过编程将我们思考的东西一步步实现。所以，通过学习编程我们应该记住，任何东西都不是一蹴而就的，我们要一步步完善，一步步前进。

最后，我们通过前面所学的知识以及一点点JavaScript知识，我们来简单实现一个输入框的自动提示以及输入后的消失功能，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<title>lesson1</title>
	<meta charset="utf-8">
	<meta content="输入框" name="keywords">
</head>	
<body>
    <!--onfocus属性是当用户将焦点放在username这一个input下时，触发的事件；而onblur属性则是浏览器失去当前标签下的焦点时触发的事件。-->
	<p>
	username：<input type="text" style="color: #999;" name="username" value="请输入用户名"
	onfocus="if (this.value=='请输入用户名') {this.value=''} this.style.color='#424242'" onblur="if(this.value==''){this.value='请输入用户名'; this.style.color='#999'} ">
	</p>
	<p>
	password：<input type="password" name="password">
	</p>
	<input type="submit">
</body>
</html>

secret_lee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML——基础标签

HTML，超文本编辑语言。这是一种标签语言！！！它具有一种对称的结构。例如：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;title&gt;lesson1&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta
复制链接

扫一扫