html 1

html 1

工具：vs code

  1. 运用”！+Enter“一键配置html文件
    <!DOCTYPE html> <!--声明文档类型--> 
<html lang="en"> <!--一种双标签类型，声明我们写的是网页--> 
<head><!--基本不会在网页中显示出来，我的理解是一些网页配置和声明--> 
	<meta charset="UTF-8"> <!--编码格式，常用为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> 
	</head> 
	<body> <!--网页内容--> 
	</body> 
</html>
  2. title标签 <title> </title>
    1. title标签是一种双标签
    2. title是<head>中必须有的标签
    3. title显示在浏览器的状态栏上、
    <head> 
	<meta charset="UTF-8"> 
	<title>我的网页</title> 
</head>
  3. meta标签<meta>
    1. meta标签是一种单标签
    2. meta标签用来描述网页的编码格式，常用格式为：UTF-8
    <head> 
	   <meta charset="UTF-8"> 
</head>
  4. **标题标签<h> </h>
    1. 标题标签是一种双标签
    2. 标题标签共六个<h1> … <h6>h1定义最大标题，h2定义最小标题
    3. vscode快速生成h1-h6快捷键：h$*6
    4. align可以在标签中添加位置属性：left、center、right （一般不推荐使用）
    <body>
	<h1 align="center">我的标题</h1> 
</body>
  5. **段落标签<p></p>
    1. html中虽然可以在<body>中直接写入段落，但是一般用<p>来写入，方便以后编辑。
    <!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>我的网页</title> 
    </head> 
    <body> 
 	   <p>我的段落标签</p> 
 	</body> 
 </html>
  6. **换行标签<br>
    1. 是一种空的单标签
    <!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>我的网页</title> 
	</head> 
	<body> 
		<p>我的段落<br>标签</p> 
	</body> 
</html>
  7. **水平线<hr color=” ” width=” ” size=” ” align=” ”>
    color：颜色
    width：水平线长度（单位：px（像素））
    size：水平线宽度
    align：对齐方式（默认居中）
    <!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>我的网页</title> 
 </head> 
 <body> 
 	<hr color="red" width="300px" size="20px" align="left"> 
 </body> 
 </html>
  8. **图片标签<img src=”” alt=”” title=”” width=”” height=””>
    src: 图片路径（地址+名字)
    alt：在图片加载失败时替代文本
    width：图片长度
    height：图像宽度
    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>我的网页</title> 
 </head> 
 <body> 
 	<img src="1.webp" alt="图片"> 
 </body> 
 </html>
posted @ 2023-01-18 20:35  黄骏  阅读(22)  评论(0)    收藏  举报