（前端）HTML之基本标签01

最新推荐文章于 2023-07-14 09:26:34 发布

凡哈哈

最新推荐文章于 2023-07-14 09:26:34 发布

阅读量206

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/l65656565/article/details/124769999

版权

1.什么是HTML?
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

2.HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
标签的分类：围堵标记 <开始></结束>
空标记 <开始>

3.Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

HTML中提供了一种最标准的网页结构格式
1.html标记
<html></html>

作用：
       （1）所有的标记的根标记
       （2）用来标识该文件是基于html语言所编写的网页

2.head标记
        <head></head>

作用：网页的头部，专门设置网页文件的编码，网页的标题，网页的搜索引擎等等操作。

3.body标记
        <body></body>

作用：承载页面内容

格式：
        <html>
           <head></head>
           <body></body>
       </html>

文件的编码：
    中文： GBK GB2312 utf-8

   纯英文： ISO-8859-1

演示：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Demo</title>
		<script type="text/javascript">
		window.onload=function(){
			t1.disabled=""
			t1.onclick=function(){
				
			}
		}
		</script>
	</head>
	<body>
		<button type="button" id="t1">点我开始</button>
		<button type="button" id="t2">点我结束</button>
		<div>
			<img src="./img/biadu.JPG" >
		</div>
	</body>
</html>

效果：

演示二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>企业邮箱</title>
		<style type="text/css">
			body {
				background-image: url(img/backbg.jpg);
				width: 715px;
				height: 345px;
				background-position: center;
				background-repeat: no-repeat;
				margin-top: 0px;
				margin-right: auto;
				margin-bottom: 0px;
				margin-left: auto;
				font-size: 15px;
 
			}
 
			#mDiv {
				float: right;
				height: 150px;
				width: 300px;
				margin-top: 120px;
				margin-right: 55px;
			}
 
			#login {
				margin-left: 60px;
			}
		</style>
		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}
 
			// 用户名设置
			function mUser() {
				var user = $("user").value;
				var regex = /^\d{4,12}$/;
				if (!regex.test(user)) {
					$("aa").innerHTML = "用户账号必须在4~12位数之间！！!";
					return false;
				}
				return true;
			}
 
			// 密码设置
			function mPwd() {
				var pwd = $("pwd").value;
				var regex = /^\d{6}$/;
				if (!regex.test(pwd)) {
					$("bb").innerHTML = "密码必须为六位数！！！";
					return false;
				}
				return true;
			}
 
			// 登录跳转设置
			function mCheck() {
				var mUser = mUser();
				var mPwd = mPwd();
				if (!mUser && !mPwd) {
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<div id="mDiv">
			<form action="success.html" method="post" onsubmit="return mCheck()">
				<table>
					<tr>
						<td>用户名:</td>
						<td><input type="text" id="user" onblur="mUser()"><span id="aa"></span></td>
					</tr>
					<tr>
						<td>密码:</td>
						<td><input type="password" id="pwd" onblur="mPwd()"><span id="bb"></span></td>
					</tr>
					<tr>
						<td colspan="2">
							<input id="login" type="image" src="img/login.gif" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

效果：

资源

小结：

一、基本标签/双标签 [必须成双成对出现]
head:头部
title:标题
body:身体(主体)
h1-h6:标题标签
h7:相当于不写
段落标签：p /p
空格： 
二、单标签
换行：<br/>
水平线标签：<hr>或者<hr/>
<hr size="2" color="red" width="30%(50px)">大小颜色宽度(px)
三、有序列表：
<ol>
<li>语文有序列表</li>
</ol>

四、无序列表：
<ul>
<li>哈哈</li>
<li>呵呵</li>
</ul>

五、块级标签清单标记：
<dl>
<dt>咖啡</dt>
<dd>心情不好的时候可以来两杯</dd>
<dd>调整调整心情</dd>
</dl>

六、加图片：
<img src="5.gif" width = "100px" height= "100px" title="出来呀" alt="加载失败">

七、让图片动起来：跑马灯标签
<marquee direction="right"></marquee>

八、div相当于swing的容器：用来装东西市面上流行的布局都是div+CSS
<div>
<input type = "button" value = "确定">
</div>

九、设置字体颜色和大小：
<span style="color:orange;font-size:30px">心情</span>